为什么在gallery区域设置的黑色背景颜色会跑偏位置？

为什么在gallery区域设置的黑色背景颜色会跑偏位置？

问题1：Gallery区域，在一个div里面嵌套两行div 分别第一行是图片第二行是黑色背景颜色，将图片和黑色背景都左边浮动了。为什么图片是正常的从左到右，而黑色背景的位置却跑偏了？怎么才能够让他在图片的下方显示？

问题2：现在搞这个有点懵圈，设置float后想要把内容从左边往右边排列是需要分别设置在div里面所嵌套的每个div还是直接写在外边包裹里面的DIV？

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
365
366
*{
    padding:0;
    margin:0;
 
}
.clear{
    clear:both;
}
.header{
    background: #07cbc9;
    width:100%;
    height:80px;
    position: fixed;    
    top:0;
    z-index:2;
}
.logo{    
    float:left;
    padding-left:80px;
    padding-top:20px;
}
 
.nav{
    float:right;
    padding-right:50px;
    padding-top:0;
    line-height:80px;
    height:80px;
}
.nav ul li{
    display:block;
    padding-right:20px;
    float:right;
    color:white;
}
.banner .bgcolor{
    background:black;
    width:100%;
    height:800px;
    position: absolute;
    opacity: 0.5;
}
.banner img{
    width:100%;
    height:800px;
    padding-top:0;
}
 
.banner{
    width:100%;
    padding-top: 0;
     
}
.banner  input{
    width:500px;
    height:50px;
    border:2px solid #ccc;
    margin:10px;
     
}
.banner input:hover{
    border: 2px solid #07cbc9;
}
.banner textarea:hover{
    border: 2px solid #07cbc9;
}
 
.banner  textarea{
    width:500px;
    height:115px;
    border:2px solid #ccc;
    margin:10px;
}
 
.banner .text{
    padding-top: 0;
     
     
}
.divtext{
    position: absolute;
    height:800px;
    width:100%;
    text-align: center;
    top:241px;
     
     
}
.container{
    padding-top: 80px;
    
}
input,textarea{
    background: transparent;
    color: gray;        
    font-size: 14px;
}
.about{
    width:100%;
    height:800px;
    text-align: center;
     
}
.about img{
    width:568px;
    height:380px;
    position: absolute;
     
     
    z-index:-1;
} 
 
.about .abtext .line{
    margin:10px auto;
}
 
.about .abtext .text3{
    color:gray;
    font-size: 12px;
    margin:55px;
}
.about .abtext .text1 {
    font-weight: bold;
    font-size: 48px;
     
}
.abtext{
    padding-top:50px;
 
}
.about .abtext .line{
    background: #07cbc9;
    width:40px;
    height:2px;
    text-align: center;
}
.about .button{
width:102px;
height:45px;
line-height:45px;
background:black;
color:white;
font-size: 14px;
margin-top: 20px;
position: absolute;
 
 
}
.about .button1{
    margin-left:-800px;
    position: relative;
    z-index:1;
     
}
.about .bk1{
    position: relative;
    background:white;
    opacity: 0.8;
    height:246px;
    top:-200px;
    z-index:-1;
}
.container .about .bottom{
    width: 1200px;
    height:500px;
    margin: 50px auto;
    position: relative;
     
}
.container .about .bottom h3,.middle ,.left,.right{
    float:left;
 
}
.container .about .bottom .right .topbk , .bottombk{
    width:238px;
    height:144px;
    border:1px solid #07cbc9;
    margin-bottom: 30px;
    margin-left: 720px;
}
.container .about .bottom .middle img{
    padding-left:126px;
}
 
.about .bottom .right .topbk .line{
    background: #07cbc9;
    width:40px;
    height:2px;
    margin-left:100px;
    margin-top:15px;
}
.about .bottom .right .topbk .text1{
    font-size:30px;
    font-weight: bold;
    padding-top:20px;
}
.about .bottom .right .topbk .text2{
     
    padding-top:10px;
    font-size:20px;
    font-weight: bold;
     
}
 
