HTML实现学习网站首页_html做学校首页网页代码

作者：我家小花儿 | 2024-05-01 07:05:04

踩

html做学校首页网页代码

项目访问
在这里插入图片描述
reset.css

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
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

base.css

/* 该选择器 指代的就是html标签 */
:root {
    /* 设置项目默认的主题颜色 */
    --theme-blue: rgb(74, 195, 246);
    --theme-gray: rgb(167,167,167);

    /* 使用 " var() "该函数可以插入自定义的属性值 */
}
1
2
3
4
5
6
7
8

header.css

.clearfix::before,
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

.clearfix {
    zoom: 1;
}

a {
    color: #000;
    text-decoration: none;
}

.edu_header {
    width: 1200px;
    margin: 0 auto;
    /* height: 600px; */
    /* border: 1px solid blue; */
}

/* 媒体查询 */
@media screen and (max-width: 1200px) {
    .edu_header {
        width: 960px;
    }
    .search_right input{
        /* !important ==> 设置关键字，提高优先级 */
        width: 250px!important;
    } 
}

.edu_header_bar {
    display: flex;
    justify-content: space-between;
    /* background-color: antiquewhite; */
}
   
.edu_header_bar .logo {
    width: 148px;
    height: 50px;
}

.edu_header_bar .logo img{
    height: 100%;
}

.edu_header_bar .search {
    display: flex;
    /* 不写，默认主轴从左到右排列 */
    /* justify-content: space-between; */
    height: 50px;
}

.search_left {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-right: 20px;
}

.search_left .location_icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right:6px;
    background: url(../images/local.jpg) no-repeat center/cover;
}

.search_left .city {
    color: var(--theme-gray);
}

.search_right {
    display: flex;
    justify-content: space-between;

    position: relative;

    align-items: center;
}

.search_right input {
    box-sizing: border-box;
    width: 414px;
    height: 40px;
    padding-left: 46px;
    border: 1px solid var(--theme-blue);
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    outline: none;
}

.search_right::before {
    position: absolute;
    left: 18px;
    top: 50%;
    margin-top: -10px;

    content:"";
    display: inline-block;
    width: 18px;
    height: 18px;
    background: url(../images/star-on-24.png) no-repeat center/cover;
}

.search_right label {
    width: 85px;
    height: 40px;
    line-height: 40px;
    background-color: var(--theme-blue);
    text-align: center;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    font-size: 20px;
    color: #fff;
}

.edu_header_bar .link{
    height: 50px;
}

.edu_header_bar .link li{
    float: left;
    height: 50px;
    line-height: 50px;
    /* 给外面的li标签设置外边距值 */
    margin-left:30px;
}

.edu_header_bar .link li a{
    display: inline-block;
    height: 100%;
    color: var(--theme-gray);
}

.edu_header_bar .link li img {
    width: 40px;
    height: 40px;
    margin-top: 5px;
    border-radius: 50%;
}

/* header_bar上部分  end  */

/* header_nav start  */

.header_nav {
    margin-top: 15px;
}

.nav_list {
    display: flex;
    align-items: center;
    height: 50px;
}

.nav_list  .nav_item {
    height: 100%;
    line-height: 50px;
    margin-right: 50px;
    font-size: 20px;
}

/* 同一个标签设置多个类名，可以这样写 */
.nav_list  .nav_item.active {
    border-bottom: 3px solid var(--theme-blue);
}

.nav_list  .nav_item.active a{
    /* 字体粗细程度  设置为粗体 */
    font-weight: bold;
    color: var(--theme-blue);
}

/* 把最后一个li标签的外边距值设置为0 */
.nav_list  .nav_item:last-child {
    margin-right: 0;
}
/* header_nav end */
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

index.css

/* start edu_container */
.edu_container {
    position: relative;
    width: 100%;
    min-width: 1200px;
}

.edu_banner {
    position: relative;
    width: 100%;
    min-width: 980px;
}
.course , .parent ,.video , .artice{
    position: relative;
    width: 100%;
    min-width: 1200px;
} 
.banner_pic {
    width: 100%;
}

