• CSS悬浮居中


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>百分比&悬浮栏</title>
        <!-- 几乎所有的宽度都可以用百分比来表示!! border,line-height不能-->
        <style type="text/css">
            .box{
                width: 90%;
                background-color: gray;
                border: 0px solid #000;
                margin-left:-45%;
                /*    margin数值相当于width数值的负一半    */
                font-size: 16px;
                /*  行高默认为*/
                position: fixed;
                top: 0%;
                left: 50%;
                /*    left数值永远等于50%(想要居中的话)*/
                text-align: center;
                color: #fff;
                /*
                或者直接省略margin.
                left=(100%-width百分比)除以2
                */
            }
            .text{
                width: 30%;
                margin: 2% auto 2%;
                font-weight: bold;
                background-color: lime;
                text-align: center;    
            }
    /*        .pop_windows{
                     60%;    
                height: 50%;
                margin-left: -30%;
                background-color: #ffff90;
                border: 2px solid #000f;
                text-align: center;
                position: fixed;
                top: 25%;
                left: 50%;
            }*/
            .pop_con{
                display: block;
                /*display: none;*/
    
            }
    
            .pop_windows{
                width:     60%;    
                height: 50%;
                /*margin-left: -30%;*/
                background-color: #ffff90;
                border: 2px solid #000f;
                text-align: center;
                position: fixed;
                top: 25%;
                left: 20%;
                z-index: 999;
            }
            .pop_windows h3{
                line-height: 250px; 
            }
            
            .pop_mask{
                width: 100%;
                height: 100%;
                position: fixed;
                top: 0;
                left: 0;
                opacity: 0.3;
                background-color: black;
                z-index: 998;
            }
    
    
        </style>
    </head>
    <body>
        <div class="box">悬浮栏</div>
        <div class="pop_con">    
            <div class="pop_windows">
                <h3><a href="#">点击</a></h3>
            </div>
            <div class="pop_mask"></div>
        </div>    
        <div class="text">
            <em>asdfa</em>
            <br>
            <br>
            <br>
            <br>
            <br>
            <em>asdfa</em>
            <br>
            <br>
            <br>
            <br>
            <br>
            <em>asdfa</em>
            <br>
            <br>
            <br>
            <br>
            <br>
            <em>asdfa</em>
            <br>
            <br>
            <br>
            <br>
            <br>
            <em>asdfa</em>
            <br>
            <br>
            <br>
            <br>
            <br>
        </div>
        <div class="text">
            <em>asdfa</em>
            <br>
            <br>
            <br>
            <br>
            <br>
            <em>asdfa</em>
            <br>
            <br>
            <br>
            <br>
            <br>
            <em>asdfa</em>
            <br>
            <br>
            <br>
            <br>
            <br>
            <em>asdfa</em>
            <br>
            <br>
            <br>
            <br>
            <br>
            <em>asdfa</em>
            <br>
            <br>
            <br>
            <br>
            <br>
        </div>
        <div class="text">
            <em>asdfa</em>
            <br>
            <br>
            <br>
            <br>
            <br>
            <em>asdfa</em>
            <br>
            <br>
            <br>
            <br>
            <br>
            <em>asdfa</em>
            <br>
            <br>
            <br>
            <br>
            <br>
            <em>asdfa</em>
            <br>
            <br>
            <br>
            <br>
            <br>
            <em>asdfa</em>
            <br>
            <br>
            <br>
            <br>
            <br>
        </div>
        <div class="text">
            <em>asdfa</em>
            <br>
            <br>
            <br>
            <br>
            <br>
            <em>asdfa</em>
            <br>
            <br>
            <br>
            <br>
            <br>
            <em>asdfa</em>
            <br>
            <br>
            <br>
            <br>
            <br>
            <em>asdfa</em>
            <br>
            <br>
            <br>
            <br>
            <br>
            <em>asdfa</em>
            <br>
            <br>
            <br>
            <br>
            <br>
        </div>
        <div class="text">
            <em>asdfa</em>
            <br>
            <br>
            <br>
            <br>
            <br>
            <em>asdfa</em>
            <br>
            <br>
            <br>
            <br>
            <br>
            <em>asdfa</em>
            <br>
            <br>
            <br>
            <br>
            <br>
            <em>asdfa</em>
            <br>
            <br>
            <br>
            <br>
            <br>
            <em>asdfa</em>
            <br>
            <br>
            <br>
            <br>
            <br>
        </div>
    </body>
    </html>
  • 相关阅读:
    flask 模板block super()的讲解
    flask-include标签使用标签
    spring boot 使用属性加载顺序
    mongodb中的_id的ObjectId的生成规则
    由整数对(父节点和子节点的关系)组成的二叉树的高度问题
    Akka in action (第一章 介绍Akka)
    数据结构学习(一)数组
    spray-json
    JMS API(二)
    JSM 学习(一)
  • 原文地址:https://www.cnblogs.com/jrri/p/11346693.html
Copyright © 2020-2023  润新知