WEB前端实训(Day01)


阅读数: 次   

第一章 概述

Web前端综合实训是教学过程中重要的实践性教学环节。根据专业教学计划的要求，面向Web前端开发工作岗位，培养学生综合运用理论知识分析和解决实际问题的能力，实现由理论知识向操作技能的转化，是对理论与实践教学效果的检验，也是对学生综合分析能力与独立工作能力的培养。因此，加强实践教学环节，搞好实训教学，对实现本专业的培养目标，提高学生的综合素质有着重要的作用。

一、实训目的

通过综合实训进一步巩固、深化和扩展学生的理论知识与专业技能。

加深对网页设计的理解，能对网站功能进行分析，并设计合理的网站结构；

掌握WEB网站的基本开发流程；

掌握CSS+DIV技术在实际开发中的应用；

掌握JavaScript技术、jQuery技术、Bootstrap框架在实际开发中的应用；

提高开发网站的能力，能够运用合理的控制流程写出高效的代码；

培养分析问题、解决实际问题的能力。

二、实训内容

1、综合信息网站——博鳌网站的制作：首页展示、新闻列表页面、新闻详情页面、用户注册页面等。

2、利用HTML5制作移动端页面。

3、使用HBuilderX 编写。

第二章 任务分析实现

A.m.

任务一：网站首页整体布局分析设计

实训内容：

◆ 网站开发流程

典型的网站开发流程包括以下几个阶段：

① 需求分析：包括建站目的及目标定位分析。

② 站点规划：包括结构规划、内容规划、界面规划及网站功能设置。

③ 网站制作：包括设置网站的开发环境、创建内容资源、页面设计和布局等。

④ 测试发布：测试页面的链接及网站的兼容性，并将站点发布到服务器上。

▶ 需求分析

  1. 建站目的

建立网站的目的要么是增加利润，要么是传播信息或观点。显然，创建网络书城网站的目的是第一种：增加利润。随着网上交易安全性方面的逐渐完善，网上购物已逐渐成为人们消费的时尚。同时，通过网上在线销售，可以扩展企业的销售渠道，提高公司的知名度，降低企业的销售成本，网络书城正是在这样的业务背景下建立的。

  1. 目标定位

提出目标定位是非常简单的事情，更重要的是如何实现目标。在很多Web网站项目中，有包容一切的倾向。实际上一个网站不可能满足所有人的需求，对设计者来说，网站一定要有特定的用户和特定的任务。

▶ 站点规划

  1. 网站结构规划
    （1）网站结构图
    （2）使用合理的文件夹保存文档
    （3）使用合理的文件名称
  2. 网站内容规划
  3. 网站界面规划
  4. 网站功能设置

综合信息网站——博鳌网站的主要功能包括：首页展示、新闻列表页面、新闻详情页面、用户注册页面等。

▶ 网站制作
完整的网站制作包括以下两个过程：
1．前台页面制作
前台页面制作包括内容采集整理、图片的处理、背景设置、页面排版及样式设计等。
2．后台程序开发
后台程序开发包括网站数据库设计、网站和数据库的连接、动态网页编程等。本书主要讲解前台页面的制作，后台程序开发读者可以在动态网站设计的课程中学习。

▶ 测试发布

1．测试站点
网站测试与传统的软件测试不同，它不但需要检查是否按照设计的要求运行，而且还要测试系统在不同用户端的显示是否合适，最重要的是从最终用户的角度进行安全性和可用性测试。测试网页主要从以下3个方面着手。
● 页面的效果是否美观。
● 页面中的链接是否正确。
● 页面的浏览器兼容性是否良好。
2．发布站点
◆创建站点与目录结构
1．创建站点
2．创建目录结构
在制作各网页前，用户需要确定整个网站的目录结构。对于中小型网站，一般会创建如下通用的目录结构：
images目录：存放网站的所有图片。
style目录：存放网站的CSS样式文件，实现内容和样式的分离。
js目录：存放JavaScript脚本文件。
admin目录：存放网站后台管理程序。

【案例展示】制作博鳌首页，本例文件index.html在浏览器中的浏览效果如图所示。

