zoukankan      html  css  js  c++  java
  • html 居中的内容显示框

    <!doctype html>
    <html lang="en">
     <head>
      <meta charset="UTF-8">
      <meta name="Generator" content="EditPlus®">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <title>Document</title>
      <style>
        html,body
        {
            height: 100%;
            overflow: hidden;
        }
        body,div,h2{
            margin: 0;
    
        }
        center{
            padding-top: 10px;
        }
        button{
            cursor: pointer;
        }
        #outer{
            position: fixed;
            top: 0;
            left: 0;
             5%;
            height: 100%;
            background: #000;
            opacity: 0.5;
            filter:alpha(opacity=50);
            display: block;
        }
        #windows{
            position: absolute;
            top: 50%;
            left: 50%;
             50%;
            height: 45%;
            background: #fff;
            border: 4px solid #F90;
            overflow: hidden;
            transform: translate3d(-50%, -50%, 0);
            display: block;
        }
        h2{
            text-align: right;
            background: #FC0;
            border-bottom: 3px solid #F90;
        }
        h2 span{
            color: #F90;
            cursor: pointer;
            background: #FFF;
            border: 1px solid #F90;
            padding: 0 2px;
        }
        p{
            text-align: justify;
            text-indent: 2em;
        }
    </style>
     
     </head>
     <body>
    <div id="windows">
        <h2>title<span id="close">*</span></h2>
        <p>测试平台测试平台测试平台测试平台测试平台测试测试平台</p>
    </div>
     </body>
    </html>
    

      

  • 相关阅读:
    前端调用后台接口下载word文档的两种方法
    Layui form表单提交注意事项
    JavaScript_Util_01
    心理
    小例子
    SQL分割字符串
    绘制10种不同颜色的散点图
    绘制散点图
    subplot的使用
    绘制正弦余弦
  • 原文地址:https://www.cnblogs.com/sea-stream/p/9893629.html
Copyright © 2011-2022 走看看