zoukankan      html  css  js  c++  java
  • css弹层效果

    做项目时须要做一个弹层,中间遇到了一点小问题,弹出层如何显示在浏览器窗口正中间位置,在这里记录一下。

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            body {
                width: 100%;
                height: 100%;
            }
    
            .opacity_ {
                width: 100%;
                height: 100%;
                background: gray;
                opacity: 0.5;
                filter: Alpha(opacity=50);
                position: fixed;
            }
            .login {
                width: 300px;
                height: 200px;
                background: blue;
                position: fixed;
                /*login div居中显式方法*/
                margin: auto;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
            }
        </style>
    </head>
    <body>
        <div class="opacity_"></div>
        <div class="login"></div>
    </body>
    </html>

    第二种居中方法:

    .login {
                width:300px;
                height:200px;
                background:blue;
                position:fixed;
                 /*login div居中显式方法*/
                left:50%;
                top:50%;
                 /*login div宽度的一半*/
                margin-left:-150px;
                 /*login div高度的一半*/
                margin-top:-100px;
            }
  • 相关阅读:
    SpringMVC—概述
    Spring—切点表达式
    Spring—Ioc
    Spring—spring概述
    MyBtis—原理及初始化
    mysql数据增删查授权
    mysql完整性约束
    mysql枚举类型与集合类型
    mysql字符类型
    mysql日期类型
  • 原文地址:https://www.cnblogs.com/pfcan66/p/8268243.html
Copyright © 2011-2022 走看看