效果图如下：
任务描述
一、语言和环境
1、实现语言
HTML、CSS
2、 环境要求及开发工具
建议 Sublime text
二、网页整体要求：
1、要求页面整洁、美观，与提供的页面效果图、结构基本保持一致；
2、要求HTML代码和CSS代码书写、命名符合规范，在代码中添加必要的注释，方便后期的维护。
3、图片文件、css样式文件要放在单独的文件夹中
三、具体要求：
1、网页分为以下几部分：顶部、banner区、ABOUT区、GALLERY区、脚区，网页内容居中显示。
2、Banner区和ABOUT区的下部分展示块
高度固定，宽度相对于浏览区是100%。
3、字体及颜色表
（1）网页字体： Microsoft YaHei UI
（2）网页中用到的颜色：
评分标准是什么？
规范【4分】
* 图片文件、css样式文件放到单独的文件夹中。
* 文件名、id名、class名命名要规范。
* 代码书写规范、并且添加适量注释，方便后期的维护。
网页整体【8分】
* 网页内容居中显示。
* 每个区域宽度相对于浏览器100%显示。
顶部【10分】
* 与效果图结构基本保持一致；
* 导航、Logo区有链接效果，无下划线；
* 鼠标经过相应导航时，颜色发生变化。
* 导航始终固定在顶部
banner区【24分】
* 与效果图结构基本保持一致；
* Banner图区高度固定 , 图片宽度相对于浏览器100%显示。
*图片上要有半透明的遮罩， 表单内容显示在图像的最上面，且表单要水平居中。
* 表单项有：姓名、邮件、具体内容、提交按钮。表单项设置用户提示信息。
* 鼠标滑过表单各项时，表单项的边框颜色变成#07cbc9。
* 鼠标滑过提交按钮时，按钮没有边框，背景颜色变成#07cbc9。
ABOUT区【40分】
* 与效果图结构基本保持一致；
* 分为上中下三部分，上部分为标题与文字。
* 中间部分从左至右为文字、图片、文字三部分，要求中间部分居中显示。
* 下部分为文字与图片交错显示，要求下部分水平方向平铺浏览器窗口。
* 中间部分左侧的EXPLORE按钮，鼠标移入时背景变为透明的，但是有黑色的边框。
* 鼠标划过下部分的文字区域片中的按钮时，按钮的背景颜色为透明色，边框为黑色
GALLERY区【10分】
* 与效果图结构基本保持一致；
*上部分为文字描述，下部分为图片展示，图片之间有一定距离，文字的颜色和大小适当设置。
页脚区【4分】
* 网页版权信息文本内容垂直水平居中显示。
代码：
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Career Builder</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<div class="header">
<div class="logo">
<img src="images/logo.png" alt="logo">
</div>
<div class="nav">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>GALLERY</li>
<li>FACULTY</li>
<li>EVENTS</li>
<li>CONTACT</li>
</ul>
</div>
</div>
<div class="main">
<div class="home">
<img src="images/banner3.jpg">
</div>
<div class="topLayer"></div>
<div class="input1">
<input type="text" name="" placeholder="your Name">
<input type="text" name="" placeholder="your Phone">
<input type="text" name="" placeholder="your Email">
</div>
<div class="input2">
<input type="text" name="" placeholder="Write Your Comment Here">
</div>
<div class="button">
<button>SENT MESSAGE</button>
</div>
<div class="about">
<div class="abt">ABOUT</div>
<div class="line"></div>
<div class="p1">Lorem Ipsum is simply dummy text of the printing and typesetting<br>industry.Lorem Ipsum has been the industry's standard dummy<br>text ever since the 1500s.</div>
<div class="p2"> A WORD ABOUT US</div>
<div class="about-pic">
<img src="images/bb3.jpg">
</div>
<div class="ret1">
<div class="ret1-p1">70000</div>
<div class="line1"></div>
<div class="ret1-p2">Students</div>
</div>
<div class="ret2">
<div class="ret2-p1">600</div>
<div class="line1"></div>
<div class="ret2-p2">Students</div>
</div>
<div class="ret3">
<div class="ret3-p1">Praesent dignissim viverra est,sed<br>bibendum ligula congue non. Sed ac nisl<br>et felis gravida commodo?Suspendisse<br>eget ullamcorper ipsum.Suspendise<br>diam amet.</div>
<button>EXPLORE</button>
</div>
<div class="ret3-layer"></div>
<div class="clear"></div>
</div>
<div class="gallery">
<table>
<tr>
<td><img src="images/b1.jpg"></td>
<td>
<div class="table-p1">Library</div>
<div class="table-p2">Lorem Ipsum is simply dummy text of the<br>printing and typesetting industry</div>
<div class="table-p3">Lorem Ipsum has been the industry's standard dummy<br>text ever since the 1500s,when an unknow printer took<br>a galley of type and scrambled it to make a type<br>specimen book.</div>
<button>EXPLORE</button>
</td>
<td><img src="images/b2.jpg"></td>
<td>
<div class="table-p1">Computer Lab</div>
<div class="table-p2">Lorem Ipsum is simply dummy text of the<br>printing and typesetting industry</div>
<div class="table-p3">Lorem Ipsum has been the industry's standard dummy<br>text ever since the 1500s,when an unknow printer took<br>a galley of type and scrambled it to make a type<br>specimen book.</div>
<button>EXPLORE</button>
</td>
</tr>
<tr>
<td>
<div class="table-p1">Conference Hall</div>
<div class="table-p2">Lorem Ipsum is simply dummy text of the<br>printing and typesetting industry</div>
<div class="table-p3">Lorem Ipsum has been the industry's standard dummy<br>text ever since the 1500s,when an unknow printer took<br>a galley of type and scrambled it to make a type<br>specimen book.</div>
<button>EXPLORE</button>
</td>
<td><img src="images/b3.jpg"></td>
<td>
<div class="table-p1">Play Ground</div>
<div class="table-p2">Lorem Ipsum is simply dummy text of the<br>printing and typesetting industry</div>
<div class="table-p3">Lorem Ipsum has been the industry's standard dummy<br>text ever since the 1500s,when an unknow printer took<br>a galley of type and scrambled it to make a type<br>specimen book.</div>
<button>EXPLORE</button>
</td>
<td><img src="images/b4.jpg"></td>
</tr>
</table>
</div>
<div class="events">
<div class="eve">GALLERY</div>
<div class="line2"></div>
<div class="events-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.</div>
<div class="events-pic">
<table class="table1">
<tr class="tr1">
<td class="td1">
<img src="images/03-01.jpg">
<div class="dsc">SCIENCE LAB</div>
</td>
<td class="td1">
<img src="images/03-02.jpg">
<div class="dsc">INDOOR STADIUM</div>
</td>
<td class="td1">
<img src="images/03-03.jpg">
<div class="dsc">TRANSPORTATION</div>
</td>
</tr>
<tr class="tr1">
<td class="td1">
<img src="images/03-04.jpg">
<div class="dsc2">KIDS ROOM</div>
</td>
<td class="td1">
<img src="images/03-05.jpg">
<div class="dsc2">MEDITATION CLASSES</div>
</td>
<td class="td1">
<img src="images/03-06.jpg">
<div class="dsc2">KIDS PLAY GROUND</div>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class=footer>
© 2019 feihong.me 粤ICP备13046642号
</div>
</body>
</html>
|
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
| *{
padding: 0;
margin: 0;
}
.header{
width: 100%;
height: 60px;
background-color: #07cbc9;
}
.header img{
width: 300px;
height: 50px;
padding-top: 5px;
padding-left: 100px;
}
.header .logo{
float: left;
}
.header .nav{
float: right;
}
.header .nav ul{
padding-right: 100px;
}
.header .nav ul li{
float: left;
list-style: none;
width: 80px;
height: 60px;
line-height: 55px;
font-size: 15px;
font-weight: bold;
color: #ffffff;
}
.main .home{
width: 100%;
height: 550px;
}
.main .home img{
width: 100%;
height: 550px;
}
.main .topLayer{
position: absolute;
top: 60px;
left: 0;
background-color: #000;
width: 100%;
height: 550px;
opacity: 0.5;
z-index: 1;
}
.main .input1{
position: absolute;
width: 500px;
height: 200px;
top: 400px;
margin-top: -220px;
right: 35%;
z-index: 2;
}
.main .input1 input{
width: 500px;
height: 40px;
margin: 10px;
background-color: transparent;
}
.main .input2{
position: absolute;
width: 500px;
height: 200px;
top: 400px;
margin-top: -20px;
right: 35%;
z-index: 2;
}
.main .input2 input{
width: 500px;
height: 100px;
margin: 10px;
background-color: transparent;
color: #ffffff;
}
.main .button{
position: absolute;
width: 50px;
height: 20px;
top: 400px;
margin-top: 110px;
right: 52%;
z-index: 2;
}
.main .button button{
width: 150px;
height: 40px;
color: #ffffff;
background-color: transparent;
}
.main .about .abt{
font-size: 40px;
font-weight: bold;
text-align: center;
padding-bottom: 10px;
padding-top: 10px;
}
.main .about .line{
position: absolute;
right: 48.5%;
background-color: #07cbc9;
width: 45px;
height: 3px;
}
.main .about .p1{
text-align: center;
color: #7d7d7f;
padding-top: 10px;
}
.main .about .p2{
font-size: 35px;
position: absolute;
left: 13%;
width: 250px;
height: 100px;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
.main .about .about-pic img{
width: 600px;
height: 350px;
position: absolute;
left: 30%;
padding-top: 15px;
}
.main .about .ret1{
border: 1px solid #07cbc9;
width: 150px;
height: 100px;
position: absolute;
right: 17%;
top: 770px;
}
.main .about .ret1 .line1{
background-color: #07cbc9;
width: 45px;
height: 3px;
left: 60px;
position: absolute;
}
.main .about .ret1 .ret1-p1{
text-align: center;
padding-bottom: 10px;
padding-top: 10px;
font-size: 30px;
font-weight: bold;
}
.main .about .ret1 .ret1-p2{
text-align: center;
padding-bottom: 10px;
padding-top: 10px;
}
.main .about .ret2{
border: 1px solid #07cbc9;
width: 150px;
height: 100px;
position: absolute;
right: 17%;
top: 920px;
}
.main .about .ret2 .line1{
background-color: #07cbc9;
width: 45px;
height: 3px;
left: 60px;
position: absolute;
}
.main .about .ret2 .ret2-p1{
text-align: center;
padding-bottom: 10px;
padding-top: 10px;
font-size: 30px;
font-weight: bold;
}
.main .about .ret2 .ret2-p2{
text-align: center;
padding-bottom: 10px;
padding-top: 10px;
}
.main .about .ret3{
width: 350px;
height: 200px;
padding-left: 10px;
padding-top: 10px;
position: absolute;
left: 15%;
top: 880px;
border: 1px solid #7d7d7f;
z-index: 2;
}
.main .about .ret3-layer{
position: absolute;
top: 880px;
left: 15%;
background-color: #fff;
width: 350px;
height: 200px;
opacity: 0.5;
z-index: 1;
padding-left: 10px;
padding-top: 10px;
}
.main .about .ret3 button{
background-color: black;
color: #ffffff;
width: 90px;
height: 40px;
border: none;
text-align: center;
position: absolute;
top: 140px;
}
.main .gallery{
height: 700px;
position: absolute;
top: 1200px;
padding-left:45px;
}
.main .gallery img{
width: 360px;
height: 360px;
}
.main .gallery td{
background-color: #07cbc9;
width: 360px;
height: 360px;
}
.main .gallery .table-p1{
font-size: 35px;
color: #ffffff;
padding-left:4px;
}
.main .gallery .table-p2{
font-size: 17px;
color: #ffffff;
padding-top: 15px;
padding-left:4px;
}
.main .gallery .table-p3{
font-size: 13px;
color: #ffffff;
padding-top: 15px;
padding-left:4px;
}
.main .gallery button{
position: relative;
width: 100px;
height: 40px;
color: #ffffff;
background-color: black;
border: none;
left: 100px;
top: 20px;
}
.main .events .eve{
position: absolute;
top: 2000px;
left: 47%;
font-size: 40px;
font-weight: bold;
}
.main .events .line2{
background-color: #07cbc9;
width: 45px;
height: 3px;
left: 51.5%;
top: 2070px;
position: absolute;
}
.main .events .events-p{
width: 700px;
height: 110px;
left: 30%;
top: 2100px;
position: absolute;
text-align: center;
color: #7d7d7f;
}
.main .events .events-pic{
position: absolute;
top: 2000px;
padding: 12%;
text-align: left;
font-size: 15px;
}
.main .events .events-pic .table1 .tr1 .td1{
padding-bottom: 50px;
padding-left: 20px;
}
.main .events .events-pic .table1 .tr1 .td1 div{
background-color: black;
width: 360px;
height: 40px;
color: white;
}
.main .events .events-pic .table1 .tr1 .td1 .dsc2{
position: absolute;
top: 710px
}
.main .events .events-pic .table1 .tr1 .td1 .dsc{
position: absolute;
top: 410px;
}
.footer{
width: 100%;
height: 70px;
background-color: #07cbc9;
color: #ffffff;
font-size: 15px;
font-family: "微软雅黑";
text-align: center;
line-height: 70px;
position: absolute;
top: 2800px;
}
li:hover{
background-color: black;
}
input:hover{
border: 1px solid #07cbc9;
}
.main .button button:hover{
background-color: #07cbc9;
}
.main .about .ret3 button:hover{
background-color: #fff;
color: #000;
border: 1px solid #000;
}
.main .gallery button:hover{
background-color: #07cbc9;
border: 3px solid #000;
}
|