.about .bottom .right .bottombk .line{
    background: #07cbc9;
    width:40px;
    height:2px;
    margin-left:100px;
    margin-top:15px;
}
.about .bottom .right .bottombk .text1{
    font-size:30px;
    font-weight: bold;
    padding-top:20px;
}
.about .bottom .right .bottombk .text2{
     
    padding-top:10px;
    font-size:20px;
    font-weight: bold;
}
.container .about .bottom .fly{
    float:left;
    position: absolute;
    top:150px;
    left:50px;
    z-index: 1;
    text-align: left;
    color:black;
}
 
 
.container .about .bottom .fly .bgc{
    background: white;
    opacity: 0.5;
    width: 370px;
    height: 246px;
    position: absolute;
    top:-40px;
    left:-40px;
    z-index: -1;
    border:1px solid gray;
}
 
.container .abouttwo{
    width: 100%;
    height:800px;
     
}
.container .abouttwo .line1 .bgc{
    width: 25%;
    height: 400px;
    background: #07cbc9;
    float:left;
    position: relative;
}
 
.container .abouttwo .line1>div{
    position: relative;
    width:25%;
    height:400px;
    float: left;
}
.container .abouttwo .line1 img {
    float: left;
    width:100%;
    height: 100%;
    position: relative;
}
.sj:before{
    content: "";
    position: absolute;
    width:0;
    height:0;
    right:0;
    border-top:15px solid transparent;
    border-right:25px solid #07cbc9;
    border-bottom:15px solid transparent;
    top:185px;
    z-index: 999;
}
.sj2:before{
    content: "";
    position: absolute;
    width:0;
    height:0;
    left:0;
    border-top:15px solid transparent;
    border-left:25px solid #07cbc9;
    border-bottom:15px solid transparent;
    top:185px;
    z-index: 999;
}
.container .abouttwo .line1 , .line2{
    width: 100%;
    height:350px;
     
}
 
.container .abouttwo .line1 .bgc h3, .container .abouttwo .line1 .bgc p{
    color: white;
    padding:15px 100px;
}
.line1 .bgc h1{
    padding-top:40px;
    padding-left:100px;
    color: white;
}
.container .abouttwo .line1 .bgc .button{
        width:102px;
        height:45px;
        line-height:45px;
        background:black;
        color:white;
        font-size: 14px;
        margin-top: 25px;
        margin-left: 40%;
        position: absolute;
}
.container .gallery{
    width:100%;
    height:1000px;
    text-align: center;
    padding-top:50px;
}
.container .gallery h1{
    font-size: 48px;
}
.container .gallery .line {
    height:2px;
    width:30px;
    background: #07cbc9;
    margin:20px auto;
}
.container .gallery .toptext p{
    line-height:30px;
    color:gray;
}
.container .gallery .lineall .bgc{
    width:360px;
    height:64px;
    background: black;
    margin: 0 auto;
    color:white;
    float:left;
     
}
.container .gallery .img1 img,.img2 img{
    width:360px;
    height:240px;
    margin:0 auto;
}
.container .gallery .lineall .line1 div,.container .gallery .lineall .line3 div{
    float:left;
    margin:10px 10px;
     
    
    
}
.container .gallery .lineall .line1 , .line3 {
    padding-left:50%;
    margin-left:-555px;
    
     
}
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="header">
    <div class="logo">
    <img src="./images/logo.png">
    </div>
     
    <div class="nav">
        <ul>
            <a href="#"><li>HOME</li></a>
           <a href="#"><li>ABOUT</li></a>
           <a href="#"><li>GALLERY</li></a>
           <a href="#"><li>FACULTY</li></a>
           <a href="#"><li>EVENTS</li></a>
           <a href="#"><li>CONTACT</li></a>
        </ul>
    </div>
</div>
<div class="clear"></div>
<!-- Container区域 -->
<div class="container">
    <!-- bannert区域 -->