博鳌网站主要以展示地方综合信息为主体，网站首页包含顶部注册、登陆、导航、滚动新闻图片以及各分类信息等部分。本任务主要划分整体页面布局，综合信息页面的信息量比较大，往往都是很长，页面布局不会太复杂。
布局示意图如图所示。

从页面布局图中可以看出，该网站的页面布局并不复杂，分为13个块，都是按照从上到下排列。

部分代码如下：

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
<!DOCTYPE html>
<html>
	<head lang="en">
        <meta charset="utf-8">
        <title>博鳌网</title>
        <style>
            body {
                margin: 0 auto;
                background-color: #f7fbff;
            }
            div {
                padding: 0;
                margin: 0;
                font-size: 14px;
                line-height: 20px;
                font-family: Arial, Helvetica, "宋体", sans-serif;
                list-style: none;
            }
            .clear {
                clear: both;
            }
            /*box、top等基本设置*/
            .box {
                margin: 0 auto;
                width: 1000px;
                background-color: #fff;
                clear: both;
            }
            .mar_top {
                margin-top: 10px;
            }
        </style>
    </head>
    <body>
        <!--网站Logo和用户登录注册-->
        <div class="box">
            注册登录
        </div>
        <!--banner-->
        <div class="top">
            网站banner
        </div>
        <!--导航-->
        <div class="box">
            导航
        </div>
        <!--新闻图片浏览及新闻信息-->
        <div class="box">
            <div class="left"></div>
            <div class="right"></div>
            <div class="clear"></div>
        </div>
        <div class="box mar_top">
            <img src="" />图片1
        </div>
        <!--房产、教育信息-->
        <div class="box">房产、教育信息
            <div class="left"></div>
            <div class="right"></div>
            <div class="clear"></div>
        </div>
        <div class="box mar_top">
            <img src="" />图片2
        </div>
        <!--旅游、企业信息-->
        <div class="box">旅游、企业信息
            <div class="left"></div>
            <div class="right"></div>
            <div class="clear"></div>
        </div>
        <div class="box mar_top">
            <img src="" />图片3
        </div>
        <!--家居、人才信息-->
        <div class="box">家居、人才信息
            <div class="left"></div>
            <div class="right"></div>
            <div class="clear"></div>
        </div>
        <div class="box mar_top">
            <img src="" />图片4
        </div>
        <!--美食、酒店信息-->
        <div class="box">美食、酒店信息
            <div class="left"></div>
            <div class="right"></div>
            <div class="clear"></div>
        </div>
        <!--页脚-->
        <div class="box">
            <div class="box">页脚</div>
        </div>
    </body>
</html>
任务二：页面头部、banner及导航具体实现

根据效果图可以看出，页面头部可划分为三部分。第一部分是网站Logo和用户交互的入口，即注册、登录以及用户状态的显示；第二部分是网站Banner；第三部分是导航部分。本任务的实现难度不大，需要注意的是Banner和导航部分两边有扩展，在背景色设置上要与图片边缘部分搭配合适。

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
<!-- 网站Logo和用户登录注册 -->
<div class="box">
	<div class="logo">
		<img src="images/index_img/logo.jpg" width="158" height="39" />
	</div>
	<div class="login">
		<ul>
			<li><span>会员登录</span></li>
			<li>
				账号：<input name="" type="text" />
			</li>
			<li>
				密码：<input name="" type="text" />
			</li>
			<li><a href="#">注册</a></li>
			<li><a href="#">登录</a></li>
		</ul>
		<div class="clear"></div>
	</div>
	<div class="clear"></div>
</div>

<!-- banner -->
<div class="top">
	<div class="box">
		<img src="images/index_img/top.jpg" width="1000" height="150" />
	</div>
</div>

<!-- 导航 -->
<div class="nav_bg">
	<div class="nav">
		<ul>
			<li><a href="#">首页</a></li>
			<li><a href="#">新闻</a></li>
			<li><a href="#">教育</a></li>
			<li><a href="#">人才</a></li>
			<li><a href="#">企业</a></li>
			<li><a href="#">房产</a></li>
			<li><a href="#">家居</a></li>
			<li><a href="#">旅游</a></li>
			<li><a href="#">酒店</a></li>
			<li><a href="#">美食</a></li>
		</ul>
		<div class="clear"></div>
	</div>
	<div class="clear"></div>
