Css 实现遮罩层

最新推荐文章于 2024-05-30 16:48:43 发布

chudai6963

最新推荐文章于 2024-05-30 16:48:43 发布

阅读量328

点赞数

文章标签： php

原文链接：https://my.oschina.net/phpweishunlong/blog/889737

版权

<!doctype html>
<html>
<head>
    <title>布局实例</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <style>
        #zhezhao{
            /*典型的遮罩层做法*/
            width:100%;
            height:100%;
            position:fixed;
            background:black;
            opacity:0.3;
            z-index:100;
            display:none;
        }
        #login{
            /*border:1px solid red;*/
            width:300px;
            height:80px;
            /*居中做法*/
            position:absolute;
            left:50%;
            top:50%;
            margin-left:-150px;
            margin-top:-40px;
            background:#ccc;
            z-index:101;
            display:none;
        }
    </style>
</head>
<body>
    <div id="zhezhao"></div>
    <div id="zhezhao"></div>
    <div id="login">
        <form action="1.php">
            用户名：<input type="text" /><br>
            密　码：<input type="password" /><br>
            <input type="submit" value="登录" />
            <button type="button" onclick="zhezhao.style.display='none';login.style.display='none'">取消</button>
        </form>
    </div>

    <div class="container">
        <!-- 头部开始 -->
        <div class="header">
            <div class="header-top">
                <div class="left bg logo">LOGO</div>
                <div class="left bg banner1">BANNER1</div>
                <div class="left bg banner2" onclick="zhezhao.style.display='block';login.style.display='block'">登录</div>
            </div>
            <div class="clear"></div>
            <div class="nav bg">菜单</div>
        </div>
        <!-- 头部结束 -->
        <!-- 主体开始 -->
        <div class="main">
            <div class="main-left left">
                <div>
                    <div class="big left">栏目一</div>
                    <div class="big right">栏目二</div>
                </div>
                <div>
                    <div class="small left" style="margin-left:0px">栏目三</div>
                    <div class="small left">栏目四</div>
                    <div class="small left">栏目五</div>
                    <div class="small left">栏目六</div>
                </div>
            </div>
             <div class="main-right right">
                <div class="aside">栏目七</div>
                <div class="aside" style="margin:10px 0">栏目八</div>
                <div class="aside">栏目九</div>
            </div>
        </div>
        <!-- 主体结束 -->
        <div class="clear"></div>
        <div class="footer bg">页脚</div>
    </div>
</body>
</html>

###style.css

/*预定义样式*/
body,ul,p,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
body{text-align:center;}
.left{float:left;}
.right{float:right;}
.clear{clear:both;}
.bg{background:#ccc;}

/*内容开始*/
.container{
    width:960px;
    margin:0 auto;
    /*border:1px solid red;*/
    overflow:hidden;
}

/* 头部开始 */
.logo{
    width:200px;
    height:80px;
}
.banner1{
    width:540px;
    height:80px;
    margin:0 10px;
}
.banner2{
    width:200px;
    height:80px;
}
.nav{
    height:30px;
    margin:10px 0;
}
/* 头部结束 */

/* 主体开始 */
.main-left{
    width:750px;
}
.main-left .big{
    width:368px;
    height:198px;
    border:1px solid #ccc;
}
.main-left .small{
    width:178px;
    height:198px;
    border:1px solid #ccc;
    margin-left:10px;
    margin-top:10px;
}
.main-right .aside{
    width:198px;
    height:128px;
    border:1px solid #ccc;
}
/* 主体结束 */
/* 尾巴开始 */
.footer{
    height:50px;
    margin-top:10px;
}
/* 尾巴结束 */
/*内容结束*/

转载于:https://my.oschina.net/phpweishunlong/blog/889737