<div class="banner">
        <div class="bgcolor"></div>
        <img src="./images/banner3.jpg">
        <div class="divtext">
                <form>
                        <input type="text" name="name"  placeholder="your Name"/>
                        <br>
                        <input type="text" name="name"  placeholder="your Phone"/>
                        <br>
                        <input type="text" name="name"  placeholder="your Email"/>
                        <br>
                        <textarea name="write"  placeholder="Wirte Your Comment Here"></textarea>
                        <br>
                        <input type="submit" name="button" value=" SEND MESSAGE"/>
                    </form>
                </div>
        </div>
        <div class="clear"></div>
     <!-- about区域 -->
        <div class="about">
         <!-- 文本区域上 -->
        <div class="abtext">
        <div class="text1">ABOUT</div>
        <div class="line"></div>
        <div class="text2">Lorem ipsum is simply dummpy text of the printing and typesetting <br>industy. Lorem Ipsum has been the industry's standard dummy<br> text ever since the 1500s.</div>    
        </div>
         <!-- 文本区域下-->
         <div class="bottom">
 
            <div class="left">
                <h1>A WORD<br> ABOUT US</h1>
            </div>
             
            <div class="middle">
                <img src="./images/bb3.jpg">
            </div>
 
            <div class="right">
                <div class="topbk">
                    <div class="text1">70000</div>
                    <div class="line"></div>
                    <div class="text2">students</div>
                </div>
 
                <div class="bottombk">
                        <div class="text1">600</div>
                        <div class="line"></div>
                        <div class="text2">faculty</div>
                </div>              
            </div>
 
            <div class="fly">
                <P>praesent dignissim viverra est,sed<br> bibendum ligula congue non.sed ac nisl<br> et felis gravida commodo?Suspendisse<br> eget ullamcoper ipsum.suspendisse<br> diam amet.</P>
                <button class="button">EXPLORE</button>
                <div class="bgc"></div>
                </div>
        </div>
        <!-- about区域 -->
    </div>
    <div class="abouttwo">
        <!-- line1区域 -->
        <div class="line1">
            <div><img src="./images/b1.jpg">
                <div class="sj"></div>
            </div>
            <div class="bgc">
                <h1>Library</h1>
                             <h3>
                                Lorem Ipsum is simply dummy text of the printing and typesettingindustry
                             </h3>
                             <p>
                                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 class="button">EXPLORE</button>
            </div>
            <div><img src="./images/b2.jpg">
                <div class="sj"></div>
            </div>
            <div class="bgc">
                <h1>Computer Lab</h1>
 
                            <h3>
                                Lorem Ipsum is simply dummy text of the printing and typesettingindustry
                            </h3>
                            <p>
                                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 class="button">EXPLORE</button>
            </div>
        </div>
 
       <!-- line2区域 -->
        <div class="line2">
                <div class="line1">                      
                        <div class="bgc">
                            <h1>Conference Hall</h1>
                            <h3>
                             Lorem Ipsum is simply dummy text of the printing and typesettingindustry
                             </h3>
                             <p>
                             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 class="button">EXPLORE</button>
                        </div>
                        <div><img src="./images/b3.jpg">
                            <div class="sj2"></div>
                        </div>                       
                        <div class="bgc">
                            <h1>Play Ground</h1>
                            <h3>
                                Lorem Ipsum is simply dummy text of the printing and typesettingindustry
                            </h3>
                            <p>
                                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 class="button">EXPLORE</button>
                        </div>
                        <div><img src="./images/b4.jpg">
                            <div class="sj2"></div>
                        </div>
                    </div>
        </div>
        <!-- abouttwo区域 -->
    </div>
    <div class="gallery">
        <!-- Gallery区域 -->
        <div class="top">
            <h1>Gallery</h1>
        </div>
        <div class="line"></div>
        <div class="toptext">
            <p> Lorem Ipsum is simply dummy text of the printing and typesetting <br>industry Lorem Ipsum has been the industry's standard dummy text<br> ever since the 1500s
            </p>
        </div>
        <div class="lineall">
            <!-- line all 区域 -->
        <div class="line1">
             <!-- line 1 区域 -->
                <div><img src="./images/03-01.jpg"></div>
                <div><img src="./images/03-02.jpg"></div>
                <div><img src="./images/03-03.jpg"></div> 
        </div>
        <div class="line2">
                <div class="bgc">1</div>
                <div class="bgc">2</div>
                <div class="bgc">3</div>
               </div>
 
        <div class="line3">
             <!-- line 2 区域 -->
            <div><img src="./images/03-04.jpg"></div>
            <div><img src="./images/03-05.jpg"></div> 
            <div><img src="./images/03-06.jpg"></div> 
         </div>
 
         <div class="line4">
                <div class="bgc">4</div>
                <div class="bgc">5</div>
                <div class="bgc">6</div>
               </div>
 
          <!-- line all 区域 -->
         </div> 
         
        <!-- Gallery区域 -->
    </div>
<!-- Container区域 -->
</div>
</body>
</html>
陈立天 2019-12-01
源自：项目：网页布局案例   2-10 作业题
17
收起

