about区的一些问题

about区的一些问题

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
*{
 margin:0;
 padding:0;
 font-family:"Microsoft YaHei UI";
}
.head{
 width: 100%;
 height:100px;
 background-color:#07cbc9;
 position:fixed;
 z-index: 4;
}
.head img{
 margin-left: 100px;
 padding-top:20px;
}
.head .nav{
 float:right;
}
.head .nav ul{
 padding-right: 100px;
}
.head .nav ul li {
 width: 100px;
 height: 100px;
 line-height: 100px;
 display: inline-block;
 font-weight: bolder;
 color: white;
 font-size: 20px;
 text-align: center;
}
.nav li:hover{
    background-color: #000000;
    color: #ffffff;
}
.banner{
 width:100%;
}
.banner img{
 width:100%;
 height:800px;
}
.banner .veil{
 position:absolute;
 top:100px;
 left:0px;
 background-color: #000;
 width:100%;
 height:700px;
 opacity:0.5;
}
.banner .information{
 position:absolute;
 z-index: 2;
 width:504px;
 height:300px;
 top:400px;
 left:50%;
 margin-left: -250px;
 margin-top:-150px;
}
.banner .information input,textarea{
 background-color: transparent;
 display: block;
    border: 2px solid white;
    font-family: Microsoft YaHei UI;
    width: 500px;
    height: 40px;
    margin-top:30px;
}
.banner .information textarea{
 height:100px;
 overflow: hidden;
}
.banner .information button{
 background-color: transparent;
 width:150px;
 height:40px;
  
    border: 2px solid white;
    font-family: Microsoft YaHei UI;
    margin-left:170px;
    margin-top:30px;
    color: white;
    line-height: 40px;
}
.banner .information input:hover{
 border:2px solid #07cbc9;
} 
.banner .information textarea:hover{
 border:2px solid #07cbc9;
}
.banner .information button:hover{
 background-color: #07cbc9;
 border-color: #07cbc9;
 cursor: pointer;
}
.about .title{
  
 font-size:30px;
 color:#000;
 width: 100%;
 height:80px;
 line-height: 80px;
 text-align:center;
 font-weight: bolder;
}
.about hr{
 border:0;
 background-color: #07cbc9;
 height:2px;
 width: 30px;
}
.about .about-top{
 font-size: 15px;
 color:grey;
 width:100%;
 text-align: center;
 height: 80px;
 padding-top:10px;
}
 .about .about-middle{
  width:800px;
  padding:0 200px 0 200px;
  margin:0 350px;
  height: 450px;
 }
 .about .about-middle img{
  width: 100%;
  height: 450px;
 }
 .about .about-middle .left{
  width:200px;
  height:150px;
  color:#000;
  font-size:30px;
  text-align: center;
  position:relative;
  float: left;
  margin-top:-450px;
   
  left:-200px;
 }
 .about .about-middle .right{
  width: 200px;
  height:400px;
  color:#000;
  font-size:30px;
  line-height: 50px;
  text-align:center;
  position:relative;
  float:right;
  margin-top:-450px;
  right:-200px;
 }
 .about .about-middle .right span{
  font-size: 20px;
 }
  .about .about-middle .right .top{
   width:200px;
   height:130px;
   border:  #07cbc9 solid 2px;
   margin-left:40px;
   padding-top:15px;
  }
   .about .about-middle .right .bottom{
   width:200px;
   height:130px;
   border:  #07cbc9 solid 2px;
    margin-top: 50px;
    margin-left:40px;
    padding-top:15px;
  }
 .about .about-middle .left-bottom{
  width:300px;
  height:250px;
  opacity: 0.5;
  z-index:2 ;
  position: absolute;
  margin-top: -300px;
  margin-left:-200px;
  border:solid grey 1px;
  color:#000;
  font-size: 17px;
  background-color:white;
 }
 .about .about-middle .left-bottom p{
  width:250px;
  height: 130px;
  margin:30px 30px;
  z-index: 3;
  position: absolute;
 }
 .about .about-middle button{
  width:120px;
  height:50px;
  margin-top:-120px;
  margin-left:-170px;
  cursor: pointer;
  background-color: #000;
  color: white;
  border:0px;
  font-weight: bold;
  z-index: 3;
  position: absolute;
 }
  .about .about-middle button:hover{
   background-color:white;
  color: black;
  border:3px solid #000;
  font-weight: bold;
  z-index: 3;
  }
  .about .blank{
   width:100%;
   height:100px;
   border: 1px solid black;
  }
  .about .about-bottom .div1,.div2,.div3,.div4,.div5,.div6,.div7,.div8{
   width:25%;
   height:300px;
  }

老师这是我css部分的代码，

<!DOCTYPE html>
<html>
<head>
 <title>网页布局</title>
 <meta charset="utf-8">
 <link rel="stylesheet" type="text/css" href="exercise.css">
