WEB前端实训(Day02)


阅读数: 次   

A.m.

任务五：页脚实现

本任务主要是完成博鳌网站首页页脚信息列表显示、客户端渲染（页面头部、导航以及页脚HTML结构）。本任务主要由两部分构成，第一部分是具体实现页脚HTML结构和CSS，第二部分应用js写入HTML方式实现页脚，并了解客户端渲染的选择和应用场景。

首先创建页脚整体结构：

添加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
/* 页脚 */
.foot_mar_top {
    padding: 10px 0 10px 0;
    background-color: #505050;
}
.foot_info ul {
    float: left;
    margin-top: 10px;
    margin-left: 115px;
}
.foot_info ul li a:link, .foot_info ul li a:visited {
    font-size: 12px;
    font-weight: normal;
    color: #fff;
    text-decoration: none;
}
.foot_info ul li a:hover {
    font-size: 12px;
    font-weight: normal;
    color: #fff;
    text-decoration: underline;
}
.copyright {
    padding: 10px;
    text-align: center;
    color: #999;
}

将 .box 白色背景去除：

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

在这里介绍一种应用js写入HTML的方式实现页脚。这种方式在用户请求量大的时候能降低服务器端的压力，页面中相应的内容由客户端（浏览器）进行加载完成。创建foot.js并存放到js文件夹中，具体代码主要是通过脚本中的document.writeln();来向页面中打印输出相应的页面代码，如：document.writeln(“

    “);

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
document.writeln("<div class=\"foot_mar_top\">");
document.writeln("<div class=\"box\">");
document.writeln("<div class=\"foot_info\">");
document.writeln("<ul>");
document.writeln("<li><a href=\"#\">关于我们</a></li>");
document.writeln("<li><a href=\"#\">市场简介</a></li>");
document.writeln("<li><a href=\"#\">市场动态</a></li>");
document.writeln("<li><a href=\"#\">线下活动</a></li>");
document.writeln("</ul>");
document.writeln("<ul>");
document.writeln("<li><a href=\"#\">新手指南</a></li>");
document.writeln("<li><a href=\"#\">注册新用户</a></li>");
document.writeln("<li><a href=\"#\">雇主入门</a></li>");
document.writeln("<li><a href=\"#\">规则中心</a></li>");
document.writeln("</ul>");
document.writeln("<ul>");
document.writeln("<li><a href=\"#\">服务保障</a></li>");
document.writeln("<li><a href=\"#\">服务流程</a></li>");
document.writeln("<li><a href=\"#\">服务反馈</a></li>");
document.writeln("<li><a href=\"#\">服务监管</a></li>");
document.writeln("</ul>");
document.writeln("<ul>");
document.writeln("<li><a href=\"#\">合作伙伴</a></li>");
document.writeln("<li><a href=\"#\">服务商入驻</a></li>");
document.writeln("<li><a href=\"#\">服务商入驻流程</a></li>");
document.writeln("<li><a href=\"#\">商家管理规范</a></li>");
document.writeln("</ul>");
document.writeln("<ul>");
document.writeln("<li><a href=\"#\">帮助中心</a></li>");
document.writeln("<li><a href=\"#\">常见问题</a></li>");
document.writeln("<li><a href=\"#\">运维服务</a></li>");
document.writeln("<li><a href=\"#\">管理规范</a></li>");
document.writeln("</ul>");
document.writeln("</div>");
document.writeln(" <div class=\"clear\"></div>");
document.writeln("</div>");
document.writeln("</div>");
document.writeln("<div class=\"box copyright\">Copyright 2005-2020 xxx.com 版权所有</div>");

在页面页脚位置加入：<script src="js/foot.js"></script>

同理，如果我们网站的几个页面（首页、列表页以及详情页）中都有相同的HTML结构部分，即页面头部和底部，并且这些部分存在数据更新，我们就可以使用js异步更新数据并在浏览器端完成相应的HTML结构加载。
为加强理解应用，我们这里将博鳌网站首页的Logo和用户注册部分、Banner部分、导航部分均采用这种方式实现。
Logo和用户注册login.js，Banner部分top.js，导航部分nav.js。将这三个文件添加到body对应的位置（原先编写的HTML不再需要）

