bottom部分灰色背景并没有100%覆盖

老师，您好。

我跟着教程视频里的指示来编写代码，但是发现前端预览效果图里，bottom部分灰色背景并没有进行100%宽度覆盖。

请老师帮我检查一下，是代码哪块部分出现了错误？

感谢，辛苦。

前端效果图：

代码如下：

一、html部分：

100

101

102

103

104

105

106

107

108

<!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 &gt;</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部分：

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

*{
    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;
}

Amanda_Ding 2019-02-27

源自：项目：网页布局案例 2-8 主体部分的底部

收起

1回答

Steve007 回答被采纳获得+3积分 2019-02-27 15:00:16

同学，你好。这里bottom部分灰色背景没有100%覆盖是因为bottom的宽度继承了middle的宽度，建议可以将middle的宽度和居中样式去掉，分别给m-top和m-bottom添加。如图：

祝学习愉快！

收起回答

Amanda_Ding 提问者 #1

感谢您的回答，正确效果已实现。但是我有一个地方不明白：因为bottom部分灰色背景的设置是【.main .bottom】，并不是【.main .middle】，同时bottom和middle是两个不同的命名，请问bottom怎么会继承middle的宽度设置呢？

2019-02-27 18:25:26
Steve007 回复提问者 Amanda_Ding #2

因为.bottom是.middle的子元素。.middle设置的宽度是1000px，.bottom在不设置宽度的情况下是会继承它的父元素.middle的宽度的。

2019-02-27 18:37:23