作业问题，在线等。ABOUT区的中间部分我打算用双飞翼布局，但是左边部分会消失
中间的图片我用margin：0 auto；设置居中，然后我把左边和右边部分设置了左浮动，当我设置左边部分margin-left：-70%，试图让它覆盖在中间图片的左边的时候，左边部分就消失了，为什么呢？
设置前：
设置后：
HTML部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>A2_9 homework</title>
<link rel="stylesheet" type="text/css" href="A2_8 homework.css">
</head>
<body>
<!--顶部-->
<div class="top">
<div class="logo">
<img src="images/logo.png">
</div>
<div class="nav">
<div class="nav-li"><a href="#">HOME</a></div>
<div class="nav-li"><a href="#">ABOUT</a></div>
<div class="nav-li"><a href="#">GALLERY</a></div>
<div class="nav-li"><a href="#">FACULTY</a></div>
<div class="nav-li"><a href="#">SEVENT</a></div>
<div class="nav-li"><a href="#">CONTACT</a></div>
</div>
</div>
<!--BANNER图-->
<div class="banner">
<div class="picture">
<img src="images/banner3.jpg">
</div>
<div class="opacity"></div>
<div class="sign-up">
<form>
<input type="text" placeholder="your Name" name="name" maxlength="30" >
<input type="text" placeholder="your Place" name="Place" maxlength="30">
<input type="text" placeholder="your Email" name="Email" maxlength="30">
<textarea placeholder="Write Your Comment Here" name="jianjie"></textarea>
<input class="button" type="button" value="SEND MESSAGE" name="SEND">
</form>
</div>
</div>
<!--ABOUT区-->
<div class="about">
<!-- ABOUT区上部分 -->
<div class="about-top">
<h1>ABOUT</h1>
<div class="line"></div>
<p>
I became what I am today at the age of twelve, <br>
on a frigid overcast day in the winter of <br>
I remember the precise moment.
</p>
</div>
<!-- ABOUT区中间部分 -->
<div class="about-middle">
<!-- ABOUT区中间部分的中间部分 -->
<div class="about-middle-middle">
<img src="images/bb3.jpg">
</div>
<!-- ABOUT区中间部分的左边部分 -->
<div class="about-middle-left">
<h2> A WORD<br>
ABOUT US
</h2>
<div class="container">
<p>
One day last summer, <br>
He asked me to come see him Stand.<br>
my friendRahim Khan called from. <br>
with the receiver to<br>
my ear.<br>
</p>
<button>EXPLOER</button>
</div>
</div>
<!-- ABOUT区中间部分的右边部分 -->
<div class="about-middle-right">
<div class="container-top">
<div class="container-top-top">70000</div>
<div class="line"></div>
<div class="container-top-bottom">Students</div>
</div>
<div class="container-bottom">
<div class="container-bottom-top">600</div>
<div class="line"></div>
<div class="container-bottom-bottom">Faculty</div>
</div>
</div>
</div>
<!-- ABOUT区下部分 -->
<div class="about-bottom">
</div>
</div>
<!--GALLERY区-->
<div></div>
<!--页脚区-->
<div></div>
</body>
</html>
CSS部分：
*{
margin: 0;
padding: 0;
font-family: "微软雅黑";
}
/*顶部*/
.top{
width: 100%;
height: 70px;
background-color: #07cbc9;
position: fixed;
z-index: 1;
}
.top .logo{
float: left;
margin-left: 50px;
margin-top: 8px;
}
.top .nav{
float: right;
margin-right: 50px;
}
.top .nav .nav-li{
float: left;
height: 70px;
padding: 0 10px;
line-height: 70px;
}
.top .nav .nav-li a{
text-decoration: none;
color: #fff;
}
.top .nav .nav-li:hover{
background: #000;
}
/*banner图*/
.banner .picture img{
width: 100%;
height: 800px;
padding-top: 70px;
}
.banner .opacity{
width: 100%;
height: 800px;
background: #000;
opacity: 0.3;
position: absolute;
left: 0;
top: 70px;
}
.banner .sign-up{
width: 450px;
height: 345px;
text-align: center;
position: absolute;
left: 50%;
margin-left: -225px;
top: 298px;
}
.banner .sign-up form input{
width: 450px;
height: 35px;
font-size: 15px;
color: #fff;
margin: 10px 0;
background: transparent;
border: 1px #a2a1a1 solid;
}
.banner .sign-up form textarea{
margin: 10px 0;
width: 450px;
height: 105px;
color: #fff;
font-size: 15px;
background: transparent;
}
.banner .sign-up form .button{
width: 160px;
height: 40px;
margin-top: 15px;
}
::-webkit-input-placeholder { /* WebKit browsers */
color: #fff;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #fff;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #fff;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #fff;
}
.banner .sign-up form input:hover{
border: 1px #07cbc9 solid;
}
.banner .sign-up form textarea:hover{
border: 1px #07cbc9 solid;
}
.banner .sign-up form .button:hover{
background: #07cbc9;
}
/*ABOUT区*/
.about{
width: 100%;
}
/*ABOUT区上部分*/
.about .about-top{
width: 100%;
text-align: center;
}
.about .about-top h1{
margin-top: 30px;
margin-bottom: 10px;
}
.about .about-top .line{
width: 35px;
height: 3px;
background: #07cbc9;
margin: 0 auto;
}
.about .about-top p{
margin: 15px 0 30px 0;
}
/*ABOUT区中间部分*/
.about .middle{
width: 100%;
}
/*ABOUT区中间部分的中间部分*/
.about .about-middle .about-middle-middle{
width: 500px;
height: 320px;
margin: 0 auto;
}
.about .about-middle .about-middle-middle img{
width: 500px;
height: 320px;
}
/*ABOUT区中间部分的左边部分*/
.about .about-middle .about-middle-left{
width: 320px;
height: 280px;
float: left;
margin-left: -70%;/*老师就是这里，我打算利用这条语句把左边部分分覆盖在图片的左边，但是不见了*/
}
.about .about-middle .about-middle-left .container{
width: 320px;
height: 218px;
margin-top: 7px;
border-top: 2px #a2a1a1 solid;
border-left: 2px #a2a1a1 solid;
background: rgba(255,255,255,0.5);
}
.about .about-middle .about-middle-left .container p{
margin: 15px 0 0 12px;
}
.about .about-middle .about-middle-left .container button{
width: 80px;
height: 40px;
margin: 20px 0 0 12px;
background: #000;
color: #fff;
}
/*ABOUT区中间部分的右边部分*/
.about .about-middle .about-middle-right{
width: 234px;
height: 288px;
background: #fff;
margin-left: 25px;
text-align: center;
float: left;
}
.about .about-middle .about-middle-right .line{
width: 30px;
height: 3px;
background: #07cbc9;
margin: 0 auto;
}
.about .about-middle .about-middle-right .container-top{
width: 232px;
height: 130px;
border:2px #07cbc9 solid;
margin-bottom: 20px;
}
.about .about-middle .about-middle-right .container-top .container-top-top{
width: 100%;
height: 70px;
line-height: 70px;
font-size: 30px;
font-weight: bolder;
}
.about .about-middle .about-middle-right .container-top .container-top-bottom{
width: 100%;
height: 57px;
line-height: 57px;
}
.about .about-middle .about-middle-right .container-bottom{
width: 232px;
height: 130px;
border:2px #07cbc9 solid;
}
.about .about-middle .about-middle-right .container-bottom .container-bottom-top{
width: 100%;
height: 70px;
line-height: 70px;
font-size: 30px;
font-weight: bolder;
}
.about .about-middle .about-middle-right .container-bottom .container-bottom-bottom{
width: 100%;
height: 57px;
line-height: 57px;
}
正在回答 回答被采纳积分+1
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星