</div>

CSS样式：

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
/* HTML基本元素定义 */
body {
	margin: 0 auto;
	background-color: #f7fbff;
}

div, td {
	font-size: 14px;
	line-height: 20px;
	font-family: Arial, Helvetica, "宋体", sans-serif;
}

div, form, img, ul, ol, li, dl, dt, dd {
	padding: 0;
	margin: 0;
	border: 0;
	list-style: none;
}

p, h1, h2, h3, h4, h5, h6 {
	padding: 0;
	margin: 0;
	font-size: 12px;
	font-weight: normal;
}

input {
	padding: 1px;
	font-size: 14px;
	font-family: Arial, Helvetica, sans-serif;
}

select {
	font-size: 14px;
	font-family: Arial, Helvetica, sans-serif;
}

ul, li {
	list-style-type: none;
}

textarea {
	padding: 4px;
	font-size: 14px;
}

.clear {
	clear: both;
}

/* box、top等基本设置 */
.box {
	margin: 0 auto;
	width: 1000px;
	background-color: #fff;
	clear: both;
}

.mar_top {
	margin-top: 10px;
}

/* ----------网页顶部Logo和用户登录注册等---------- */
.logo {
	float: left;
}

.login {
	float: right;
	padding: 10px;
	width: 390px;
	background-color: #fff;
}

.login ul li {
	float: left;
	padding-right: 15px;
	font-size: 12px;
	line-height: 24px;
	color: #6d6d6d;
}

.login ul li span {
	text-align: center;
	font-size: 12px;
	font-weight: bold;
	color: #fda701;
}

.login ul li a:link, a:hover, a:visited {
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
	color: #fda701;
}

.login input {
	width: 60px;
}

/* 网页banner */
.top {
	height: 150px;
	background-color: #4eb4d3;
	border-top: 1px #24A9C6 solid;
}

/* 网页导航 */
.nav_bg {
	background-color: #055f98;
}

.nav {
	padding: 0;
	margin: auto;
	width: 1000px;
}

.nav ul li {
	float: left;
	padding-right: 30px;
	line-height: 50px;
}

.nav ul li a:link, .nav ul li a:visited {
	font-size: 16px;
	font-family: "Arial Black", Gadget, sans-serif, "微软雅黑";
	font-weight: bold;
	text-decoration: none;
	color: #fff;
}

.nav ul li a:hover {
	font-size: 16px;
	font-family: "Arial Black", Gadget, sans-serif, "微软雅黑";
	font-weight: bold;
	text-decoration: underline;
	color: #fda701;
}

页面效果如下：

任务三：图片浏览及新闻栏实现

本任务主要由两部分构成，第一部分是左侧的图片浏览特效，第二部分是新闻列表，其中图片浏览特效应用的是jQuery案例。
本任务需要完成图片浏览和新闻列表两部分，因图片浏览特效需要用到脚本，需在标签中加入js脚本引用。代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<head lang="en">
	<meta charset="utf-8">
	<title>博鳌网</title>
	<link href="css/style.css" rel="stylesheet" />
	<script src="js/jquery-3.3.1.min.js"></script>
	<script src="js/jquery.easing.1.3.js"></script>
	<script src="js/jquery.galleryview-1.1.js"></script>
	<script src="js/jquery.timers-1.1.2.js"></script>
	<script>
		$(document).ready(function(){
			$('#photos').galleryView({
				panel_width:425,
				panel_height:230,
				frame_width:50,
				frame_height:50
			});
		});
	</script>
