老师，我这里作业遇到个问题，我遇到一个盒子过不去，请老师帮我看一下（作业的第二段 图片加文字这段）
来源：2-10 作业题
hosir
2019-11-23 15:55:39
<!DOCTYPE html>
<html>
<head>
<title>作业</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.header{
width: 100%;
height:80px;
background-color: #07cbc9;
}
.header .logo img{
width:280px;
height: 60px;
margin-top: 8px;
margin-left: 150px;
float: left;
}
.header .menu{
height: 80px;
float: right;
}
.header .menu ul{
margin-right: 120px;
}
.header .menu li{
float: left;
list-style-type: none;
width: 80px;
font-family: "微软雅黑";
color: #7D7D7D;
font-size: 15px;
line-height: 80px;
font-weight: bold;
text-align: center;
color: white;
}
.main .pic img{
width: 100%;
height: 600px;
position: relative;
}
.main .btn{
z-index: 2;
width: 520px;
/*height: 300px;*/
position: absolute;
top: 340px;
margin-top:-150px;
right: 50%;
margin-right: -260px;
text-align: center;
}
.main .btn .box1{
width: 505px;
height: 39px;
/*background-color: #eee;*/
border: 2px solid #7d7d7d;
margin:20px 0px;
}
.main .btn .box1 .text{
float: left;
margin-top: 10px;
margin-left: 10px;
color:#7D7D7D;
}
.main .btn .box2{
width: 505px;
height: 115px;
border: 2px solid #7D7D7D;
margin: 20px 0px;
}
.main .btn button{
margin-top: 10px;
/*background-color: #F5704F;*/
width: 200px;
height: 60px;
color: black;
font-family: "微软雅黑";
font-size: 14px;
text-align: center;
border-radius: 8px;
}
.top{
width: 100%;
}
.top .ABOUT{
width: 1000px;
/*background: red;*/
margin: 0 auto;
}
.top .ABOUT h1{
text-align: center;
font-size: 48px;
margin-top: 60px;
}
.top .ABOUT h1 .lanxian{
width: 10px;
height: 2px;
background-color: #07cbc9;
}
.main .content .top .recept{
padding-top: 30px;
font-size: 16px;
text-align: center;
color: #7D7D7D;
}
.picAndDes{
width: 1000px;
margin: 0 auto;
margin-top: 40px;
}
.picAndDes .left{
font:left;
display: block;
}
.picAndDes .left .left-top .left-top-text{
font-size: 38px;
}
.picAndDes .left .left-bottom{
margin-top: 10px;
width: 370px;
height: 246px;
border: 1px solid #7D7D7D;
position: relative;
z-index: 1;
display : block;
}
.picAndDes .left .left-bottom p{
margin: 20px 20px;
line-height: 28px;
color: black;
position: absolute;
z-index: 2;
position: block;
}
.picAndDes .left .left-bottom button{
margin-top: 180px;
margin-left: 20px;
background-color: black;
width: 102px;
height: 45px;
color: #ffffff;
font-family: "微软雅黑";
font-size: 14px;
text-align: center;
line-height: 22px;
}
.picAndDes .auto{
}
.picAndDes .auto img{
display: block;
float: left;
width: 548px;
height: 246px;
}
</style>
</head>
<body>
<!--头部-->
<div class="header">
<div class="logo">
<a href="https://www.imooc.com""><img src=".\images/logo.png"></a>
</div>
<div class="menu">
<ul>
<a href="https://www.imooc.com"><li>HOME</li></a>
<a href="https://www.imooc.com""><li>ABOUT</li></a>
<a href="https://www.imooc.com""><li>GALLERY</li></a>
<a href="https://www.imooc.com""><li>FACULTY</li></a>
<a href="https://www.imooc.com""><li>EVENTS</li></a>
<a href="https://www.imooc.com""><li>CONTACT</li></a>
</ul>
</div>
</div>
<!--主体-->
<div class="main">
<div class="pic">
<img src=".\images/banner3.jpg">
</div>
<div class="btn">
<div class="box1">
<span class="text">you name</span>
</div>
<div class="box1">
<span class="text">you name</span>
</div>
<div class="box1">
<span class="text">you name</span>
</div>
<div class="box2">
<span class="text">you name</span>
</div>
<div style="clear:both;"></div><!-- 不加这句话的话，下面的背景会上移 -->
<button>SEND MESSAGE ></button>
</div>
<!-- 内容展示区-->
<div class="content">
<!-- 上部分-->
<div class="top">
<div class="ABOUT">
<h1>ABOUT</h1>
</div>
<div class="recept">
"I want to give good things to record down,after the recall will be,<br>after the recall will be very beautiful."after the recall will be<br>after the recall will beafter the recall will be
</div>
<div class="picAndDes">
<div class="left">
<div class="left-top">
<div class="topLayer"></div>
<p class="left-top-text"> A WORD <br>ABOUT US</p>
</div>
<div class="left-bottom">
<p>asjaslkjljdosominjnnon. <br>asojaoohdsomom,sdniosndoinosojjmo<br>kdssodsodokjkofmoanoanson<br>dsonso ajasalkmalkm<br>asaslkmaslkmol</p>
<button>EXPLORX </button>
</div>
</div>
<div class="auto">
<img src="./images/bb3.jpg">
</div>
<div class="right">
</div>
</div>
</div>
</div>
</div>
<!--底部部-->
<div class="footer">
</div>
</body>
</html>
2回答
-
好帮手慕糖
2019-11-23
同学你好，是指如下这个区域不会布局吗？
这里是第三个区域的中间部分。若是指这里的话，非常抱歉，因为同学说第二段，所以老师以为你第二个区域（banner区域）添加注释的内容是同学要提问的问题。
若是这个区域不会布局的话，老师给你提供个思路，同学可以参考下：
1、这部分用一个盒子包裹，然后给盒子设置具体的宽度，然后设置margin:0 auto;来实现整体居中。
2、内部可以安照从左到右布局，首先是左侧小标题，其次是中间的图片，然后为右侧的两个小区域（需要注意的是左侧的部分跟右侧的部分宽度要尽量一致）。
3、然后左侧的文字区域因一部分在图片上。可用定位来实现。
代码中还有个小问题：
如下，font是设置字体样式的。若是想设置浮动的话，可以使用float，例：
若还不是这部分内容的话，建议：可以再详细的描述下，或者直接截图标明是哪一部分，然后进行提问，便于更加准确的定位与解决问题。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0 -
好帮手慕糖
2019-11-23
同学你好，如下，将这句话注释掉了，背景并没有发生变化。例：
可以再测试看下，若还是有问题，可以新建详细的描述下，是那块的背景上来了，也可以截图说明。然后继续进行提问。
祝学习愉快！
0h019-11-23
相似问题