麻烦老师看下两块代码有没有错误和需要修改的地方 谢谢

麻烦老师看下两块代码有没有错误和需要修改的地方 谢谢

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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
<!-- 网页的头部包含logo和导航条 -->
    <header>
        <div class="header-top">
            <!-- 网页的logo -->
            <div class="logo">
                <h1>Gareer Builder</h1>
            </div>
            <!-- 网页的导航条 -->
            <nav>
                <ul>
                    <li><a href=""> HOME</a></li>
                    <li><a href=""> ABOUT</a></li>
                    <li><a href=""> GALLERY</a></li>
                    <li><a href=""> FACULTY</a></li>
                    <li><a href=""> EVENTS</a></li>
                    <li><a href=""> CONTACT</a></li>
                </ul>
            </nav>
        </div>  
    </header>
    <!-- banner区域 -->
    <section class="banner">
        <!-- 图片 -->
        <img class="banner-img" src="images/banner3.jpg" alt="">
        <!-- 遮罩层 -->
        <div class="hidden"></div>
        <div class="center">
            <!-- 表单区域 -->
            <form action="">
                <input type="text" placeholder="your Name">
                <input type="text" placeholder="your Phone">
                <input type="email" placeholder="your Email">
                <textarea name="" id="" cols="50" rows="5" placeholder="Write your Comment Here"></textarea>
                <input type="submit" value="SEND MESSAGE">
            </form>
        </div>
    </section>
    <!-- 内容区域 -->
    <section class="content">
        <!-- about区域 分为上下部分-->
        <div class="about">
            <!-- about上半部分 -->
            <div class="about-top">
                <h2>About</h2>
                <div class="line"></div>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
            </div>
            <!-- about下半部分 -->
            <div class="about-bottom">
                <!-- 左边部分 -->
                <div class="left">
                    <h2>A WORD ABOUT US</h2>
                    <!-- 左边内容区域 -->
                    <div class="word">
                        <p>Praesent dignissim viverra est, sed bibendum ligula congue non. Sed ac nisl et felis gravida commodo? Suspendisse eget ullamcorper ipsum. Suspendisse diam amet.</p>
                        <button><a href="">EXPLORE</a></button>
                    </div>
                </div>
                <!-- 图片区域 -->
                <img class="pics" src="images/bb3.jpg" alt="">
                <!-- 右边区域 学生和天赋-->
                <div class="students-and-faculty">
                    <!-- 学生区域 -->
                    <div class="students">
                        <h3>70000</h3>
                        <div class="line"></div>
                        <h4>Students</h4>
                    </div>
                    <!-- 天赋区域 -->
                    <div class="faculty">
                        <h3>600</h3>
                        <div class="line"></div>
                        <h4>Faculty</h4>
                    </div>
                </div>
            </div>
        </div>          
        <!-- 图文混排区域 ul来分为8个盒子-->
        <div class="img-and-word">
            <ul>
                <li>
                    <a class="img" href=""><img src="images/b1.jpg" alt=""></a>
                </li>
                <li>
                    <div class="word">
                        <h3>Library</h3>
                        <p class="p1">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
                        <p class="p2">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                        <button><a href="">EXPLORE</a></button>
                    </div>
                </li>
                <li>
                    <a class="img" href=""><img src="images/b2.jpg" alt=""></a>
                </li>
                <li>
                    <div class="word">
                        <h3>Library</h3>
                        <p class="p1">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
                        <p class="p2">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                        <button><a href="">EXPLORE</a></button>
                    </div>
                </li>
                <li>
                    <div class="word">
                        <h3>Library</h3>
                        <p class="p1">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
                        <p class="p2">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                        <button><a href="">EXPLORE</a></button>
                    </div>
                </li>
                <li>
                    <a class="img" href=""><img src="images/b3.jpg" alt=""></a>
                </li>
                <li>
                    <div class="word">
                        <h3>Library</h3>
                        <p class="p1">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
                        <p class="p2">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                        <button><a href="">EXPLORE</a></button>
                    </div>
                </li>
                <li>
                    <a class="img" href=""><img src="images/b3.jpg" alt=""></a>
                </li>
            </ul>
        </div>
        <!--gallery区域 分为上下两部分 分为6个列表标签 定义列表  -->
        <div class="gallery">
            <!--  gallery上半部分 -->
            <div class="gallery-top">
                <h2>GALLERY</h2>
                <div class="line"></div>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
            </div>
            <!-- gallery 下半部分 -->
            <div class="gallery-bottom">
                <a href="">
                    <dl>
                        <dt><img src="images/03-01.jpg" alt=""></dt>
                        <dd>Science Lab</dd>
                    </dl>
                </a>
                <a href="">
                    <dl>
                        <dt><img src="images/03-02.jpg" alt=""></dt>
                        <dd>Indoor Stadium</dd>
                    </dl>
                </a>
                <a href="">
                    <dl>
                        <dt><img src="images/03-03.jpg" alt=""></dt>
                        <dd>Transportation</dd>
                    </dl>
                </a>
                <a href="">
                    <dl>
                        <dt><img src="images/03-04.jpg" alt=""></dt>
                        <dd>Kids Room</dd>
                    </dl>
                </a>
                <a href="">
                    <dl>
                        <dt><img src="images/03-05.jpg" alt=""></dt>
                        <dd>Meditation Classes</dd>
                    </dl>
                </a>
                <a href="">
                    <dl>
                        <dt><img src="images/03-06.jpg" alt=""></dt>
                        <dd>Kids Play Ground</dd>
                    </dl>
                </a>
                
            </div>
        </div>
    </section>
    <!-- 页脚区域 -->
    <footer>
        <p>&copy;2016 imooc.com 京ICP备13046642号</p>
    </footer>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