</head>

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
<!-- 新闻图片浏览及新闻信息 -->
<div class="box">
	<div class="left">
		<div id="photos" class="galleryview">
			<div class="panel">
				<img src="images/index_img/01.jpg" />
				<div class="panel-overlay">
					<h2>博鳌亚洲论坛</h2>
					<p><a href="#" target="_blank">博鳌亚洲论坛研究院副院长：全球化发展趋势不可逆转</a></p>
				</div>
			</div>
			<div class="panel">
				<img src="images/index_img/02.jpg" />
				<div class="panel-overlay">
					<h2>一带一路</h2>
					<p><a href="#" target="_blank">“一带一路”将成为21世纪最宏大的计划之一[哈通社]</a></p>
				</div>
			</div>
			<div class="panel">
				<img src="images/index_img/03.jpg" />
				<div class="panel-overlay">
					<h2>一带一路</h2>
					<p><a href="#" target="_blank">中国第一本以“一带一路”为主题的外文期刊《丝路瞭望》创刊</a></p>
				</div>
			</div>
			<div class="panel">
				<img src="images/index_img/04.jpg" />
				<div class="panel-overlay">
					<h2>墨尔本会议</h2>
					<p><a href="#" target="_blank">世界越小，市场越大，是为全球化最大的魅力</a></p>
				</div>
			</div>
			<div class="panel">
				<img src="images/index_img/06.jpg" />
				<div class="panel-overlay">
					<h2>博鳌亚洲论坛</h2>
					<p><a href="#" target="_blank">博鳌亚洲论坛副理事长、中国国务院原副总理曾培炎在博鳌亚洲论坛</a></p>
				</div>
			</div>
			<div class="panel">
				<img src="images/index_img/05.jpg" />
				<div class="panel-overlay">
					<h2>博鳌亚洲论坛</h2>
					<p><a href="#" target="_blank">探索变革中的机遇与挑战——博鳌亚洲论......</a></p>
				</div>
			</div>
			<div class="panel">
				<img src="images/index_img/07.jpg" />
				<div class="panel-overlay">
					<h2>博鳌亚洲论坛</h2>
					<p><a href="#" target="_blank">“2017博鳌亚洲论坛发展峰会（澳门）”主办机构举行签约仪式</a></p>
				</div>
			</div>
			<div class="panel">
				<img src="images/index_img/08.jpg" />
				<div class="panel-overlay">
					<h2>博鳌亚洲论坛</h2>
					<p><a href="#" target="_blank">习近平将出席博鳌亚洲论坛 出席本届年会领导人规模将超历届</a></p>
				</div>
			</div>
			<ul class="filmstrip">
				<li><img src="images/index_img/frame-01.jpg" alt="博鳌亚洲论坛" title="" /></li>
				<li><img src="images/index_img/frame-02.jpg" alt="一带一路" title="" /></li>
				<li><img src="images/index_img/frame-03.jpg" alt="一带一路" title="" /></li>
				<li><img src="images/index_img/frame-04.jpg" alt="墨尔本会议" title="" /></li>
				<li><img src="images/index_img/frame-06.jpg" alt="博鳌亚洲论坛" title="" /></li>
				<li><img src="images/index_img/frame-05.jpg" alt="博鳌亚洲论坛" title="" /></li>
				<li><img src="images/index_img/frame-07.jpg" alt="博鳌亚洲论坛" title="" /></li>
				<li><img src="images/index_img/frame-08.jpg" alt="博鳌亚洲论坛" title="" /></li>
			</ul>
		</div>
	</div>
	<div class="right">
		<div class="sub_box">
			<div class="title">
				<ul>
					<li>
						<span><a target="_blank" href="news_list.html">新闻</a></span>
						<a target="_blank" href="#">more</a>
					</li>
				</ul>
			</div>
			<div class="news_list">
				<ul>
					<li><span><a href="#">博鳌亚洲论坛研究院副院长：全球化发展趋势不可逆转</a></span>2016-04-08</li>
					<li><span><a href="#">博鳌亚洲论坛研究院副院长：全球化发展趋势不可逆转</a></span>2016-04-08</li>
					<li><span><a href="#">博鳌亚洲论坛研究院副院长：全球化发展趋势不可逆转</a></span>2016-04-08</li>
					<li><span><a href="#">博鳌亚洲论坛研究院副院长：全球化发展趋势不可逆转</a></span>2016-04-08</li>
					<li><span><a href="#">博鳌亚洲论坛研究院副院长：全球化发展趋势不可逆转</a></span>2016-04-08</li>
					<li><span><a href="#">博鳌亚洲论坛研究院副院长：全球化发展趋势不可逆转</a></span>2016-04-08</li>
					<li><span><a href="#">博鳌亚洲论坛研究院副院长：全球化发展趋势不可逆转</a></span>2016-04-08</li>
					<li><span><a href="#">博鳌亚洲论坛研究院副院长：全球化发展趋势不可逆转</a></span>2016-04-08</li>
				</ul>
			</div>
		</div>
	</div>
	<div class="clear"></div>