1
2
3
4
5
6
7
8
<body>
    <!--网站Logo和用户登录注册-->
    <script src="js/login.js"></script>
    <!--banner-->
    <script src="js/top.js"></script>
    <!--导航-->
    <script src="js/nav.js"></script>
</body>
任务六：列表页、网站详情页具体实现

本任务主要由两部分构成，第一部分是页面顶部的用户登陆注册、Banner、导航以及页脚，这些部分在上个任务中已经介绍过，因为在首页、列表页以及详情页中都是一致的，所以采用js方式写入HTML到页面，页面访问量大时可有效降低服务器的处理负荷，提高服务器端处理能力；第二部分是信息列表部分。

在站点目录下新建html文件news_list.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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>博鳌网</title>
		<link href="css/style.css" rel="stylesheet"/>
	</head>
	<body>
		<!-- 网站Logo和用户登录注册 -->
		<script src="js/login.js"></script>
		
		<!-- Banner -->
		<script src="js/top.js"></script>
		
		<!-- 导航 -->
		<script src="js/nav.js"></script>
		
		<!-- 新闻列表 -->
		<div class="box">
			<div class="title mar_top">
				<ul>
					<li><span><a target="_blank" href="news_list.html">新闻</a></span></li>
				</ul>
			</div>
			<div class="news_list">
				<ul>
					<li><span><a href="read.html">博鳌亚洲论坛研究院副院长：全球化发展趋势不可逆转</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>
					<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>
					<li><span><a href="#">博鳌亚洲论坛研究院副院长：全球化发展趋势不可逆转</a></span>2016-04-08</li>
					<li><span><a href="#">博鳌亚洲论坛研究院副院长：全球化发展趋势不可逆转</a></span>2016-04-08</li>
				</ul>
				<div class="clear"></div>
			</div>
			<div class="mar_top page">
				<ul>
					<li><a href="#">首页</a>|<a href="#">上一页</a>|<a href="#">下一页</a>|<a href="#">尾页</a>|跳到第<input style="width:30px;" name="" type="text" />页|当前第<span class="red">3</span>页|共100页</li>
				</ul>
			</div>
		</div>
		
		<!-- 页脚 -->
		<script src="js/foot.js"></script>
	</body>
</html>

在style.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
/* 列表页 分页代码 */
.page {
	padding: 20px;
}

.page ul li {
	text-align: center;
	color: #999;
}

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

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

.red {
	color: red;
}

页面效果如下：

接下来实现列表链接新闻详情页。整体页面划分为三部分。第一部分是网站头部包括Logo和用户交互的入口、 Banner、导航部分；第二部分是中间部分，包括标题、新闻内容；第三部分是脚注部分。网站风格统一，其中头部和脚注由嵌入javascript脚本实现，与news_list.html相似。

设置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
/* news */
.news {
	margin: auto;
	margin-top: 25px;
	width: 960px;
}

/* ul li */
.news_tit {
	padding: 15px;
	text-align: center;
	font-size: 24px;
	font-family: 微软雅黑;
	color: #454545;
	border-bottom: 1px #b4b4b4 solid;
}

.news_sub_tit {
	text-align: center;
	font-size: 14px;
	color: #b4b4b4;
}

.news_tch_tit {
	padding:20px;
	font-size: 14px;
	line-height: 26px;
}

页面效果：

修改news_list.html、nav.js中代码，测试超链接。

跳转成功。

P.m.

任务七：用户注册页具体实现

本任务主要由两部分构成，第一部分是页面顶部的用户登陆注册、Banner、导航以及页脚，同样采用js写入相应的HTML结构的方式；第二部分是表单部分。本次任务主要就是中间部分的表单元素，但是用CSS控制表单元素不是很方便，在这里我们引入了Bootstrap框架来美化页面。

