作业的中浮动的问题
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="header">
<div class="logo">
<img src="images\logo.png">
</div>
<div class="span">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">FACULTY</a></li>
<li><a href="#">EVENTS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
</div>
<div class="content">
<div class="banner">
<div class="img">
<img src="images/banner3.jpg">
<div class="cover">
<ul>
<li><input type="text" name="" placeholder="your Name"></li>
<li><input type="text" name="" placeholder="your Phone"></li>
<li><input type="text" name="" placeholder="your Email"></li>
<li><input type="text" name="" placeholder="your Name"></li>
<li><textarea rows="5" cols="20" name="" id=""></textarea></li>
</ul>
</div>
</div>
<div id="clear"></div>
</div>
<div class="about-text">
<div class="about"><h1>ABOUT</h1></div>
<div class="line"></div>
<div class="text"><p>Lorem Ipsun is simply dummy text of the printing and typesetting</p>
<p>industry.Lorem Ipsum has been the industry's standard dummy</p>
<p>text ever since the 1500s.</p></div>
</div>
<div class="around">
<div class="img">
<img src="images/bb3.jpg">
<ul id="menu1">
<li><h2>A WORD</h2></li>
<li><h2>ABOUT US</h2></li>
</ul>
</div>
</div>
</div>
<div class="footer"></div>
</body>
</html>
*{
padding: 0px;
margin: 0px;
}
.header{
width: 1200px;
margin: 0px auto;
height: 55px;
background-color: #07cbc9;
overflow: hidden;
}
.header .logo{
margin-left: 100px;
float: left;
}
.header .span ul{
margin-right: 60px;
margin-top: 0px
margin-bottom:0px;
}
.header .span ul li{
list-style: none;
float: right;
margin-right: 10px;
margin-top: 15px;
}
.header .span ul li a{
text-decoration: none;
color: #fff;
padding: 20px;
}
.header .span ul li a:hover{
background-color: #000;
opacity: 0.4;
}
.content{
width: 1200px;
margin: auto;
}
.content .banner img{
height: 500px;
width: 100%;
}
.content .banner .cover{
border: 0px dashed grey;
background-color: #000;
opacity: 0.4;
z-index: 2;
position: absolute;
top:55px;
left:160px;
/*float: left;*/
margin: auto;
width: 1200px;
height:500px;
clear: both;
}
.content .banner .cover ul{
text-align: center;
margin-top: 70px;
clear: both;
}
.content .banner .cover ul li{
margin-bottom: 20px;
list-style: none;
clear: both;
}
.content .about{
font-size: 25px;
text-align: center;
margin-top: 50px;
}
.content .line{
border:0.5px solid #07cbc9;
width: 3%;
margin: 20px auto;
/*margin-left: 745px;
margin-top: 20px;*/
}
.content .about-text .text{
width:100%;
text-align: center;
margin-top: 20px;
}
.content .about-text .text p{
color: #8E8E8E;
}
.content .around{
width: 100%;
}
.content .around .img{
width: 25%;
margin: 25px auto;
}
.content .around .img img{
/*float: left;
*/ margin-top: 40px;
margin-left: -170px;
position: absolute;
/* overflow: hidden*/;
}
.content .around #menu1{
list-style:none;
right: 340px;
top: 50px;
position:relative;
}
老师，为什么我覆盖cover的那一层，设置的绝对定位，然后它就不能根据屏幕的大小而变化呢？浮动的东西就不能设置margin：auto了吗？
正在回答 回答被采纳积分+1
同学你好，1、运行贴出代码，在cover层中覆盖在图片上的遮罩层，当设置的绝对定位时，元素会脱离标准文档流，此时margin也是生效的，但是是作用在脱离标准文档流中，就会出现同学说的margin感觉没有生效的问题。
2、根据题目要求，图片上要有半透明的遮罩，建议同学再添加一个遮罩层的内容，比如：
.topLayer{
background-color: #000;
opacity: 0.4;
z-index: 1;
position: absolute;
top: 100px;
width: 100%;
height: 600px;
}如上所示，width为100%，可以让遮罩层可以随浏览器宽度的改变而变化。
如果我的回答解决了你的疑惑，请采纳！祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 676 份
- 解答问题 9666 个
本阶段将从前端网页搭建入手，到Java Web基础，前后端结合助你完成Java Web小白的蜕变！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星