*{
    margin0;
    padding0;
}
/* 去掉ul和ol的小圆点 */
ul,ol{
    list-stylenone;
}
/* 去掉超级链接的下划线 */
a{
    text-decorationnone;
}
/* 头部 */
header{
    /* 不设置宽度 自动撑满 */
    background-color#07cbc9;
}
header .header-top{
    width1200px;
    height80px;
    margin0 auto;
}
header .header-top .logo{
    floatleft;
    /* 不设置宽度 自动撑满 */
    text-aligncenter;
    /* 直接设置文字垂直居中 */
    line-height80px;
    color#fff;
}
/* 导航条 */
header .header-top nav{
    floatright;
}
header .header-top nav ul li{
    floatleft;
    height80px;
    margin-right20px;
    text-aligncenter;
    line-height80px;
}
header .header-top nav ul li:last-child{
    margin-right0;
}
header .header-top nav ul li a{
    displayblock;
    color#fff;
    padding0 10px;
}
header .header-top nav ul li a:hover{
    background-color: gold;
    color#000;
}
/* banner区域 */
section.banner{
    /* 宽度100% */
    width100%;
    positionrelative;
}
section.banner img.banner-img{
    /* 宽度100% */
    width100%;
    height600px;
}
section.banner .hidden{
    width100%;
    height600px;
    background-color: rgba(0000.5);
    positionabsolute;
    top0;
    left0;
}
section.banner .center{
    width520px;
    height360px;
    positionabsolute;
    top50%;
    margin-top-180px;
    left50%;
    margin-left-260px;
  
}
section.banner .center form{
    width504px;
    text-aligncenter;
    margin0 auto;  
}
section.banner .center form input{
    width492px;
    height38px;
    border1px solid #808080;
    /* 去除边框背景 */
    backgroundnone;
    margin-bottom20px;
    color#808080;
    /* 去除鼠标点击时的外围线 */
    outlinenone;
    padding-left10px;
}
section.banner .center form textarea{
    width494px;
    height110px;
    margin-bottom20px;
    /* 去除背景 */
    backgroundnone;
    /* 去除鼠标点击时外围线 */
    outlinenone;
    color#808080;
    padding-left10px;
}
section.banner .center form input:nth-of-type(4){
    width200px;
    height40px;
    margin0 auto;
}
/* 内容部分 about区域 */
.content{
    padding-top:30px;
}
.content .about{
    /* 设置宽度 高度让内容撑开 居中显示 */
    width1200px;
    margin0 auto;
}
.content .about .about-top{
    text-aligncenter;
}
.content .about .about-top .line{
    width60px;
    height3px;
    background-color:#07cbc9;
    margin10px auto;
}
.content .about .about-top h2{
    font-size32px;
}
.content .about .about-top p{
    colorgray;
    font-size14px;
    width450px;
    margin0 auto;
}
/* 下半部分 */
.content .about .about-bottom{
    width1200px;
    height434px;
    /* 缝隙用padding挤 */
    padding-top30px;
    positionrelative;
    overflowhidden;
}
.content .about .about-bottom .left{
    floatleft;
}
.content .about .about-bottom .left h2{
    font-size32px;
    width200px;
}
.content .about .about-bottom .left .word{
    /* 宽高不设置 让内容撑开 */
    /* 需要压盖在图片上面 设置绝对定位 */
    background-color: rgba(255,255,255,.5);
    border1px solid gray;
    positionabsolute;
    left0;
    top130px;
}
.content .about .about-bottom .left .word p{
    width300px;
    padding20px;
    font-size18px;
}
.content .about .about-bottom .left .word button{
    box-sizing: border-box;
    width140px;
    height40px;
    /* 去掉边框 */
    border:none;
    margin20px 20px;
}
.content .about .about-bottom .left .word button a{
    displayblock;
    width140px;
    height40px;
    background-color#000;
    color#fff;
    text-aligncenter;
    line-height40px;
}
.content .about .about-bottom img.pics{
    /* 左浮动 */
    floatleft;
    width650px;
    height435px;
    margin-left70px;
}
.content .about .about-bottom .students-and-faculty{
    /* 左浮动 */
    floatleft;
    text-aligncenter;
    margin-left18px;
}
.content .about .about-bottom .students,.faculty{
    /* 不设置高度让内容撑开 */
    width260px;
    border1px solid #07cbc9;
}
.content .about .about-bottom .students h3,.faculty h3{
    font-size28px;
    font-weightbold;
    padding-top40px;
}
.content .about .about-bottom .students .line,.faculty .line{
    width60px;
    height3px;
    background-color#07cbc9;
    margin10px auto;
}
.content .about .about-bottom .students h4,.faculty h4{
    padding-bottom40px;
}
.content .about .about-bottom .students{
    margin-bottom30px;
}
/* 图文混排区域 */
.content .img-and-word{
    width100%;
    height760px;
    background-color: orange;
    margin-top20px;
}
.content .img-and-word ul {
    overflowhidden;
}
.content .img-and-word ul li{
    floatleft;
    width25%;
    height380px;
}
.content .img-and-word ul li a.img{
    /* 转块 */
    displayblock;
    /* 宽度自适应 */
    height380px;
}
.content .img-and-word ul li img{
    /* 宽度自适应 */
    height380px;
    /* img是行内元素 转块消除间隙 */
    displayblock;
}
.content .img-and-word ul li .word{
    height380px;
    background-color#07cbc9;
}
.content .img-and-word ul li .word h3{
    padding:20px 20px 30px;
    padding-right0;
    font-size24px;
    color#fff;
}
.content .img-and-word ul li .word p{
    padding-left20px;
}
.content .img-and-word ul li .word p.p1{
    color#fff;
    font-size16px;
    padding-bottom20px;
}
.content .img-and-word ul li .word p.p2{
    colorgray;
    font-size14px;
    padding-bottom30px;
}
.content .img-and-word ul li .word button{
    width138px;
    height40px;
    /* 转块 让其水平居中 */
    display:block;
    margin0 auto;
    background-color#000;
    /* 去掉边框线 */
    bordernone;
}
.content .img-and-word ul li .word button a{
    color#fff;
    /* 转块 让按钮点击范围更大 */
    displayblock;
    width138px;
    height40px;
    text-aligncenter;
    line-height40px;
}
.content .img-and-word ul li .word button a:hover{
    background-color#fff;
    color#000;
}
/* gallery区域 */
.content .gallery{
    width1200px;
    margin0 auto;
    padding-top20px;
}
.content .gallery .gallery-top {
    text-aligncenter;
}
.content .gallery .gallery-top h2{
    font-size32px;
}
.content .gallery .gallery-top .line{
    width60px;
    height3px;
    background-color#07cbc9;
    margin10px auto;
}
.content .gallery .gallery-top p{
    colorgray;
    font-size14px;
    width450px;
    margin0 auto;
}
.content .gallery .gallery-bottom{
    width1160px;
    height613px;
    padding20px;
    /* 清除浮动 */
    overflowhidden;
}
.content .gallery .gallery-bottom a{
    floatleft;
    width360px;
    height290px;
    margin-right40px;
    margin-bottom30px;
    positionrelative;
}
.content .gallery .gallery-bottom a:nth-child(3n+3){
    margin-right0;
}
.content .gallery .gallery-bottom a dl dt img{
    displayblock;
    width360px;
    height290px;
}
.content .gallery .gallery-bottom a dl dd{
    /* 压盖 绝对定位 */
    positionabsolute;
    bottom0;
    left:0;
    width340px;
    height50px;
    background-color: rgba(0,0,0,.7);
    color#fff;
    padding-left20px;
    line-height50px;
}
/* fooer区域 */
footer{
    width100%;
    height80px;
    background-color#07cbc9;
    text-aligncenter;
    line-height80px;
}

