2-9遮罩位置问题
html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Css案例</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<!-- 顶部 -->
<div class="header">
<div class="nav-left"><img src="images/logo.png" alt="logo"></div>
<div class="nav-right">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>GALLERY</li>
<li>FACULTY</li>
<li>CONTACT</li>
</ul>
</div>
</div>
<div id="clear"></div>
<!-- 主体 -->
<div class="main">
<div class="banner">
<div class="ban">
<img src="images/banner3.jpg" alt="banner">
</div>
<div class="layer"></div>
<div class="form">
<form>
<input style="font-size: 12px" type="text" name="name" placeholder=" your name">
<input style="font-size: 12px" type="text" name="phone" placeholder=" your phone">
<input style="font-size: 12px" type="text" name="e-mail" placeholder=" your e-mail">
<textarea style="font-size: 12px" font-size="30px" name="comment" placeholder=" write your comment here" rows="6" ></textarea>
<input class="submit" type="submit" name="submit" value="SEND MESSAGE">
</form>
</div>
</div>
<div id="clear"></div>
<div class="about">
<div class="about-top">
<h1>ABOUT</h1>
<hr />
<p>Lorern lpsum is simply dummy text of the printing and typesetting<br />
idustry.Lorern lpsum has been the industry's standard dummy<br />
text ever since the 1500s.
</p>
</div>
<div class="about-bottom">
<div class="about-left">
<div class="left-all">
<h2>A WORD <br>ABOUT US</h2>
<div class="content">
<p>
Paresent dignissim viverra est sed <br>
bibendum ligula congue non.Sed BC niisl <br>
et lelis gravida commodo? Suspendisse <br>
ogel ullanxcrper ipsum.Suspendisse <br>
diam amet.
</p>
<form >
<input type="button" value="EXPLORE">
</form>
<div id="clear"></div>
<div class="layer"></div>
</div>
</div>
</div>
<div class="about-middle"><img src="images/bb3.jpg" ></div>
<div class="about-right">
<div class="nav">
<p class="li">70000</p>
<hr>
<p>Students</p>
</div>
<div class="nav">
<p class="li">600</p>
<hr>
<p>Faculty</p>
</div>
</div>
<div id="clear"></div>
</div>
<div id="clear"></div>
</div>
<div class="gallery"></div>
</div>
<!-- 底部 -->
<div class="footer"></div>
</body>
</html>
css：
*{
margin: 0;
padding: 0;
font-family: "Microsoft YaHei UI";
}
#clear{
clear: both;
widows: 0;
height: 0;
margin: 0;
padding: 0;
border: 0;
}
/*顶部*/
.header{
width: 100%;
height: 70px;
background: #07cbc9;
line-height: 70px;
margin-top: 5px;
}
.header .nav-left{
float: left;
padding-left: 100px;
padding-top: 15px;
height: 40px;
}
.header img{
height: 40px;
}
.header .nav-right{
float: right;
height: 70px;
line-height: 70px;
padding-right: 100px;
}
.header .nav-right ul li{
float: left;
list-style: none;
padding-left: 8px;
padding-right: 8px;
font-size: 14px;
color: white;
}
.header .nav-right ul li:hover{
background: black;
cursor: pointer;
}
/*主体*/
.main{
width: 100%;
margin: 0 auto;
position: relative;
}
/*banner*/
.main .banner{
position: relative;
}
.main .banner .ban{
width: 100%;
}
.main .banner img{
width: 100%;
}
.main .layer{
width: 100%;
height: 634px;
background: black;
opacity: 0.5;
position: absolute;
top: 0;
left: 0;
}
.main .form{
position: absolute;
top: 50%;
left: 50%;
margin-left: -202px;
margin-top: -121px;
}
.main .form input,
.main .form textarea{
display: block;
width: 400px;
margin-bottom: 10px;
border: 2px solid #666467;
background: transparent;
font-size: 20px;
color: white;
}
.main .form input{
height: 33px;
}
.main .form .submit{
width: auto;
padding-left: 8px;
padding-right: 8px;
text-align: center;
font-size: 13px;
height: 33px;
color: white;
font-weight: lighter;
margin-left: 142px;
}
.main .form input:hover,
.main .form textarea:hover{
border-color: #07cbc9;
}
.main .form .submit:hover{
background: #07cbc9;
cursor: pointer;
}
/*about区*/
.main .about{
width: 100%;
height: 700px;
/*background: #acacac;*/
text-align: center;
}
.main .about .about-top{
padding-bottom: 30px;
}
.main .about .about-top h1{
padding-top: 40px;
font-size: 38px;
font-family: "微软雅黑";
font-weight: bolder;
}
hr{
width: 30px;
border: 1px solid #07cbc9;
position: relative;
left: 50%;
margin-left: -15px;
margin-top: 15px;
margin-bottom: 15px;
}
.main .about .about-top p{
font-size: 12px;
color: #CCC9C5;
line-height: 20px;
}
.main .about .about-bottom{
width: 100%;
padding-bottom: 85px;
}
.main .about .about-bottom img{
width: 500px;
}
.main .about .about-bottom .about-left{
width: 425px;
float: left;
position: relative;
}
.main .about .about-bottom .about-left .left-all{
border: 0;
margin: 0;
padding: 0;
position: relative;
left: 225px;
background: transparent;
text-align: left;
}
.main .about .about-bottom .about-left h2{
text-indent: 13px;
font-size: 30px;
font-weight: 400;
}
.main .about .about-bottom .about-left .content{
border-top: 2px solid #e1e1e1;
border-left: 2px solid #e1e1e1;
border-bottom: 1px solid #e1e1e1;
border-right: 1px solid #e1e1e1;
padding: 10px;
float: left;
padding: 20px;
}
.main .about .about-bottom .about-left .content p{
font-size: 14px;
line-height: 20px;
}
.main .about .about-bottom .about-left .content input{
width: 88px;
height: 40px;
line-height: 36px;
font-size: 14px;
text-align: center;
background: #000;
border: 2px solid #000;
color: #ffffff;
margin-top: 10px;
}
.main .about .about-bottom .about-left .left-all .content .layer{
width: 320px;
height: 190px;
background: white;
opacity: 0.5;
}
.main .about .about-bottom .about-middle{
width: 500px;
float: left;
}
.main .about .about-bottom .about-right{
width: 300px;
float: left;
}
.main .about .about-bottom .about-right .nav{
width: 180px;
height: 100px;
border-left: 1px solid #07cbc9;
border-top: 1px solid #07cbc9;
border-right: 3px solid #07cbc9;
border-bottom: 3px solid #07cbc9;
vertical-align: middle;
margin-bottom: 25px;
padding-top: 25px;
position: relative;
left: 25px;
}
.main .about .about-bottom .about-right .nav .li{
font-size: 25px;
font-weight: bolder;
}
代码有点乱
在content里设置遮罩div，但是它的位置却跑到了left-all那里去了？为什么？
正在回答 回答被采纳积分+1
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星