使用固定定位，使得遮罩层下移
来源：2-10 作业题
哎呦啊狗蛋
2019-05-06 17:20:10
<!DOCTYPE html>
<html>
<head>
<title>2-10作业</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<!--头部-->
<div class="header">
<div class="logo">
<img src="images/logo.png" alt="logo"/>
</div>
<div class="nav">
<ul>
<li>CONTACT</li>
<li>EVENTS</li>
<li>FACULTY</li>
<li>GALLERY</li>
<li>ABOUT</li>
<li>HOME</li>
</ul>
</div>
</div>
<!--主体-->
<div class="main">
<div class="banner">
<img src="images/banner3.jpg">
</div>
<!--遮罩层-->
<div class="bannerLayer"></div>
<div class="bannerLayer-top">
<form>
<input type="text" name="username" value="your Name">
<input type="text" name="phone" value="your phone">
<input type="text" name="email" value="your email">
<textarea name="comment" cols="30" rows="6" >Write Your Comment Here</textarea><br/>
<button type="submit">SEND MESSAGE</button>
</form>
</div>
<!--about区-->
<div class="about">
<div class="about-top">
<h1>ABOUT</h1>
<hr>
<p>lorem ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
</div>
<div class="about-middle">
<div class="left">
<h2>A WORD <br/>ABOUT US</h2>
<div class="word">
<p>Praesent dignissim viverra est, sed bibendum ligula congue non. Sed ac nislet felis gravida commodo? Suspendisseeget ullamcorper ipsum.SUspendidsse diam amet.</p>
</div>
<button>EXPLORE</button>
</div>
<div class="mid">
<img src="images/bb3.jpg">
</div>
<div class="right">
<div class="student">
<h2>70000</h2><hr>
<p>Student</p>
</div>
<div class="faculty">
<h2>600</h2><hr>
<p>FACULTY</p>
</div>
</div>
</div>
<div class="about-bottom">
<div class="bottom_1">
<div class="introd-img">
<img src="images/b1.jpg" alt="">
</div>
<div class="introd-word">
<dl>
<h2>Library</h2>
<dt>Lorem Ipsum is simply dummy text of the<br/>printing and typesetting industry.</dt>
<dd>
Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s,when an unknown printer took
a gallery of type and scrambled it to make a type
specimen book.
</dd>
<dd>
<button>EXPLORE</button>
</dd>
</dl>
</div>
<div class="introd-img">
<img src="images/b2.jpg" alt="">
</div>
<div class="introd-word">
<dl>
<h2>Computer Lab</h2>
<dt>Lorem Ipsum is simply dummy text of the<br/>printing and typesetting industry.</dt>
<dd>
Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s,when an unknown printer took
a gallery of type and scrambled it to make a type
specimen book.
</dd>
<dd>
<button>EXPLORE</button>
</dd>
</dl>
</div>
</div>
<div class="bottom_2">
<div class="introd-word">
<dl>
<h2>Conference Hall</h2>
<dt>Lorem Ipsum is simply dummy text of the<br/>printing and typesetting industry.</dt>
<dd>
Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s,when an unknown printer took
a gallery of type and scrambled it to make a type
specimen book.
</dd>
<dd>
<button>EXPLORE</button>
</dd>
</dl>
</div>
<div class="introd-img">
<img src="images/b3.jpg" alt="">
</div>
<div class="introd-word">
<dl>
<h2>Play Ground</h2>
<dt>Lorem Ipsum is simply dummy text of the<br/>printing and typesetting industry.</dt>
<dd>
Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s,when an unknown printer took
a gallery of type and scrambled it to make a type
specimen book.
</dd>
<dd><button>EXPLORE</button></dd>
</dl>
</div>
<div class="introd-img">
<img src="images/b4.jpg" alt="">
</div>
</div>
</div>
</div>
</div>
<!--gallery区-->
<div class="gallery">
<div class="gallery-main">
<dl>
<dt>GALLERY</dt>
<hr/>
<dd>Lorem Ipsum is simply dummy text of the printing and typesetting<br/>
industry.Lorem Ipsum has been the industry's standard dummy<br/>
text ever since the 1500s.</dd>
</dl>
</div>
<div class="gallery-part">
<div class="part-content">
<dl>
<dt><img src="images/03-01.jpg" alt=""></dt>
<dd>SCIENCE LAB</dd>
</dl>
</div>
<div class="part-content">
<dl>
<dt><img src="images/03-02.jpg"></dt>
<dd>INDOOR STADIUM</dd>
</dl>
</div>
<div class="part-content">
<dl>
<dt><img src="images/03-03.jpg"></dt>
<dd>TRANSPORTATION</dd>
</dl>
</div>
<div class="part-content">
<dl>
<dt><img src="images/03-04.jpg"></dt>
<dd>KIDS ROOM</dd>
</dl>
</div>
<div class="part-content">
<dl>
<dt><img src="images/03-05.jpg" alt=""></dt>
<dd>MEDITATION CLASSES</dd>
</dl>
</div>
<div class="part-content">
<dl>
<dt><img src="images/03-06.jpg"></dt>
<dd>KID PLAYGROUND</dd>
</dl>
</div>
</div>
</div>
<!--底部-->
<div class="footer">
<p>© 2016 imooc.com 京ICP备13046642号</p>
</div>
</body>
</html>
*{
margin:0;
padding: 0;
list-style: none;
text-decoration: none;
font-family: "微软雅黑";
}
/* 头部样式 */
.header{
width: 100%;
height: 80px;
background-color: #07cbc9;
position: fixed;
top: 0;
left: 0;
}
.header img{
width: :200px;
height: 60px;
padding-left: 150px;
padding-top: 10px;
}
.header .logo{
float: left;
}
.header .nav{
float: right;
}
.header .nav ul{
padding-right: 100px;
}
.header .nav ul li{
float: left;
list-style: none;
padding: 0 20px;
height: 80px;
line-height: 80px;
font-size: 18px;
font-weight: bolder;
color: #eee
}
.header .nav ul li:hover{
color:orange;
cursor:pointer;
}
/*主体样式*/
/*banner*/
.main .banner{
width:100%;
height: 600px;
}
.main .banner img{
width:100%;
height: 600px;
}
.main .bannerLayer{
width:100%;
height: 600px;
position: absolute;
top: 80px;
left: 0;
background-color: #000;
opacity: 0.5;
}
/*表单区*/
.main .bannerLayer-top{
width: 600px;
height:300px;
position: absolute;
top: 380px;
margin-top: -150px;
z-index: 2;
right: 50%;
margin-right: -300px;
}
.main .bannerLayer-top form{
text-align: center;
}
.main .bannerLayer-top form input{
border: 2px solid gray;
width: 505px;
height: 39px;
margin-top: 20px;
color: #eee;
background:none;
}
.main .bannerLayer-top form input:hover{
border-color: #07cbc9;
}
.main .bannerLayer-top form textarea:hover{
border-color: #07cbc9;
}
.main .bannerLayer-top form textarea{
border: 2px solid gray;
width: 505px;
height: 115px;
margin-top: 20px;
color: #eee;
background:none;
}
.main .bannerLayer-top form button{
border: 2px solid gray;
width: 123px;
height: 39px;
margin-top: 20px;
color: #fff;
background:none;
}
.main .bannerLayer-top form button:hover{
background: #07cbc9;
border: none;
}
/*about区*/
.main .about{
width: 100%
}
/*about的顶部*/
.main .about .about-top{
width:30%;
margin: 0 auto;
margin-top: 50px;
text-align: center;
}
.main .about .about-top hr{
width: 40px;
margin: 0 auto;
height: 2px;
background-color: #07cbc9;
border: none;
margin-top: 15px;
margin-bottom: 15px;
}
.main .about .about-top p{
font:thin 10px;
}
/*about的中间*/
.main .about .about-middle{
width: 1200px;
margin: 0 auto;
margin-top: 15px;
overflow: hidden;
position:relative;
top: 40px;
left: 120px;
}
.main .about .about-middle .left{
width: 300px;
height: 400px;
float: left;
position: absolute;
left: 100px;
}
}
.main .about .about-middle .left .word{
border: 1px gray solid;
line-height: 28px;
border:1px solid #ccc;
background:rgba(255,255,0.5);
}
.main .about .about-middle .left .word p{
font-size: 14px;
padding-bottom: 20px;
padding:10px;
}
.main .about .about-middle .left button{
text-align: center;
color: white;
background:black;
width:102px;
height:45px;
margin:10px;
border:1px solid #000;
}
main .about .about-middle .left button:{
background:transparent;
color: #000;
}
.main .about .about-middle .mid{
width: 600px;
height: 400px;
float: left;
margin-left: 300px;
}
.main .about .about-middle .mid img{
width:568px;
height: 380px;
}
.right{
width:300px;
height: 350px;
float:left;
}
.right .student,.faculty{
border:1px solid #07cbc9;
margin-top: 20px;
padding-top: 15px;
text-align: center;
width: 238px;
height: 144px;
line-height: 72px;
}
.student hr,.faculty hr{
border:none;
height: 2px;
width: 30px;
background:#07cbc9;
margin:0 auto;
}
.about .about-bottom{
margin-top: 100px;
}
.about .about-bottom .bottom_1{
height:379px;
overflow: hidden;
}
.about .about-bottom .bottom_1 .introd-img img{
width:25%;
float: left;
}
.about .about-bottom .bottom_1 .introd-word{
width:25%;
float:left;
background: #07cbc9;
height:379px;
}
.about .about-bottom .bottom_2{
height:379px;
overflow: hidden;
}
.about .about-bottom .bottom_2 .introd-img img{
width:25%;
float:left;
}
.about .about-bottom .bottom_2 .introd-word{
width:25%;
float:left;
background: #07cbc9;
height:379px;
}
.about .about-bottom .introd-word h2{
font-size:25px;
color: #fff;
margin-top:35px;
margin-bottom:30px;
}
.about .about-bottom .introd-word dt{
font-size:18px;
color: #d1f5f5;
margin-bottom:22px;
}
.about .about-bottom .introd-word dd {
font-size:15px;
color: #a0dbdd;
margin-bottom:45px;
}
.about .about-bottom .introd-word dd button{
width:103px;
height:42px;
background:black;
color:#fff;
font-size:14px;
text-align:center;border: 0;
}
.introd-word button{
margin-left:138.4px;
}
/*gallery*/
.gallery .gallery-main{
width:100%;
margin:0 auto;
text-align: center;
}
.gallery .gallery-main hr{
width:45px;
margin: 22px auto;
border: 2px solid #07cbc9;
}
.gallery .gallery-main dt{
font-size:40px;
font-weight: bold;
}
.gallery .gallery-main dd{
font-size: 12px;
color: #a27979;
}
.gallery .gallery-part{
margin:54px auto;
width: 1200px;
overflow: hidden;
}
.gallery .gallery-part .part-content{
float: left;
padding-right:32px;
padding-top:31px;
}
.gallery .gallery-part .part-content dl{
height: 303px;
}
.gallery .gallery-part .part-content dt{
height: 240px;
}
.gallery .gallery-part .part-content dd{
height:63px;
line-height: 63px;
text-align: center;
background: black;
color: white;
}
/*底部*/
.footer{
width: 100%;
background-color: #07cbc9;
height: 80px;
margin-top: 50px;
}
.footer p{
line-height: 80px;
text-align: center;
color: white;
font-size: 12px;
}
margin:0;
padding: 0;
list-style: none;
text-decoration: none;
font-family: "微软雅黑";
}
/* 头部样式 */
.header{
width: 100%;
height: 80px;
background-color: #07cbc9;
position: fixed; 在这里使用固定定位，使得遮罩与图示不符
top: 0;
left: 0;
}
.header img{
width: :200px;
height: 60px;
padding-left: 150px;
padding-top: 10px;
}
.header .logo{
float: left;
}
.header .nav{
float: right;
}
.header .nav ul{
padding-right: 100px;
}
.header .nav ul li{
float: left;
list-style: none;
padding: 0 20px;
height: 80px;
line-height: 80px;
font-size: 18px;
font-weight: bolder;
color: #eee
}
.header .nav ul li:hover{
color:orange;
cursor:pointer;
}
/*主体样式*/
/*banner*/
.main .banner{
width:100%;
height: 600px;
}
.main .banner img{
width:100%;
height: 600px;
}
.main .bannerLayer{
width:100%;
height: 600px;
position: absolute;
top: 80px;
left: 0;
background-color: #000;
opacity: 0.5;
}
/*表单区*/
.main .bannerLayer-top{
width: 600px;
height:300px;
position: absolute;
top: 380px;
margin-top: -150px;
z-index: 2;
right: 50%;
margin-right: -300px;
}
.main .bannerLayer-top form{
text-align: center;
}
.main .bannerLayer-top form input{
border: 2px solid gray;
width: 505px;
height: 39px;
margin-top: 20px;
color: #eee;
background:none;
}
.main .bannerLayer-top form input:hover{
border-color: #07cbc9;
}
.main .bannerLayer-top form textarea:hover{
border-color: #07cbc9;
}
.main .bannerLayer-top form textarea{
border: 2px solid gray;
width: 505px;
height: 115px;
margin-top: 20px;
color: #eee;
background:none;
}
.main .bannerLayer-top form button{
border: 2px solid gray;
width: 123px;
height: 39px;
margin-top: 20px;
color: #fff;
background:none;
}
.main .bannerLayer-top form button:hover{
background: #07cbc9;
border: none;
}
/*about区*/
.main .about{
width: 100%
}
/*about的顶部*/
.main .about .about-top{
width:30%;
margin: 0 auto;
margin-top: 50px;
text-align: center;
}
.main .about .about-top hr{
width: 40px;
margin: 0 auto;
height: 2px;
background-color: #07cbc9;
border: none;
margin-top: 15px;
margin-bottom: 15px;
}
.main .about .about-top p{
font:thin 10px;
}
/*about的中间*/
.main .about .about-middle{
width: 1200px;
margin: 0 auto;
margin-top: 15px;
overflow: hidden;
position:relative;
top: 40px;
left: 120px;
}
.main .about .about-middle .left{
width: 300px;
height: 400px;
float: left;
position: absolute;
left: 100px;
}
}
.main .about .about-middle .left .word{
border: 1px gray solid;
line-height: 28px;
border:1px solid #ccc;
background:rgba(255,255,0.5);
}
.main .about .about-middle .left .word p{
font-size: 14px;
padding-bottom: 20px;
padding:10px;
}
.main .about .about-middle .left button{
text-align: center;
color: white;
background:black;
width:102px;
height:45px;
margin:10px;
border:1px solid #000;
}
main .about .about-middle .left button:{
background:transparent;
color: #000;
}
.main .about .about-middle .mid{
width: 600px;
height: 400px;
float: left;
margin-left: 300px;
}
.main .about .about-middle .mid img{
width:568px;
height: 380px;
}
.right{
width:300px;
height: 350px;
float:left;
}
.right .student,.faculty{
border:1px solid #07cbc9;
margin-top: 20px;
padding-top: 15px;
text-align: center;
width: 238px;
height: 144px;
line-height: 72px;
}
.student hr,.faculty hr{
border:none;
height: 2px;
width: 30px;
background:#07cbc9;
margin:0 auto;
}
.about .about-bottom{
margin-top: 100px;
}
.about .about-bottom .bottom_1{
height:379px;
overflow: hidden;
}
.about .about-bottom .bottom_1 .introd-img img{
width:25%;
float: left;
}
.about .about-bottom .bottom_1 .introd-word{
width:25%;
float:left;
background: #07cbc9;
height:379px;
}
.about .about-bottom .bottom_2{
height:379px;
overflow: hidden;
}
.about .about-bottom .bottom_2 .introd-img img{
width:25%;
float:left;
}
.about .about-bottom .bottom_2 .introd-word{
width:25%;
float:left;
background: #07cbc9;
height:379px;
}
.about .about-bottom .introd-word h2{
font-size:25px;
color: #fff;
margin-top:35px;
margin-bottom:30px;
}
.about .about-bottom .introd-word dt{
font-size:18px;
color: #d1f5f5;
margin-bottom:22px;
}
.about .about-bottom .introd-word dd {
font-size:15px;
color: #a0dbdd;
margin-bottom:45px;
}
.about .about-bottom .introd-word dd button{
width:103px;
height:42px;
background:black;
color:#fff;
font-size:14px;
text-align:center;border: 0;
}
.introd-word button{
margin-left:138.4px;
}
/*gallery*/
.gallery .gallery-main{
width:100%;
margin:0 auto;
text-align: center;
}
.gallery .gallery-main hr{
width:45px;
margin: 22px auto;
border: 2px solid #07cbc9;
}
.gallery .gallery-main dt{
font-size:40px;
font-weight: bold;
}
.gallery .gallery-main dd{
font-size: 12px;
color: #a27979;
}
.gallery .gallery-part{
margin:54px auto;
width: 1200px;
overflow: hidden;
}
.gallery .gallery-part .part-content{
float: left;
padding-right:32px;
padding-top:31px;
}
.gallery .gallery-part .part-content dl{
height: 303px;
}
.gallery .gallery-part .part-content dt{
height: 240px;
}
.gallery .gallery-part .part-content dd{
height:63px;
line-height: 63px;
text-align: center;
background: black;
color: white;
}
/*底部*/
.footer{
width: 100%;
background-color: #07cbc9;
height: 80px;
margin-top: 50px;
}
.footer p{
line-height: 80px;
text-align: center;
color: white;
font-size: 12px;
}
1回答
-
好帮手慕码
2019-05-06
同学你好！
这里不是遮罩层下移，而是banner上移~
这里的顶部设置了固定定位之后脱离了文档流，不占原来的位置了，因此banner向上移动了80px(顶部的高度)这里可以给banner设置上边距：
同学可以测试一下~
如果帮助到了你 欢迎采纳 祝学习愉快~
0
相似问题