.content .gallery .gallery-bottom{

    width: 1160px;

    height: 613px;

    padding: 20px;

    /* 清除浮动 */

    overflow: hidden;

}

.content .gallery .gallery-bottom a{

    float: left;

    width: 360px;

    height: 290px;

    margin-right: 40px;

    margin-bottom: 30px;

    position: relative;

}

这里的设置了浮动 后面页脚部分追上来了 清除浮动是应该写在gallery还是gallery-bottom处

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕久久 2021-11-20 09:49:01

同学你好,代码可做如下优化:

1、div.gallery-bottom的高度由内容撑开就行,不用设置固定值:

https://img1.sycdn.imooc.com//climg/6198523b0947f28c08200222.jpg

2、图片下的文字(dd标签),正常布局即可,不用覆盖在图片上:

https://img1.sycdn.imooc.com//climg/61985298097a5eef08970719.jpg

3、如下结构建议用dl标签包裹a标签,即块级元素包裹行内元素,这样更规范:

https://img1.sycdn.imooc.com//climg/619851b309a5edd208470246.jpg

同学可以尝试调整一下结构和样式。

问题解答如下:

1、将overflow: hidden;设置在gallery-bottom上后,可以起到清除浮动的作用,可以参考之前的修改。

2、overflow: hidden;也可以设置在gallery上,也能实现效果:

