2-7 为什么我设置的图文混排背景不水平100%显示，而是紧贴内容呢？
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>css网页布局案例(重新做一遍代码更加优化)</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
</style>
</head>
<body>
<!--头部 -->
<div class="header">
<div class="logo">
<img src="images/logo.png">
</div>
<div class="nav">
<ul>
<li>首页</li>
<li>图片</li>
<li>视频</li>
<li>手记</li>
</ul>
</div>
</div>
<!--banner -->
<div class="banner">
<div class="img"><img src="images/1.jpeg"></div>
<div class="toplayer"></div>
<div class="toplayer-top">
<div class="topwords">MY BEAUTIFUL LIFE</div>
<button>LOOK MORE ></button>
</div>
</div>
<!--主体 -->
<div class="main">
<div class="top">
<div class="icon weibo">
<img src="images/weibo.png">
<div class="icon-name">MICROBLOG</div>
</div>
<div class="icon weixin">
<img src="images/weixin.png">
<div class="icon-name">WECHAT</div>
</div>
<div class="icon qq">
<img src="images/QQ.png">
<div class="icon-name">QQ</div>
</div>
</div>
<div class="clear"></div>
<div class="desc">
"I want to give good things to record down,<br>after the recall will be very beautiful."
</div>
<div class="middle">
<div class="m-content">
<img src="images/03-01.jpg">
<div class="m-desc1">Cool Image</div>
<div class="m-desc2">Record The Picture</div>
</div>
<div class="m-content">
<img src="images/03-02.jpg">
<div class="m-desc1">Great Picture</div>
<div class="m-desc2">Record The Picture</div>
</div>
<div class="m-content">
<img src="images/03-03.jpg">
<div class="m-desc1">Cool Image</div>
<div class="m-desc2">Record The Picture</div>
</div>
</div>
<div class="clear"></div>
<div class="bottom-bg"> <!--这个div用来设置背景用的 -->
<div class="bottom"> <!-- 这个div真正用来放内容的 -->
<div class="b-title">FROM THE PHOTO</div>
<div class="b-content">
<dl>
<dt><img src="images/04-01.jpg"></dt>
<dd>Life is like a book,just read more and more refined,more write more carefully.When read,mind open,all things have been indifferent to heart.Life is the precipitation.
</dd>
</dl>
<dl>
<dt><img src="images/04-02.jpg"></dt>
<dd>Life is like a cup of tea,let people lead a person to endless aftertastes.You again good taste,it will always have a different taste,different people will have different taste more.</dd>
</dl>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<!--底部 -->
<div class="footer"></div>
</body>
</html>
<!-- 下面是index.css代码-->
*{margin:0;padding:0;}
.clear{clear:both;}
body{
font-family:"Microsoft YaHei";
}
.header{
width:100%;
height:100px;
line-height:100px;
}
.header .logo{
float:left;
height:100px;
}
.header .logo img{
width:378px;
height:100px;
padding-left:100px;
}
.header .nav{float:right;}
.header .nav ul{padding-right:100px;}
.header .nav ul li{
float:left;
width:80px;
height:100px;
list-style:none;
font-weight:bold;
font-size:16px;
color:#7d7d7d;
}
.banner{
width:100%;
height:768px;
}
.banner .img img{
width:100%;
height:768px;
}
.banner .toplayer{
position:absolute;
top:100px;
left:0;
background-color:#000;
opacity:0.5;
width:100%;
height:768px;
}
.banner .toplayer-top{
width:500px;
height:300px;
position:absolute;
top:484px; /* (距离header)100px+384px(banner高度的50%)*/
margin-top:-150px; /*在上移自身高度的50%就彻底垂直居中啦*/
z-index:2;
right:50%;
margin-right:-250px; /*设置距离右边50%和右移自身宽度的一半，就彻底水平居中啦*/
}
.banner .toplayer-top .topwords{
padding-top:100px;
text-align:center;
font-size:45px;
color:#fff;
font-weight:bold;
}
.banner .toplayer-top button{
width:200px;
height:60px;
margin-top:50px;
margin-left:150px;
background-color:#f5704f;
color:#fff;
font-size:20px;
font-weight:bold;
border-radius:8px;
}
.main{
width:1000px;
margin:0 auto;
}
.main .top .icon{
float:left;
width:33.3%;
padding-top:50px;
text-align:center;
}
.main .top .icon img{
width:100px;
height:100px;
}
.main .top .icon-name{
font-size:20px;
color:#7d7c7f;
font-weight:bold;
padding-top:20px;
}
.main .desc{
font-size:22px;
font-weight:bold;
color:#e19796;
padding-top:50px; /* 必须先把上面的浮动元素的浮动属性清除以后，padding-top才会生效; */
font-style:italic;
text-align:center;
padding-bottom:50px;
}
.main .middle .m-content{
float:left;
padding:10px;
text-align:center;
font-size:20px;
font-weight:bold;
}
.main .middle .m-content img{
width:310px;
height:260px;
}
.main .middle .m-content .m-desc1{
color:#7d7d7f;
padding-top:20px;
}
.main .middle .m-content .m-desc2{
color:#bdbdbc;
}
.main .bottom-bg{
background-color:#f9f9f9;
}
.main .bottom-bg .bottom{
width:1000px;
margin:0 auto;
font-size: 20px;
font-weight:bold;
}
.main .bottom-bg .bottom .b-title{
text-align:center;
color:#7d7c7f;
padding-top:50px;
padding-bottom:50px;
}
.main .bottom-bg .bottom .b-content dl{
float:left;
width:470px;
padding:10px 12px;
}
.main .bottom-bg .bottom .b-content dl img{
width:470px;
height:460px;
}
.main .bottom-bg .bottom .b-content dl dd{
padding-top:20px;
color:#7d7c7f;
padding-bottom:50px;
}
正在回答 回答被采纳积分+1
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星