正在回答

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

2回答
好帮手慕粉 回答被采纳获得+3积分 2019-12-02 15:35:42

同学你好，关于同学的问题解答如下：

1、 .line1>div代表的是选择类名为line1的下面的所有直接子元素div，是子代选择器：

http://img1.sycdn.imooc.com//climg/5de4bd4a09db355107280508.jpg

2、把>换成.即.line1 .div代表的是选择line1类下的所有类名为div的元素，在这是选择不到任何元素的，因为同学没有类名为div的元素。

3、中间没有符号的即.line div代表的是选择类名为line1下的所有div元素（选择的是“子子孙孙”）：

http://img1.sycdn.imooc.com//climg/5de4be1c097424ec07490518.jpg

建议同学再回顾下选择器部分的知识点：https://class.imooc.com/lesson/752#mid=18702

如果我的回答帮助到了你，欢迎采纳，祝学习愉快~

0
收起回答
好帮手慕粉 2019-12-02 10:35:35

同学你好，关于同学的问题解答如下：

1、为什么在gallery区域设置的黑色背景颜色会跑偏位置？我们先看下同学的网页布局：

http://img1.sycdn.imooc.com//climg/5de472950986c46a13630169.jpg

line1的高度为0，不占位置，所以就导致line2整体上移，跑到了line1的上边:

http://img1.sycdn.imooc.com//climg/5de473a40970433d19050203.jpg

所以黑色背景的位置跑偏了。同学可以给line1清除浮动，例如添加overflow:hidden。

2、解决：不建议同学将图片和下方的背景色分开写，这样还要分别设置他们的间距，比较麻烦，建议同学将图片和黑色背景放到一个div里面。修改参考（老师以第一行为例）：

http://img1.sycdn.imooc.com//climg/5de4772b099e620d17340921.jpg

第二行的结构跟这个是一样的，同学可以参考着实现一下。

3、同学之所以设置float以后没有从左往右排列是因为没有清除浮动，因为没有图片盒子都设置了浮动不占位置，所以就会影响后面的布局。同学以后在设置了浮动以后及时清除浮动就可以了。

4、同学别的部分实现的与作业要求不太一致，比如网页头部鼠标移入导航项变背景色、所有的explore按钮鼠标移入背景变透明等，建议同学按照作业要求来。

如果修改的时候遇到什么问题，建议同学新建一个问答进行提问，老师可以更快的看到同学的问题。

如果我的回答帮助到了你，欢迎采纳，祝学习愉快~

0
收起回答
  • 提问者 陈立天 #1
    .container .gallery .lineall .line1>div{ width:360px; margin: 20px; float: left; } 这个>的用法我现在还不是很明白 这里的>我把他 换成了. 和没有符号的 是三种不同的效果。这个黑色背景都出现在了不一样的位置，这是为什么呢？
    2019-12-02 13:00:37
问题已解决，确定采纳
还有疑问，暂不采纳

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

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

0 星

相似问题

背景图片和背景颜色同时设置时，背景图片会覆盖背景颜色
0 0 3
为什么我设置的黑色不是纯黑色，还有这个字体颜色设置了也是模糊的。
0 0 3
为什么感觉这进度条和黑色的背景颜色合为一体了，不能单独分开么
0 4 9
1. 那三个图标怎么才能一直在上方 2. subscribe区域的placeholder的颜色怎么改
21 0 7
MAC电脑Dock颜色及xcode背景色
11 0 3

登录后可查看更多问答，登录/注册

1.前端零基础入门
  • 参与学习           人
  • 提交作业       8403    份
  • 解答问题       40143    个

本阶段为你揭开日常所见网页的神秘面纱，炫酷的动效并不难得，带你从基础知识到静态网页布局，再到用JS实现动态网页开发，轻松迈入前端开发的大门。

了解课程

本课精华内容

问答 作业

关于浏览器兼容性代码疑问

16 1

请老师检查

65 3

没有明白，为什么height是90，padding-top为60。它就居中了？

26 3

关于三种常用的清除浮动方法的优劣对比，请老师简单讲一讲

18 1

进击的小白们加油。分享一下我做最后这个项目作业的感受

188 1

查看更多本课问答
请稍等 ...
微信客服

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

 帮助反馈 APP下载

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

 公众号

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

在线咨询

领取优惠

免费试听

领取大纲

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