https://img1.sycdn.imooc.com//climg/619853a209f746dc04540204.jpg

https://img1.sycdn.imooc.com//climg/619853ab0917112006030219.jpg

https://img1.sycdn.imooc.com//climg/619853d20900da8016470938.jpg

祝学习愉快!

  • 提问者 夜的解忧铺 #1

    https://img1.sycdn.imooc.com//climg/61989aa709af04e207720251.jpg

    好帮手慕然然当时给的回复是可以a标签包裹住dl dl是直接嵌套的dt和dd的  

    那是否可以这样写  

    <dt><a href=””><img></a></dt>

    <dd><a href=””>文字</a></dd>


    修改后的gallery区域

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    <!-- gallery 下半部分 -->
                <div class="gallery-bottom">
                        <dl>
                            <dt><a href=""><img src="images/03-01.jpg" alt=""></a></dt>
                            <dd><a href="">Science Lab</a></dd>
                        </dl>
                        <dl>
                            <dt><a href=""><img src="images/03-02.jpg" alt=""></a></dt>
                            <dd><a href="">Indoor Stadium</a></dd>
                        </dl>
                        <dl>
                            <dt><a href=""><img src="images/03-03.jpg" alt=""></a></dt>
                            <dd><a href="">Transportation</a></dd>
                        </dl>
                        <dl>
                            <dt><a href=""><img src="images/03-04.jpg" alt=""></a></dt>
                            <dd><a href="">Kids Room</a></dd>
                        </dl>
                        <dl>
                            <dt><a href=""><img src="images/03-05.jpg" alt=""></a></dt>
                            <dd><a href="">Meditation Classes</a></dd>
                        </dl>
                        <dl>
                            <dt><a href=""><img src="images/03-06.jpg" alt=""></a></dt>
                            <dd><a href="">Kids Play Ground</a></dd>
                        </dl>  
                </div>


    /* gallery区域 */

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    .content .gallery{
        width1200px;
        margin0 auto;
        padding-top20px;
    }
    .content .gallery .gallery-top {
        text-aligncenter;
    }
    .content .gallery .gallery-top h2{
        font-size32px;
    }
    .content .gallery .gallery-top .line{
        width60px;
        height3px;
        background-color#07cbc9;
        margin10px auto;
    }
    .content .gallery .gallery-top p{
        colorgray;
        font-size14px;
        width450px;
        margin0 auto;
    }
    .content .gallery .gallery-bottom{
        width1160px;
        /* 高度由内容撑开 清除浮动就可以让它有高度 */
        padding20px;
        /* 清除浮动 */
        overflowhidden;
    }
    .content .gallery .gallery-bottom dl{
        floatleft;
        width360px;
        /* 高度自动撑开 */
        margin-right40px;
        margin-bottom30px;
    }
    .content .gallery .gallery-bottom dl:nth-child(3n+3){
        margin-right0;
    }
    .content .gallery .gallery-bottom dl dt img{
        /* 消除图片的间隙 */
        displayblock;
    }
    .content .gallery .gallery-bottom dl dd a{
        displayblock;
        height50px;
        background-color#000;
        padding-left20px;
        line-height50px;
        color#fff;
    }

    ------------------------------------------------------

    .content .gallery .gallery-bottom dl dd a{

        displayblock;

        height50px;

        background-color#000;

        padding-left20px;

        line-height50px;

        color#fff;

    }------------这里考虑到要给文字设置颜色 由于a标签包裹的文字 就将样式都写到a标签了 

    https://img1.sycdn.imooc.com//climg/6198a4ab0931da6914380755.jpg

    原本是.content .gallery .gallery-bottom dl dd 的  但是查看了dd标签的宽高是和a标签的一样的 这是为什么  上面写到a标签的样式写法可行吗

    2021-11-20 15:35:54
  • 好帮手慕久久 回复 提问者 夜的解忧铺 #2

    同学你好,解答如下:

    1、修改后的结构和样式是正确的。a标签包裹dl并不是错的,只是布局时,建议“块级元素包裹行内元素”,所以老师只是给你提了个优化建议。同学调整的结构是对的,和老师的意思一样。如果觉得如下写法麻烦:

    https://img1.sycdn.imooc.com//climg/6198abd3098d0e0508350129.jpg

    可以不使用dl、dd、dt,换成div、p等标签,从而只需一个a标签就行。布局非常灵活,不是固定的。

    2、如下这点,和老师的处理方式一样:

    https://img1.sycdn.imooc.com//climg/6198ac2209a74d8807770244.jpg

    3、将样式设置在.content .gallery .gallery-bottom dl dd 后,老师这里效果如下:

    https://img1.sycdn.imooc.com//climg/6198ac590973a98808370262.jpg

    https://img1.sycdn.imooc.com//climg/6198ac5f097409ae05250130.jpg

    a标签的高度与dd不一样:

    https://img1.sycdn.imooc.com//climg/6198ac7309f8e97209500559.jpg

    同学再测试、检查一下。

    如果将样式设置在 .content .gallery .gallery-bottom dl dd a上,则a和dd高度一样,因为a是块级元素,可以撑开父元素dd:

    https://img1.sycdn.imooc.com//climg/6198acc209526aec10130674.jpg

    祝学习愉快!

    2021-11-20 16:11:10
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师
插入代码