/* 设置媒体查询 当宽度大于1260px，更改左右按钮的left和right值 */
@media screen and (max-width: 1260px){
    .edu_banner .prev_btn {
        left: 100px!important;
    }

    .edu_banner .next_btn {
        right: 100px!important;
    }
}

.prev_btn ,
.next_btn {
    position: absolute;
    top: 50%;
    /* 向上移动自身高度的一半 */
    margin-top: -25px;
    width: 50px;
    height: 50px;
    /* background-color: ; */
    border-radius: 50%;
}

.prev_btn {
    left: 170px;
    background:rgba(74, 195, 246, .3) url(../images/left.png) no-repeat center;
}

.next_btn {
    right: 180px;
    background: rgba(74, 195, 246, .3) url(../images/right.png) no-repeat center;
}

.page_dot {
    position: absolute;
    bottom: 6px;
    left: 50%;
    /* 向左移动自身宽度的一半 */
    margin-left: -23px;
    width: 46px;
    /* height: 20px; */
    /* background-color: orange; */

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page_dot .dot{
    /* 行内元素，设置宽高无效的 */
    display: inline-block;
    width: 8px;
    height: 8px;

    border-radius: 50%;
    background-color: var(--theme-gray);
}

.page_dot .dot.active {
    width: 12px;
    height: 12px;
    background-color: var(--theme-blue);
}

/* start 广州热门学校 */
.edu_wrapper {
    display: flex;
    justify-content: space-between;

    width: 1200px;
    margin: 0 auto;
    padding-top: 55px;
}

/* 左侧是弹性宽度 */
.hot_school {
    flex: 1;
}

/* 右侧固定宽度 */
.hot_rating {
   width: 23%;
   flex: 0 0 23%;
   margin-left: 2%;
}

.school_lesson{
    position: relative;
}

.title{
    display: inline-block;
    font-size: 32px;
}

.small_title{
    display: inline-block;
    margin-left: 16px;
    font-size: 16px;
    color: var(--theme-gray);
}

.more{
    position: absolute;
    top: 9px;
    right: 0;
    font-size: 14px;
    color: var(--theme-blue);
}

.lesson_items {
    padding-top: 20px;
}

.lesson_items>ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
} 

.lesson_items>ul>li{
    width: 32%;
    margin-bottom: 20px;
    border-radius: 15px;
    /* 盒子阴影 */
    box-shadow: 0px 1px 2px 1px #eee;
} 

.lesson_items>ul>li>img {
    height: 200px;
    width: 100%;
}

.lesson_items .items_name,
.lesson_items .items_star,
.lesson_items .items_tips,
.lesson_items .items_address {
    margin-left: 15px;
}

.lesson_items .items_name{
    margin-top: 20px;
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: bold;
} 

.lesson_items .items_star{
    margin-bottom: 15px;
}

.lesson_items .star {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url(../images/star-on-24.png) no-repeat center/cover;
}

.lesson_items .score{
    color: #ecb50d;
}

.lesson_items .items_tips {
    margin-bottom: 15px;
}

.lesson_items .items_tips span{
    padding:2px 10px;
    background-color: var(--theme-blue);
    color: #fff;
    font-size: 12px;
    border-radius: 10px;
}
.lesson_items .items_address{
    margin-bottom: 15px;
    font-size: 12px;
    color: var(--theme-gray);
}   

/* 右侧固定的评论 */
.hot_rating {
    margin-top: 50px;
}

.hot_rating article {
    margin-top: 20px;
}