</head>
<body>
 <!--顶部-->
 <div class="head">
  <div class="logo"></div>
  <img src="picture/images/logo.png">
  <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>
 <!--banner区-->
 <div class="banner">
  <img src="picture/images/banner3.jpg">
  <div class="veil"></div>
  <div class="information">
   <form>
    <input type="text" name="uername" maxlength="6" placeholder="your name" style-color="#fff">
    <input type="text" name="userphone" maxlength="10" placeholder="your phone">
    <input type="text" name="useremail" maxlength="10" placeholder="your email">
    <textarea name="area" placeholder="Write Your Comment Here"></textarea>
    <button>SEND MESSAGE</button>
   </form>
  </div>
 </div>
 <!--about区-->
 <div class="about">
  <div class="title">ABOUT</div>
  <hr>
  <div class="about-top">Lorem Ipsum is simply dummy text of the printing and typeseting <br>industry.Lorem Ipsum has been the industry's standard dummy <br>text ever since the 1500s.
  </div>
  <div class="about-middle">
   <div><img src="picture/images/bb3.jpg"></div>
   <div class="left">A WORD<br> ABOUT US</div>
   <div class="right">
    <div class="top">70000<hr><span>Students</span></div>
    <div class="bottom">600<hr><span>Faculty</span></div>
   </div>
   <div class="left-bottom">
    <p class="word"> Praesent dignissim viverra est,sed bibendum ligula congue non.Sed ac nislet felis gravida commodo?Suspendisse edgt ullamcorper ipsum.Suspendisse diam amet.</p>
   </div>
   <button>EXPLORE</button>
  <div class="blank"></div>
  <div class="about-bottom">
   <div class="div1"><img src="picture/images/b1.jpg"></div>
   <div class="div2">
    <div class="word2">
     <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 gallery of type and scrambled it to make a type specimen book.</p>
    </div>
    <button>EXPLORE</button>
   </div>
   <div class="div3"><img src="picture/images/b2.jpg"></div>
   <div class="div4">
    <div class="word4">
     <h3>Computer Lab</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 gallery of type and scrambled it to make a type specimen book.</p>
    </div>
    <button>EXPLORE</button>
   </div>
   <div class="div5">
    <div class="word5">
     <h3>Conference Hall</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 gallery of type and scrambled it to make a type specimen book.</p>
    </div>
    <button>EXPLORE</button>
   </div>
   <div class="div6"><img src="picture/images/b3.jpg"></div>
   <div class="div7">
    <div class="word7">
     <h3>Play Ground</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 gallery of type and scrambled it to make a type specimen book.</p>
    </div>
    <button>EXPLORE</button>
   </div>
   <div class="div8"><img src="picture/images/b4.jpg"></div>
  </div>

  </div>
 </div>
</body>
</html>

1
2
这是我HTML的代码，
请问为什么在about区，我写下面那部分时，我设置了.about .about-bottom 宽度为100%，但网页里面它不是占满了整个屏幕宽度的100%，而是占满了上面about .about-middle 的100%，请问我需要怎么修改。

http://img1.sycdn.imooc.com//climg/5aaa4b910001642b13330613.jpg
慕码人1565653 2018-03-15
源自：项目：网页布局案例   2-10 作业题
13
收起

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

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

2回答
好帮手慕糖 2018-03-16 09:09:26

你好，因为.about-bottom部分的样式，是不全的，而且你说的这种情况.about-bottom部分的html结构调整前，还是调整后呢？调整之后，因为样式不全，无法测出重合，建议：一般情况下，重合是由于上部分的子元素使用绝对定位，或者浮动，导致元素脱离文档流，父级高度塌陷导致的，这里可以检查下代码哦。

祝学习愉快~

0
收起回答
好帮手慕糖 2018-03-15 18:40:52

你好，如下图， .about-bottom这个盒子存放在了 .about-middle盒子下面，是 .about-bottom的父级，所以宽度相对于父级了，这里不要把 .about-bottom放在 .about-middle这个盒子下即可。

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

祝学习愉快~

0
收起回答
  • 提问者 慕码人1565653 #1
    老师你好，我还有个小问题，找了半天都没找到问题在哪，这是关于gallery部分的 <div class="gallery"> <div class="title">GALLERY</div> <hr> <div class="gallery-top">Lorem Ipsum is simply dummy text of the printing and typeseting <br>industry.Lorem Ipsum has been the industry's standard dummy <br>text ever since the 1500s. </div> </div> 这是我html部分的代码 .gallery .title{ font-size:30px; color:#000; width: 100%; height:80px; line-height: 80px; text-align:center; font-weight: bolder; } .gallery hr{ border:0; background-color: #07cbc9; height:2px; width: 30px; } .gallery .gallery-top{ font-size: 15px; color:grey; width:100%; text-align: center; height: 80px; padding-top:10px; }这是我css部分的代码 为什么我的这三部分都重合在一起了
    2018-03-15 19:27:30
问题已解决，确定采纳
还有疑问，暂不采纳

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

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

0 星

相似问题

你好，about区上部分的居中我总是做不好
0 0 4
about区图文混排
7 0 5
about区域的定位在不同显示器下差距很大
43 0 3
2-9作业问题
26 0 4
about区域中间部分布局问题
3 0 7

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

前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36712    个

从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！

了解课程

本课精华内容

问答 作业

为什么我的没有框

5 45

表格的问题

377 41

大家好,body前面有一个红色的小××，麻烦大家帮我看看

378 40

到底是cellspacing还是cellpacing?

0 35

课间活动的表格怎么实现，想了很久也想不出来

60 30

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

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

 帮助反馈 APP下载

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

 公众号

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

在线咨询

领取优惠

免费试听

领取大纲

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