bottom部分灰色背景并没有100%覆盖
老师，您好。
我跟着教程视频里的指示来编写代码，但是发现前端预览效果图里，bottom部分灰色背景并没有进行100%宽度覆盖。
请老师帮我检查一下，是代码哪块部分出现了错误？
感谢，辛苦。
前端效果图：
代码如下：
一、html部分：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>css网页布局</title> <link rel="stylesheet" href="index.css"> </head> <body> <!-- header --> <div class="header"> <div class="logo"> <img src="/Users/Deja/Library/Mobile Documents/com~apple~CloudDocs/FrontedDevelopment/Part2-CSS Base/7-CSS Page Layout Foundation/file/网页布局基础/project/image/logo.png" alt="logo"> </div> <div class="nav"> <ul> <li><a href="#">首页</a></li> <li><a href="#">图片</a></li> <li><a href="#">视频</a></li> <li><a href="#">手记</a></li> </ul> </div> </div> <!-- main --> <div class="main"> <div class="top"> <img src="/Users/Deja/Library/Mobile Documents/com~apple~CloudDocs/FrontedDevelopment/Part2-CSS Base/7-CSS Page Layout Foundation/file/网页布局基础/project/image/1.jpeg" /> </div> <!-- 遮罩 --> <div class="toplayer"></div> <div class="toplayer-top"> <div class="word">MY BEAUTIFUL LIFE</div> <button>LOOK MORE ></button> </div> <!--社交账号--> <div class="middle"> <div class="m-top"> <div class="commen weibo"> <img src="image/weibo.png" /> <div class="comm">weibo</div> </div> <div class="commen weixin"> <img src="image/weixin.png" /> <div class="comm">weixin</div> </div> <div class="commen qq"> <img src="image/QQ.png" /> <div class="comm">QQ</div> </div> </div> <!--slogan--> <!-- 为了使中间文字内容与上方社交网站logo有高度距离，需要清除浮动的标签 --> <div class="clear"></div> <div class="m-middle">"I want to give good things to record down,<br>after the recall will be very beautiful."</div> <div class="m-bottom"> <div class="m-com"> <img src="image/03-01.jpg"> <div class="des1">Cool Image</div> <div class="des2">Record The Picture</div> </div> <div class="m-com"> <img src="image/03-02.jpg"> <div class="des1">Great Picture</div> <div class="des2">Record The Picture</div> </div> <div class="m-com"> <img src="image/03-03.jpg"> <div class="des1">Cool Image</div> <div class="des2">Record The Picture</div> </div> </div> <!--避免title的灰色背景跑到上层元素里，故此处添加clear来清除浮动--> <div class="clear"></div> <div class="bottom"> <div class="content"> <div class="title">FROM THE PHOTO ALBUM</div> <div class="pic-content"> <!-- 一个列表项 --> <dl> <!-- 图片 --> <dt><img src="image/04-01.jpg" /></dt> <!-- 描述文字 --> <dd class="word">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="image/04-02.jpg" /></dt> <!-- 描述文字 --> <dd class="word">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> </div> </div> <!--避免title的灰色背景没有覆盖到图文列表项里，故此处添加clear来清除浮动--> <div class="clear"></div> </div> <!-- footer--> <div class="footer"></div> </div> </body> </html>
二、css部分：
*{
padding:0;
margin:0;
}
/* 顶部内容-开始 */
.header{
width:100%;
height:100px;
/*background-color:#eee;*/
}
/* 顶部-logo */
.header img{
width:300px;
height:85px;
padding-top:5px;
}
.header .logo{
float:left;
}
/* 顶部-导航 */
.header .nav{float:right;}
.header .nav ul li{
float:left;
list-style:none;
width:80px;
height:100px;
line-height:100px;
font-size:15px;
font-weight:bolder;
color:#7d7d7d;
}
/*设置顶部导航超链样式：
1、去掉下划线
2、修改超链文字颜色为灰色*/
a{text-decoration:none}
a:link{color:#7d7d7d;}
.header .nav ul{padding-right:10px;}
/* 顶部内容-结束 */
/* banner内容-开始 */
.main .top{
width:100%;
height:600px;
}
.main .top img{
width:100%;
height:600px;
}
/*遮罩*/
.main .toplayer{
position:absolute;
top:100px;
left:0;
background-color:#000;
width:100%;
height:600px;
opacity:0.5;
}
/*标题文字*/
.main .toplayer-top{
width:500px;
height:300px;
position:absolute;
top:400px;
/*负数值为上移*/
margin-top:-150px;
/*相对高一级的素材需要设置为z-index:2*/
z-index:2;
/*算上自身的宽度，再设置margin-right负数值*/
right:50%;
margin-right:-250px;
}
.main .toplayer-top .word{
padding-top:100px;
color:#fff;
font-size:45px;
font-weight:bolder;
text-align:center;
font-family:"微软雅黑";
}
/*按钮*/
.main .toplayer-top button{
width:200px;
height:60px;
margin-top:50px;
color:#fff;
background-color:#f5704f;
font-size:14px;
font-weight:bolder;
text-align:center;
font-family:"微软雅黑";
/*设置按键圆角*/
border-radius:8px;
/*设置按键居中*/
margin-left:150px;
}
/* banner内容-结束 */
/*设置middle参数*/
.main .middle{
width:1000px;
margin:0 auto;
}
.main .middle .m-top .commen{
float:left;
width:33.3%;
/* 与上方的元素空出一段距离 */
padding-top:50px;
/* 将每个logo、名称进行居中 */
text-align:center;
}
.main .middle .m-top .commen .comm{
font-size:20px;
color:#7d7c7f;
font-weight:bold;
/* 设置文字与社交媒体logo中间的高度距离 */
padding-top:20px;
}
.main .middle .m-top .commen img{
width:100px;
height:100px;
}
.main .middle .m-middle{
font-size:22px;
color:#e19796;
font-weight:bold;
/* 设置距离上方元素的高度距离 */
padding-top:50px;
font-style:italic;
text-align:center;
/* 设置距离下方元素的高度距离 */
padding-bottom:50px;
}
/* 为了使中间文字内容与上方社交网站logo有高度距离，需要清除浮动的标签 */
.clear{clear:both;}
/* 单个模块的设置：图片+标题+描述语 */
.main .middle .m-bottom .m-com{
float:left;
padding:10px;
text-align:center;
/* 设置图片下方文字的标题、副标题的字体大小和样式 */
font-weight:bold;
font-size:20px;
}
.main .middle .m-bottom .m-com img{
width:310px;
height:260px;
}
.main .middle .m-bottom .m-com .des1{
color:#7d7d7f;
padding-top:20px;
}
.main .middle .m-bottom .m-com .des2{
color:#bdbdbc;
padding-top:10px;
}
.main .bottom{
background-color: #F9F9F9;
}
.main .bottom .content{
width:1000px;
/* 使内容居中 */
margin:0 auto;
}
.main .bottom .content .title{
text-align:center;
font-size:20px;
font-weight:bold;
color:#7d7c7f;
font-family:"微软雅黑";
padding-top:50px;
}
.main .bottom .content .pic-content dl{
float:left;
/* 设置单个列表项宽度 */
width:470px;
/* 设置每个列表项之间的间隔 */
margin:10px 12px;
}
.main .bottom .content .pic-content dl img{
width: 470px;
height:460px;
}
/* 设置列表项描述文字字体样式 */
.main .bottom .content .pic-content dl .word{
padding-top:20px;
font-size:20px;
font-weight:bold;
color:#7d7c7f;
padding-bottom:50px;
}0
收起
正在回答
1回答
同学，你好。这里bottom部分灰色背景没有100%覆盖是因为bottom的宽度继承了middle的宽度，建议可以将middle的宽度和居中样式去掉，分别给m-top和m-bottom添加。如图：
祝学习愉快！
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星