在网站根目录下新建user_login.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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>博鳌网</title>
		<link href="css/bootstrap.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<script src="js/jquery-3.3.1.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="js/register.js"></script>
	</head>
	<body>
		<!-- 网站Logo和用户登录注册 -->
		<script src="js/login.js"></script>
		
		<!-- Banner -->
		<script src="js/top.js"></script>
		
		<!-- 导航 -->
		<script src="js/nav.js"></script>
		
		<!-- 用户注册 -->
		<div class="container">
			<from class="form-inline" role="from" name="f1">
				<div class="box">
					<div class="title" style="margin-top: 50px;">
						<ul>
							<li><span><a href="#">用户注册</a></span></li>
						</ul>
					</div>
					<div class="clear"></div>
					<div class="user">
						<ul>
							<li class="pro">用户名</li>
							<li>
								<input class="form-control" style="width:200px; height:30px;" name="" type="text" />
							</li>
							<li>请输入你的用户名</li>
						</ul>
						<ul>
							<li class="pro">密码</li>
							<li>
								<input class="form-control" style="width:200px; height:30px;" name="" type="password" id="password" placeholder="8-20位字母/数字和符号" />
							</li>
							<li>
								<span class="grade" id="grade1">弱</span>
								<span class="grade" id="grade2">中</span>
								<span class="grade" id="grade3">强</span>
							</li>
							<li>
								<div class="prompt" id="div1" style="display:none;">
									<img src="images/img/tip.png" />
									<span id="prompt1"></span>
								</div>
							</li>
						</ul>
						<ul>
							<li class="pro">确认密码</li>
							<li>
								<input class="form-control" style="width:200px; height:30px;" name="" id="password1" type="password" />
							</li>
							<li>
								<div class="prompt" id="div2" style="display:none;">
									<img src="images/img/tip.png" />
									<span id="prompt2"></span>
								</div>
							</li>
						</ul>
						<ul>
							<li class="pro">性别</li>
							<li>
								<select class="form-control" name="">
									<option>男</option>
									<option>女</option>
								</select>
							</li>
						</ul>
						<ul>
							<li class="pro">生日</li>
							<li>
								<input class="form-control form-inline" style="width:60px; height:30px;" name="" type="text" />年
								<input class="form-control form-inline" style="width:60px; height:30px;" name="" type="text" />月
								<input class="form-control form-inline" style="width:60px; height:30px;" name="" type="text" />日
							</li>
						</ul>
						<ul>
							<li class="pro">所在地</li>
							<li>
								<select class="form-control" style="width:100px; height:30px;" name="">
									<option>海南</option>
									<option>广东</option>
									<option>江苏</option>
									<option>云南</option>
								</select>
								省
								<select class="form-control" style="width:100px; height:30px;" name="">
									<option>海口</option>
									<option>三亚</option>
									<option>琼海</option>
								</select>
								市
							</li>
						</ul>
						<ul>
							<li class="pro">手机号码</li>
							<li>
								<input class="form-control" style="width:200px; height:30px;" name="input" type="text" id="phone" />
							</li>
							<li>
								<div class="prompt" id="div3" style="display:none;">
									<img src="images/img/tip.png" />
									<span id="prompt3"></span>
								</div>
							</li>
							<li>
								<input class="form-control" name="button" type="submit" id="button" value="获取短信验证码" />
							</li>
						</ul>
						<ul>
							<li class="pro">验证码</li>
							<li>
								<input class="form-control" style="width:150px; height:30px;" name="" type="text" />
							</li>
							<li>请输验证码</li>
						</ul>
						<ul>
							<li class="pro">&nbsp;</li>
							<li>
								<input class="form-control" name="button2" type="submit" id="button2" value="立即注册" />
							</li>
						</ul>
						<div class="clear"></div>
					</div>
				</div>
			</from>
		</div>
		
		<!-- 页脚 -->
		<script src="js/foot.js"></script>
	</body>
</html>

表单控件加上类form-control后，效果设置为：宽度为100%设置边框为浅灰色控件具有4px的圆角设置阴影效果，元素得到焦点时，阴影和边框效果会发生变化设置placeholder的颜色为#999。

添加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
/* 用户注册页 */
.user {
	margin: auto;
	margin-top: 30px;
	width: 800px;
}

.user ul {
	clear: both;
	height: 40px;
}

.user ul li {
	float: left;
	margin-right: 10px;
	line-height: 24px;
	color: #999;
}