.hot_rating  .rating_title {
    display: inline-block;
    width: 130px;
    font-size: 24px;
    font-weight: 500;
    /* 设置省略号效果 */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.hot_rating  .rating_look {
    display: inline-block;
    font-size: 14px;
    color: var(--theme-blue);
}

.hot_rating  .rating_plan {
    font-size: 15px;
}
.hot_rating  .rating_plan span{
    padding:0 2px;
    background: orangered;
    border-radius: 5px;
    color: #fff;
}

.hot_rating  .rating_visited {
    padding: 15px 0;
    color: var(--theme-gray);
    font-size: 12px;
 }
/* end 广州热门学校 */

/* start 热门兴趣课 */
.course{
    background-color: #f7f8fa;
    /* margin: 0 auto; */
    padding-top: 24px;
    box-sizing: border-box;
}
.course_container{
    width: 1200px;
    margin: 0 auto;
    position: relative;
}
.course_items{
    width: 1200px;
    margin: 18px 0 20px 0;
    display: flex;
    justify-content: space-between;
}
.course_items .item{
    width: 280px;
    padding-bottom: 40px;
}
.course_items .item img{
    width: 100%;
}
.course_items .item h6{
    font-size: 18px;
    color: #333333;
    font-weight: bold;
    margin: 10px 0 5px 0;
}
.course_items .item span{
    font-size: 12px;
    color: #bdbdbf;  
}
/* end 热门兴趣课 */

/* start 家长种草推荐 */
.parent {
    padding-top: 24px;
    box-sizing: border-box;
  }
  .parent_container {
    width: 1200px;
    margin: 0 auto;
    position: relative;
  }
  .parent_items{
     width: 1200px;
     margin-top: 20px;
  }
  .parent_items .top_items , .parent_items .bottom_items {
       display: flex;
       justify-content: space-between;
       margin-bottom: 20px;
  }
  .parent_items .item{
    width: 274px; 
    box-shadow: 0px 1px 2px 1px #eee;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    position: relative;
  }
  .parent_items .item img{
       width: 100%;
       height: 178px;
       
  }
  .parent_items .item img:last-of-type{
    height: 44px;
    width: 44px;
    border-radius: 50%;
    position: absolute;
    top: 151px;
    left: 26px;
  }
  .parent_items .item span:first-of-type{
    display: inline-block;
    width: 75px;
    height: 20px;
    background-color: #29b7f5;
    position: absolute;
    top: 166px;
    right:0px;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    color: #fff;
    font-size: 14px;
    line-height: 20px;
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 9px;
  }
  .parent_items .item span:last-of-type{
    position: absolute;
    top: 178px;
    left: 78px;
    font-size: 13px;
    color: #333;
    font-weight: bold;
  }
  .parent_items .item p{
    font-size: 13px;
    color: #dfdfdf;
    margin-top: 36px;
    margin-bottom: 20px;
    height: 36px;
    width: 199px;
    margin-left: auto;
    margin-right: auto;
    line-height: 18px;

    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  /* end  家长种草推荐*/

  /* start 直播试听课 */
  .video {
    padding-top: 24px;
    box-sizing: border-box;
    background-color: #f7f8fa;
    position: relative;
    padding-bottom: 48px;
}
.video_container {
  width: 1200px;
  margin: 0 auto;
  position: relative;
}
.video_container .video_items{
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.video_container .video_items .item{
  width: 272px;
  position: relative;
}
.video_container .video_items .item img{
  height: 192px;
  width: 100%;
}
.video_container .video_items .item span{
  position: absolute;
  display: inline-block;
  width: 100%;
  height: 20px;
  line-height: 20px;
  font-size: 11px;
  background-color: rgba(0, 0, 0, 0.41);
  top: 171px;
  left: 0px;
  color: #fff;
  text-align: center;
}
.video_container .video_items .item .info{
  width: 100%;
  height: 117px;
  box-sizing: border-box;
  padding-top: 11px;
  text-align: center;
  background-color: #fff;
  
}
.video_container .video_items .item .info h3{
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 16px;
}
.video_container .video_items .item .info p{
  display: block;
  margin-bottom: 8px;
  font-size: 8px;
  color: #e2e2e2;
}
.video_container .video_items .item .info .teacher{
  padding-top: 10px;
}
.video_container .video_items .item .info .teacher img{
  width: 28px;
  height: 28px;
  vertical-align: middle;
}
.video_container .video_items .item .teacher p {
  display: inline-block;
}
.left , .right{
  display: inline-block;
  width: 40px;
  height: 40px;
  position: absolute;
  border-radius: 50%;
  background-size: 20px 20px;
}
.left{
  top: 202px;
  left: 100px;
  background: #dbdbdd url(../images/left.png) no-repeat center center;
  
}
.right{
  top: 202px;
  right: 100px;
  background:#dbdbdd url(../images/right.png) no-repeat center center;
}
  /* end 直播试听课 */

 /* start 文章 */
 .artice{
    padding-top: 24px;
    box-sizing: border-box;
    position: relative;
  }
  .artice_container{
    width: 1200px;
    margin: 0 auto;
    position: relative;
   
  }
  .artice_container .artice_content{
    display: flex;
    justify-content: space-between;
  }
  .artice_container .artice_content .left_content , .artice_container .right_content{
       width: 588px;
       margin-bottom: 20px;
       margin-top: 20px;
  }
  .artice_container ul li{
    border-radius: 12px;
    width: 100%;
    height: 190px;
    margin-bottom: 10px;
    /* background-color: red; */
    box-sizing: border-box;
    padding: 20px 30px;
    box-shadow: 0px 1px 2px 1px #eee;
  }
  .artice_container ul li img{
    width: 196.5px;
    height: 146px;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius:12px;
    vertical-align: top;
    margin-right: 20px;
  }
  .artice_container ul li .info {
     display: inline-block;
     width: 306px;
     height: 100%;
     position: relative;
  }
  .artice_container ul li .info p{
    font-size: 16px;
    color: #8e8e8e;
    width: 257px;
    line-height: 30px;
  }
  .artice_container ul li .info span{
    position: absolute;
    display: inline-block;
    width: 40px;
    height: 40px;
    background: url(../images/点赞.png) no-repeat center;
    background-size: 30px;
    top: 100px;
    left: -6px;
  }
  .artice_container ul li .info .number{
     position: absolute;
     top: 110px;
     left: 41px;
     color: #2063e8;
  }
 /* end 文章 */
/* end edu_container */

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
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524

footer.css

/* start 底部 */
.edu_footer{
    background-color: #414141;
    height: 160px;
    box-sizing: border-box;
    padding-top: 28px;
    padding-bottom: 20px;
  }
  .footer_container{
    width: 810px;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    /* background-color: aqua; */
  }
  .footer_container .top{
    height: 31px;
    border-bottom: 1px solid #333;
    display: flex;
    justify-content: space-between;
    font-size: 17px;
    color: #fff;
    box-sizing: border-box;
    padding-bottom: 53px;
  }
  .footer_container .bottom {
    font-size: 8px;
    color: #fff;
    box-sizing: border-box;
    padding-top: 20px;
  }
  .footer_container .bottom span::after{
    content: "|";
  }
  .footer_container .bottom span:nth-child(4)::after{
    content: "";
  }
  .footer_container .bottom span:last-child::after{
    content: "";
  }
  .footer_container .bottom .bottom_top{
    margin-bottom: 5px;
  }
  .footer_container .top .top_left span{
    margin-right: 12px;
  }
  .footer_container .top .top_left{
    margin-top: 8px;
  }
  .footer_container .top .top_right span{
    display: inline-block;
    width: 112px;
    height: 30px;
  }
 
  .footer_container .top .top_right span p{
    display: inline-block;
    margin-left: 26px;
    margin-top: 7px;
  }
  .footer_container .top .top_right span:first-of-type{
     background: url(../images/weibo.png) no-repeat center left;
     background-size: 20px;
  }
  .footer_container .top .top_right span:last-of-type{
     background: url(../images/weixin.png) no-repeat center left;
     background-size: 20px;
  }
  /* end 底部 */
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

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>趣学网首页</title>

  <link rel="stylesheet" href="./css/reset.css" />
  <link rel="stylesheet" href="./css/base.css" />

  <link rel="stylesheet" href="./css/header.css" />
  <link rel="stylesheet" href="./css/index.css" />
  <link rel="stylesheet" href="./css/footer.css">
</head>

<body>
  <!-- start 头部 -->
  <header class="edu_header">
    <!--  start 上部分  -->
    <div class="edu_header_bar">
      <div class="logo">
        <img src="./images/logo.jpg" alt="logo" />
      </div>

      <div class="search">
        <div class="search_left">
          <i class="location_icon"></i>
          <span class="city">广州</span>
        </div>
        <div class="search_right">
          <input type="text" id="search" placeholder="搜索培训机构或者课程" />
          <label for="search">搜索</label>
        </div>
      </div>

      <ul class="link clearfix">
        <li>
          <a href="#"> 足迹 </a>
        </li>
        <li>
          <a href="#">消息</a>
        </li>
        <li>
          <a href="#">收藏</a>
        </li>
        <li>
          <a href="#">
            <img src="./images/avatar.png" alt="用户头像" />
          </a>
        </li>
      </ul>
    </div>
    <!--  end 上部分  -->

    <!--start 下部分  -->
    <nav class="header_nav">
      <ul class="nav_list">
        <li class="nav_item active">
          <a href="#">首页</a>
        </li>
        <li class="nav_item">
          <a href="./school.html">找学校</a>
        </li>
        <li class="nav_item">
          <a href="#">问答社区</a>
        </li>
        <li class="nav_item">
          <a href="#">资讯文章</a>
        </li>
        <li class="nav_item">
          <a href="#">趣学专题</a>
        </li>
      </ul>
    </nav>
    <!--end 下部分  -->
  </header>
  <!-- end 头部 -->

  <!-- start 主体内容 -->
  <main class="edu_container">
    <!-- part01 start banner -->
    <div class="edu_banner">
      <!-- 轮播图图片 -->
      <div class="banner_pic">
        <img src="./images/banner.jpg" width="100%" alt="轮播图片" />
      </div>

      <!-- 左右按钮 -->
      <div class="prev_btn"></div>
      <div class="next_btn"></div>

      <!-- 小圆点 -->
      <div class="page_dot">
        <span class="dot"></span>
        <span class="dot active"></span>
        <span class="dot"></span>
      </div>
    </div>
    <!-- part01 end banner -->

    <!-- part02 start 广州热门学校 -->
    <div class="edu_wrapper">
      <section class="hot_school">
        <div class="school_lesson">
          <h2 class="title">广州热门学校</h2>
          <h3 class="small_title">报课不迷路</h3>
          <p class="more">更多热门学校 &gt;</p>
        </div>

        <div class="lesson_items">
          <ul>
            <li>
              <img src="./images/paning.png" alt="画画" />
              <h2 class="items_name">童程童美教育</h2>
              <div class="items_star">
                <span class="star"></span>
                <span class="star"></span>
                <span class="star"></span>
                <span class="star"></span>
                <span class="star"></span>
                <span class="score">5.0分</span>
              </div>
              <div class="items_tips">
                <span>少儿编程</span>
              </div>
              <div class="items_address">天河儿童公园/上社</div>
            </li>
            <li>
              <img src="./images/Hiphop.png" alt="画画" />
              <h2 class="items_name">利泰丽姿.形体仪态礼仪</h2>
              <div class="items_star">
                <span class="star"></span>
                <span class="star"></span>
                <span class="star"></span>
                <span class="star"></span>
                <span class="star"></span>
                <span class="score">5.0分</span>
              </div>
              <div class="items_tips">
                <span>口才礼仪</span>
              </div>
              <div class="items_address">珠江新城</div>
            </li>
            <li>
              <img src="./images/eloquence.png" alt="画画" />
              <h2 class="items_name">新世界日语</h2>
              <div class="items_star">
                <span class="star"></span>
                <span class="star"></span>
                <span class="star"></span>
                <span class="star"></span>
                <span class="star"></span>
                <span class="score">5.0分</span>
              </div>
              <div class="items_tips">
                <span>日语</span>
              </div>
              <div class="items_address">天河城/体育中心</div>
            </li>
            <li>
              <img src="./images/paning.png" alt="画画" />
              <h2 class="items_name">艾佛瑞钢琴学校</h2>
              <div class="items_star">
                <span class="star"></span>
                <span class="star"></span>
                <span class="star"></span>
                <span class="star"></span>
                <span class="star"></span>
                <span class="score">5.0分</span>
              </div>
              <div class="items_tips">
                <span>钢琴辅导</span>
              </div>
              <div class="items_address">车陂/东圃</div>
            </li>
            <li>
              <img src="./images/program_three.png" alt="画画" />
              <h2 class="items_name">美联少儿英语辅导</h2>
              <div class="items_star">
                <span class="star"></span>
                <span class="star"></span>
                <span class="star"></span>
                <span class="star"></span>
                <span class="star"></span>
                <span class="score">5.0分</span>
              </div>
              <div class="items_tips">
                <span>英语辅导</span>
              </div>
              <div class="items_address">凯德广场</div>
            </li>
            <li>
              <img src="./images/art.png" alt="画画" />
              <h2 class="items_name">山谷私塾</h2>
              <div class="items_star">
                <span class="star"></span>
                <span class="star"></span>
                <span class="star"></span>
                <span class="star"></span>
                <span class="star"></span>
                <span class="score">5.0分</span>
              </div>
              <div class="items_tips">
                <span>书法</span>
              </div>
              <div class="items_address">上下九/北京路</div>
            </li>
          </ul>
        </div>
      </section>
      <section class="hot_rating">
        <article>
          <h2 class="rating_title">热门讨论寒假放假如何完成寒假作业</h2>
          <p class="rating_look">(去社区看看)</p>
        </article>
        <article>
          <h2 class="rating_plan">我的假期学习计划 <span>热</span></h2>
          <p class="rating_visited">300万次浏览</p>
        </article>
        <article>
          <h2 class="rating_plan">我的假期学习计划 <span>热</span></h2>
          <p class="rating_visited">300万次浏览</p>
        </article>
        <article>
          <h2 class="rating_plan">我的假期学习计划 <span>热</span></h2>
          <p class="rating_visited">300万次浏览</p>
        </article>
        <article>
          <h2 class="rating_plan">我的假期学习计划</h2>
          <p class="rating_visited">300万次浏览</p>
        </article>
        <article>
          <h2 class="rating_plan">我的假期学习计划</h2>
          <p class="rating_visited">300万次浏览</p>
        </article>
        <article>
          <h2 class="rating_plan">我的假期学习计划</h2>
          <p class="rating_visited">300万次浏览</p>
        </article>
        <article>
          <h2 class="rating_plan">我的假期学习计划</h2>
          <p class="rating_visited">300万次浏览</p>
        </article>
        <article>
          <h2 class="rating_plan">我的假期学习计划</h2>
          <p class="rating_visited">300万次浏览</p>
        </article>
      </section>
    </div>
    <!-- part02 end 广州热门学校 -->

    <!-- part03 start 热门兴趣课 -->
    <div class="course">
      <section class="course_container">
        <div class="course_header">
          <h2 class="title">热门兴趣课</h2>
          <h3 class="small_title">看看他们学什么</h3>
          <p class="more">更多兴趣课 &gt;</p>
        </div>
        <div class="course_items">
          <div class="item">
            <img src="images/yukrili.png" alt="">
            <h6>尤克里里</h6>
            <span>增强自信心，培养情操及涵养。</span>
          </div>
          <div class="item">
            <img src="images/ballet.png" alt="">
            <h6>尤克里里</h6>
            <span>增强自信心，培养情操及涵养。</span>
          </div>
          <div class="item">
            <img src="images/the-game-of-go.png" alt="">
            <h6>尤克里里</h6>
            <span>增强自信心，培养情操及涵养。</span>
          </div>
          <div class="item">
            <img src="images/drawing.png" alt="">
            <h6>尤克里里</h6>
            <span>增强自信心，培养情操及涵养。</span>
          </div>
        </div>
      </section>
    </div>
    <!-- part03 end 热门兴趣课 -->

    <!-- part04 start 家长种草推荐 -->
    <div class="parent">
      <section class="parent_container">
        <div class="parent_header">
          <h2 class="title">家长种草推荐</h2>
          <p class="more">更多兴趣课 &gt;</p>
        </div>
        <div class="parent_items">
          <div class="top_items">
            <div class="item">
              <img src="images/dance.png" alt="">
              <img src="images/user1.png" alt="">
              <span>舞蹈培训</span>
              <span>依晨</span>
              <p>女儿从四岁多一直都在鹏星学习啦啦操培训，会努力坚持的！</p>
            </div>
            <div class="item">
              <img src="images/eloquence.png" alt="">
              <img src="images/user2.png" alt="">
              <span>口才训练</span>
              <span>carm123</span>
              <p>上几节课，孩子的胆怯和怯场慢慢有了改善，以前总会有“生人勿近”</p>
            </div>
            <div class="item">
              <img src="images/Hiphop.png" alt="">
              <img src="images/user3.png" alt="">
              <span>街舞培训</span>
              <span>carm123</span>
              <p>老师很专业，教的很仔细，学下来感觉氛围很好，舞蹈室很大，很漂亮。</p>
            </div>
            <div class="item">
              <img src="images/Magic.png" alt="">
              <img src="images/user4.png" alt="">
              <span>魔术教学</span>
              <span>Done</span>
              <p>魔术拉松很有耐心，孩子很内向，希望跟着老师学习后能活泼开朗。</p>
            </div>
          </div>
          <div class="bottom_items">
            <div class="item">
              <img src="images/program_one.png" alt="">
              <img src="images/user5.png" alt="">
              <span>少儿编程</span>
              <span>GP82</span>
              <p>值得推荐，近在为孩子找到报读兴趣班，也在团上看了很多，最终挑选到这门课</p>
            </div>
            <div class="item">
              <img src="images/music_two.png" alt="">
              <img src="images/user6.png" alt="">
              <span>音乐培训</span>
              <span>Jake</span>
              <p>体验了一下何老师的吉他课，老师超nice，上课很轻松，环境也很棒</p>
            </div>
            <div class="item">
              <img src="images/art.png" alt="">
              <img src="images/user7.png" alt="">
              <span>美术绘画</span>
              <span>tony</span>
              <p>老师很专业，环境特别好，女儿学得非常认真。</p>
            </div>
            <div class="item">
              <img src="images/game.png" alt="">
              <img src="images/user8.png" alt="">
              <span>智力围棋</span>
              <span>Dona</span>
              <p>环境很好，老师也非常亲切，小宝很喜欢老师，只是离家远了！</p>
            </div>
          </div>
        </div>
    </div>
    <!-- part04 end 家长种草推荐 -->

    <!-- part05 start 直播试听课 -->
    <div class="video">
      <span class="left"></span>
      <section class="video_container">
        <div class="video_header">
          <h2 class="title">直播试听课</h2>
          <p class="more">更多兴趣课 &gt;</p>
        </div>
        <div class="video_items">
           <div class="item">
             <img src="images/layer.png" alt="">
             <span>《自信口才》语言表达体验课</span>
             <div class="info">
               <h3>胜狮少儿口才培训</h3>
               <p>开播时间：2020年10月18日</p>
               <div class="teacher">
                 <img src="images/teacher.png" alt="">
                 <p>讲师：小强老师</p>
               </div>
             </div>
           </div>
           <div class="item">
            <img src="images/FineArts.png" alt="">
            <span>少儿美术体验课</span>
            <div class="info">
              <h3>大本象美术教育</h3>
              <p>开播时间：2020年11月10日</p>
              <div class="teacher">
                <img src="images/张修.png" alt="">
                <p>讲师：张修</p>
              </div>
            </div>
           </div>
           <div class="item">
            <img src="images/Drumkit.png" alt="">
            <span>【架子鼓】少儿零基础课</span>
            <div class="info">
              <h3>心乐艺术中心</h3>
              <p>开播时间：2020年10月30日</p>
              <div class="teacher">
                <img src="images/teacher.png" alt="">
                <p>讲师：小王老师</p>
              </div>
            </div>
           </div>
           <div class="item">
            <img src="images/program_three.png" alt="">
            <span>少儿编程基础入门试听课</span>
            <div class="info">
              <h3>乐博乐博STEAM少儿编程</h3>
              <p>开播时间：2020年12月15日</p>
              <div class="teacher">
                <img src="images/teacher.png" alt="">
                <p>讲师：小张老师</p>
              </div>
            </div>
           </div>
        </div>
      </section>
      <span class="right"></span>
    </div>
    <!-- part05 end 直播试听课 -->

    <!-- part06 start 文章 -->
    <div class="artice">
      <section class="artice_container">
        <div class="artice_header">
          <h2 class="title">文章</h2>
          <p class="more">更多文章 &gt;</p>
        </div>
        <div class="artice_content">
          <div class="left_content">
            <ul>
              <li>
                <img src="images/Hiphop.png" alt="">
                <div class="info">
                  <p>有关孩子“兴趣班”，看这一篇，就够了！</p>
                  <span class=""></span>
                  <p class="number">10000</p>
                </div>
              </li>
              <li>
                <img src="images/Hiphop.png" alt="">
                <div class="info">
                  <p>有关孩子“兴趣班”，看这一篇，就够了！</p>
                  <span class=""></span>
                  <p class="number">10000</p>
                </div>
              </li>
              <li>
                <img src="images/Hiphop.png" alt="">
                <div class="info">
                  <p>有关孩子“兴趣班”，看这一篇，就够了！</p>
                  <span class=""></span>
                  <p class="number">10000</p>
                </div>
              </li>
            </ul>
          </div>
          <div class="right_content">
            <ul>
              <li>
                <img src="images/Hiphop.png" alt="">
                <div class="info">
                  <p>有关孩子“兴趣班”，看这一篇，就够了！</p>
                  <span class=""></span>
                  <p class="number">10000</p>
                </div>
              </li>
              <li>
                <img src="images/Hiphop.png" alt="">
                <div class="info">
                  <p>有关孩子“兴趣班”，看这一篇，就够了！</p>
                  <span class=""></span>
                  <p class="number">10000</p>
                </div>
              </li>
              <li>
                <img src="images/Hiphop.png" alt="">
                <div class="info">
                  <p>有关孩子“兴趣班”，看这一篇，就够了！</p>
                  <span class=""></span>
                  <p class="number">10000</p>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </section>
    </div>
    <!-- part06 end 文章 -->
  </main>
  <!-- end 主体内容 -->
  
  <!-- start 尾部 -->
  <footer class="edu_footer">
     <div class="footer_container">
       <div class="top">
         <div class="top_left">
           <span>联系我们</span>
           <span>法律声明</span>
           <span>隐私政策</span>
           <span>用户协议</span>
           <span>加入我们</span>
         </div>
         <div class="top_right">
           <span><p>官方微博</p></span>
           <span><p>微信公众号</p></span>
         </div>
       </div>
       <div class="bottom">
         <div class="bottom_top">
           <span>客服热线：400 8536 100 周一至周日 9:00-21:00</span>
           <span>在线客服：趣学网 - 我 -在线客服</span>
           <span>违法和不良信息举报电话：400 8536 100 转7</span>
           <span>教App备11517号</span>
         </div>
         <div class="bottom_bottom">
           <span>粤ICP备15039397号</span>
           <span>粤公网安备 11010502035430号</span>
           <span>粤B2-070890</span>
           <span>广东趣学教育有限公司</span>
           <span>广州市天河区广四路大街</span>
           <span>营业执照</span>
           <span>出版物证</span>
         </div>
       </div>
     </div>
  </footer>
  <!-- end 尾部 -->
</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
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/517627