收藏
批改状态：未批改
老师批语：
学习了遮罩之后，我自己也稍微修好了下正常页面下大致的适用场景：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style4.css">
<title>绝对定位之遮罩</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
.clear{clear: both;}
/*头部header*/
.header{
height: 50px;
width: 100%;
background:pink;
}
.header .nav{
height: 50px;
width: 1200px;
margin: 0px auto;
background:pink;
}
.header_right {
height: 50px;
width: 180px;
text-align: center;
float: right;
line-height: 50px;
}
.nav a{
text-decoration: none;
color: #fff;
margin-right:15px;
padding: 15px;
font-size: 16px;
}
.nav a:hover{
background-color:#ccc;
color: #000; }
ul li{
height: 50px;
list-style: none;
float: left;
line-height: 50px;
}
/*主体部分main*/
.container{
width: 1200px;
height: 600px;
margin:5px auto;
background-color: #ccc;
}
.wrap{
width: inherit;
min-height: 600px;
background-color: blue;
float: left;
}
.main{
padding-left: 200px;
padding-right: 200px;
}
.left{
width: 200px;
min-height: 600px;
background-color: yellow;
float: left;
margin-left: -100%;
}
.right{
width: 200px;
min-height: 600px;
background-color: pink;
float: left;
margin-left:-200px;
}
/*底部footer*/
.footer{height: 200px;
width: 100%;
background-color: #000;}
.footer_content{
width: 1200px;
height: 200px;
margin:0px auto;
background-color: #000;
}
.footer_left{
width: 600px;
height: 200px;
}
.footer_left a{
text-decoration: none;
color: #ccc;
font-size: 13px;
margin-right: 5px;
}
.footer_left a:hover{
color: #fff;
}
.footer_left p{color: #ccc; font-size: 13px;float: left;}
/*绝对定位遮罩，使用绝对定位文本将不在文本流中*/
#shade{
width:100%;
height:100%;
background-color:#000;
position: absolute;
z-index: 100;
opacity: 0.6;
display: none;
}
#login{
width: 300px;
height: 250px;
position: absolute;
background-color: yellow;
z-index: 101;
left:50%;
top:50%;
margin-left:-150px;
margin-top: -125px;
display: none;
}
</style>
<script>
function open(){
var bg = document.getElementById('shade');
bg.style.display = 'block';
var lg = document.getElementById('login');
lg.style.display = 'block';
}
function close(){
var bg = document.getElementById('shade');
bg.style.display = 'none';
var lg = document.getElementById('login');
lg.style.display = 'none';
}
</script>
</head>
<body>
<div id="shade"></div>
<div id="login"><a href="javascript:close()">关闭</a><p>我是一个遮罩</p></div>
<div class="header">
<div class="nav">
<ul>
<li><a href="">首页</a></li>
<li><a href="">视频教程</a></li>
<li><a href="">社区问答</a></li>
<li><a href="">编程词典</a></li>
<li><a href="">手册下载</a></li>
<li><a href="">工具下载</a></li>
<li><a href="">特色课程</a></li>
<li><a href="">菜鸟课堂</a></li>
</ul>
<div class="header_right">
<a href="javascript:open()">登录</a>
<a href="">注册</a>
</div>
</div>
<div class="clear"></div>
</div>
<div class="container">
<div class="wrap">
<div class="main">主体部分</div>
</div>
<div class="left">
左边
</div>
<div class="right">
右边
</div>
</div>
<div class="footer">
<div class="footer_content">
<div class="footer_left">
<ul>
<li><a href="">首页</a></li>
<li><a href="">视频教程</a></li>
<li><a href="">社区问答</a></li>
<li><a href="">编程词典</a></li>
<li><a href="">手册下载</a></li>
<li><a href="">工具下载</a></li>
<li><a href="">特色课程</a></li>
<li><a href="">菜鸟课堂</a></li>
</ul>
<p>PHP中文网：独家原创，永久免费的在线php视频教程，php技术学习阵地！</p>
<p>Copyright 2014-2018 http://www.php.cn/ All Rights Reserved | 皖B2-20150071-9</p>
</div>
</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
总结
遮罩功能和JS关闭登入结合了下，大致做了一个，不是很好。
遮罩主要就是使用绝对定位做，需要注意的是居中后，要margin上左才会居中。
这个遮罩出现滚动时是不会跟屏幕一起移动的，还是需要position：fixed;加个固定定位应该就可以实现。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