.pro {
	width: 150px;
	text-align: right;
	font-size: 14px;
	font-weight: blod;
	font-family: 微软雅黑;
}

页面效果：

接下来为表单添加验证，主要使用jQuery以下功能：

在js文件夹中新建register.js，编辑内容如下：

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
$(function(){
	// 密码验证
	var pwd = $('#password');
	var prompt = $('#prompt1');
	var rag1 = /^\w{8,20}$/;
	var rag2 = /^\d{8,20}$/;
	var rag3 = /^[A-z0-9]{8,10}$/;
	var rag4 = /^[A-z0-9]{10,19}$/;
	pwd.focus(function(){
		$('#div1').show();
		pwd.css('borderColor','#67a1e2');
		$('#div1').css('width',216);
		prompt.text("请设置登录密码");
		$('#div1').css('backgroundColor','#fff5D1');
		$('#grade1').css('backgroundColor','#f1d0b9');
		$('#grade1').css('color','#fff');
		$('#grade2').css('backgroundColor','#f1d0b9');
		$('#grade2').css('color','#fff');
		$('#grade3').css('backgroundColor','#f1d0b9');
		$('#grade3').css('color','#fff');
	});
	pwd.blur(function(){
		pwd.css('backgroundColor','#ddd');
		if(this.value == ""){
			$('#div1').css('width',216);
		}
		else {
			if(rag1.test(this.value) == true){
				if(rag2.test(this.value) == true){
					prompt.text('密码过于简单，有被盗风险');
					$('#div1').css('width',216);
					$('#div1').css('backgroundColor','#fff5D1');
				}
				if(rag2.test(this.value) == false){
					$('#div1').hide();
				}
				if(rag3.test(this.value) == true){
					if(rag2.test(this.value) == true) {
						$('#grade1').css('backgroundColor','#ff893a');
					}
					else {
						$('#grade1').css('backgroundColor','#ff893a');
						$('#grade2').css('backgroundColor','#ff893a');
					}
				}
				if(rag4.test(this.value) == true){
					if(rag2.test(this.value) == true) {
						$('#grade1').css('backgroundColor','#ff893a');
					}
					else {
						$('#grade1').css('backgroundColor','#ff893a');
						$('#grade2').css('backgroundColor','#ff893a');
						$('#grade3').css('backgroundColor','#ff893a');
					}
				}
			}
			else {
				prompt.text("密码需为8-20个字符，由字母、数字和符号组成。");
				$('#div1').css('width',360);
				$('#div1').css('backgroundColor','#fff5D1');
			}
		}
	});
	
	// 确认密码验证
	var pwds = $('#password1');
	var prompt2 = $('#prompt2');
	pwds.focus(function(){
		$('#div2').show();
		prompt2.text("请再次输入密码");
		$('#div2').css('backgroundColor','#fff5D1');
	});
	pwds.blur(function(){
		if(this.value == ""){
			prompt2.text("确认密码不能为空");
			$('#div2').css('backgroundColor','#fff5D1');
		}
		else {
			if(this.value == pwd.val()){
				$('#div2').hide();
			}
			else{
				prompt2.text("你两次输入的密码不一致");
			}
		}
	});
	
	// 手机号验证
	var phone = $('#phone');
	var prompt3 = $('#prompt3');
	var rag5 = /^[1][358][0-9]{9}$/;
	phone.focus(function(){
		$('#div3').show();
		phone.css('backgroundColor','#67a1e2');
		prompt3.text('请输入手机号');
		$('#div3').css('backgroundColor','#fff5D1');
	});
	phone.blur(function(){
		phone.css('backgroundColor','#ddd');
		if(this.value == ""){
			prompt3.text('手机号不能为空');
			$('#div3').css('backgroundColor','#fff5D1');
		}
		else {
			if(rag5.test(this.value) == true){
				$('#div3').hide();
			}
			else {
				prompt3.text('手机号格式不正确');
				$('#div3').css('backgroundColor','#fff5D1');
			}
		}
	});
});

表单验证效果如图所示：

修改login.js中代码，测试完成的index.html 、news_list.html 、read.html、user_login.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>谢谢大家