</div>

CSS样式：

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
/* 图片浏览部分 */
.left {
	float: left;
	padding-top: 10px;
	width: 425px;
}

#photos {
	visibility: hidden;
}

.galleryview {
	padding: 0;
	border: 0 solid rgb(170,170,170);
	border-image: none;
	background-color: rgb(221,221,221);
	box-shadow: 6px 6px 5px #ccc;
}

.loder {
	background: url("loader.gif") no-repeat center rgb(221,221,221);
}

.panel img {
	width: 600px;
}

.panel .panel-overlay {
	padding: 0 1em;
	height: 60px;
}

.panel .overlay-background {
	padding: 0 1em;
	height: 60px;
	background: rgb(34,34,34);
}

.panel .panel-overlay {
	font-size: .7em;
	color: white;
}

.panel .panel-overlay a {
	text-decoration: underline;
	color: white;
}

.filmstrip {
	margin: 5px;
}

.frame .img_wrap {
	border: 0 solid rgb(170,170,170);
	border-image: none;
}

.frame.current .img_wrap {
	border-color: rgb(0,0,0);
}

.frame img {
	border: currentcolor;
	border-image: none;
}

.frame .caption {
	text-align: center;
	font-size: 11px;
	color: rgb(136,136,136);
}

.frame.current .caption {
	color: rgb(0,0,0);
}

.pointer {
	color: rgb(0,0,0);
}

.filmstrip img {
	width: 50px;
	height: 50px;
}

/* 新闻列表 */
.right {
	float: right;
	padding-top: 10px;
	width: 560px;
}

.sub_box {
	margin-top: 5px;
	clear: both;
}

.title {
	height: 30px;
	border-bottom: 1px #197395 solid;
}

.title ul li {
	text-align: right;
	line-height: 30px;
}

.title ul li a:link, .title ul li a:visited {
	font-size: 14px;
	font-weight: bold;
	color: #8c8c8c;
	text-decoration: none;
}

.title ul li a:hover {
	font-size: 14px;
	font-weight: bold;
	color: #fda701;
	text-decoration: none;
}

.title ul li span {
	float: left;
}

.title ul li span a:link, .title ul li span a:visited {
	font-size: 16px;
	color: #000;
	font-family: "Arial Black", Gadget, sans-serif, "微软雅黑";
}

.title ul li span a:hover {
	font-size: 16px;
	color: #fda701;
	font-family: "Arial Black", Gadget, sans-serif, "微软雅黑";
}

.news_list {
	margin: 0;
}

.news_list ul li {
	padding: 5px 0 5px 10px;
	text-align: right;
	color: #7a7a7a;
	border-bottom: 1px #ececec dashed;
	background: url(../images/index_img/list_dot.jpg);
	background-position: left;
	background-repeat: no-repeat;
	clear: both;
}

.news_list ul li span {
	float: left;
}

.news_list ul li span a:link, .news_list ul li span a:visited {
	font-size: 13px;
	font-weight: normal;
	color: #000;
	text-decoration: none;
}

.news_list ul li span a:hover {
	font-size: 13px;
	font-weight: normal;
	color: #fda701;
	text-decoration: none;
}

页面效果：

P.m.

任务四：房产、教育等信息栏具体实现

本任务主要由三部分构成，第一部分是图片展示，第二部分是房产分类信息列表，第三部分是教育分类信息列表。在整个网页中与其他各分类信息模块HTML和CSS是几乎一致的。

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
<div class="box mar_top"><img src="images/index_img/banner05.jpg" width="1000" height="100"/></div>

