• 遮罩弹窗


    这里的这个遮罩有点问题,高度上没有全部遮罩住,当缩小浏览器屏幕的时候宽度也没有全部遮罩住

    <style>
    body{margin:0;}
    
    /* 
    body< html < 文档
     */
     
    body,html{height:100%;}/*兼容IE低版本,要设置body和html也为100%*/
    
    .floats{position:absolute;top:0;left:0; width:100%; height:100%; background:#000; opacity:0.5;filter:alpha(opacity=50);}
    .alert{width:400px; height:200px; background:#fff; border:2px solid yellow; position:absolute;top:50%;left:50%; margin-top:-102px; margin-left:-202px;}/*如果不加margin-top和margin-left是不会居中的,要加上这两个属性,top的值是本身高度的一半,left是本身宽度的一半,这里因为加了边框所以都多加了两个像素*/
    /* 
    标准   不透明度  opacity:0~1;
    IE私有  filter:alpha(opacity=0~100);*/
    </style>
    </head>
    
    <body>
    
    内容内容内容内容内容内容内容内容内容内容内容<br/>
    内容内容内容内容内容内容内容内容内容内容内容<br/>
    内容内容内容内容内容内容内容内容内容内容内容<br/>
    内容内容内容内容内容内容内容内容内容内容内容<br/>
    内容内容内容内容内容内容内容内容内容内容内容<br/>
    内容内容内容内容内容内容内容内容内容内容内容<br/>
    内容内容内容内容内容内容内容内容内容内容内容<br/>
    内容内容内容内容内容内容内容内容内容内容内容<br/>
    内容内容内容内容内容内容内容内容内容内容内容<br/>
    内容内容内容内容内容内容内容内容内容内容内容<br/>
    <div><img src="../../../4/images/nubia_06.jpg" width="960" height="848"></div>
    <div><img src="../../../4/images/nubia_07.jpg" width="960" height="596"></div>
    <div class="floats"></div>
    <div class="alert"></div>
    
    </body>
  • 相关阅读:
    Js时间处理
    Css 显示删除条目效果
    vue权限控制菜单显示的简单实现
    js取对象的属性值循环
    标题的内容响应式设计
    将一个字符串当做一个方法名或对象的key
    JSON序列化和解析
    import 与export详解
    使用flask-mail扩展发送邮件
    正则表达式练习-计算器实现
  • 原文地址:https://www.cnblogs.com/LO-ME/p/3875485.html
Copyright © 2020-2023  润新知