<!-- 房产、教育信息 -->
<div class="box">
	<div class="left">
		<div class="sub_box">
			<div class="title">
				<ul>
					<li><span><a href="#">房产</a></span>
						<a href="#">more</a>
					</li>
				</ul>
			</div>
			<div class="pho_info">
				<div class="pho_info_left">
					<a href="#"><img src="images/houseproperty_img/phoad01.jpg" width="100" height="100" /></a>
				</div>
				<div class="pho_info_right">
					<ul>
						<li><span><a href="#">半山半岛</a></span></li>
						<li>半山半岛位于三亚市小东海鹿回头半岛。。。</li>
					</ul>
				</div>
				<div class="clear"></div>
			</div>
			<div class="pho_info">
				<div class="pho_info_left">
					<a href="#"><img src="images/houseproperty_img/phoad02.jpg" width="100" height="100" /></a>
				</div>
				<div class="pho_info_right">
					<ul>
						<li><span><a href="#">国兴北岸江山</a></span></li>
						<li>碧桂园美浪湾地处“海口后花园”之称的。。。</li>
					</ul>
				</div>
				<div class="clear"></div>
			</div>
		</div>
	</div>
	<div class="right">
		<div class="sub_box">
			<div class="title">
				<ul>
					<li><span><a target="_blank" href="news_list.html">教育</a></span>
						<a target="_blank" href="#">more</a>
					</li>
				</ul>
			</div>
			<div class="infoshows">
				<ul>
					<li><img src="images/education_img/s_pho01.jpg" width="112" height="82"></li>
					<li><a href="#">“补脑班”抢占市场</a></li>
				</ul>
				<ul>
					<li><img src="images/education_img/s_pho02.jpg" width="112" height="82"></li>
					<li><a href="#">“情商培训”受追捧</a></li>
				</ul>
				<ul>
					<li><img src="images/education_img/s_pho03.jpg" width="112" height="82"></li>
					<li><a href="#">七成学生涌入辅导班</a></li>
				</ul>
				<ul>
					<li><img src="images/education_img/s_pho04.jpg" width="112" height="82"></li>
					<li><a href="#">广东学生“体育作业”</a></li>
				</ul>
				<div class="clear"></div>
			</div>
			<div class="clear"></div>
			<div class="news_list">
				<ul>
					<li><span><a href="#">牛津大学遭16年前印度毕业生状告教学“差劲”，被要求答辩</a></span>2016-04-08</li>
					<li><span><a href="#">牛津大学遭16年前印度毕业生状告教学“差劲”，被要求答辩</a></span>2016-04-08</li>
					<li><span><a href="#">牛津大学遭16年前印度毕业生状告教学“差劲”，被要求答辩</a></span>2016-04-08</li>
					<li><span><a href="#">牛津大学遭16年前印度毕业生状告教学“差劲”，被要求答辩</a></span>2016-04-08</li>
				</ul>
				<div class="clear"></div>
			</div>
		</div>
	</div>
	<div class="clear"></div>
</div>

CSS样式：

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
/* 各模块分类信息列表 */
/* 左侧各模块分类信息列表 */
.pho_info {
	padding: 5px 5px 5px 0;
	border-bottom: 1px #ccc dashed;
	clear: both;
}

.pho_info_left {
	float: left;
	padding: 5px;
	width: 100px;
	height: 100px;
	border: 1px solid #ccc;
}

.pho_info_right {
	float: left;
	padding: 0 0 5px 10px;
	width: 285px;
}

.pho_info_right ul li {
	font-size: 12px;
	font-weight: normal;
	line-height: 22px;
	color: #7a7a7a;
}

.pho_info_right ul li span a:link, .pho_info_right ul li span a:visited {
	font-size: 12px;
	font-weight: normal;
	text-decoration: none;
	color: #015ebe;
}

.pho_info_right ul li span a:hover {
	font-size: 12px;
	font-weight: normal;
	text-decoration: underline;
	color: #fda701;
}

/* 右侧各模块分类信息列表 */
.infoshows {
	margin: 10px 0 10px 0;
}

.infoshows ul {
	float: left;
	margin-left: 22px;
}

.infoshows ul li {
	text-align: center;
	line-height:25px;
}

.infoshows ul li a:link, .infoshows ul li a:visited {
	font-size: 12px;
	font-weight: normal;
	color: #06c;
	text-decoration: none;
}

.infoshows ul li a:hover {
	font-size: 12px;
	font-weight: normal;
	color: #f00;
	text-decoration: underline;
}

页面效果：

其他分类模板完成HTML结构后效果如图所示：

赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

微信分享二维码
载入天数...载入时分秒...
本站总访问量次 |

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

很惭愧<br><br>只做了一点微小的工作<br>谢谢大家