JavaScript_Homework2

JavaScript作业二:表格、框架与表单的应用

做出来的效果自我感觉真的是Low

代码长度过长,可直接忽略,点击左侧目录直接查看效果吧。


任务2-1】实现Q-Walking E&S购物模块首页的设计。

这里写图片描述

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>漫步时尚广场首页</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div align="center">
<img src="images/logo.jpg">
<img src="images/banner.jpg">
</div>
<!-- 导航栏区域-->
<div class="panel-body col-md-offset-4">
<ul class="nav nav-pills">
<li class="active"><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>

<!-- 左侧导航栏区域-->
<div class="panel-body col-md-2">
<ul class="nav nav-list list-group" contenteditable="true">
<li class="nav-header list-group-item active">女装</li>
<li><a href="#">•&nbsp;上衣</a></li>
<li><a href="#">•&nbsp;下装</a></li>
<li><a href="#">•&nbsp;连衣裙</a></li>
<li><a href="#">•&nbsp;内衣</a></li>

<li class="nav-header list-group-item">男装</li>
<li><a href="#">•&nbsp;T恤</a></li>
<li><a href="#">•&nbsp;短裤</a></li>
<li><a href="#">•&nbsp;衬衫</a></li>

<li class="nav-header list-group-item">童装</li>
<li><a href="#">•&nbsp;上衣</a></li>
<li><a href="#">•&nbsp;裤子</a></li>

<li class="nav-header list-group-item">运动</li>
<li><a href="#">•&nbsp;运动裤</a></li>
<li><a href="#">•&nbsp;跑步鞋</a></li>
</ul>
</div>

<div class="panel panel-default col-md-5">
<div class="panel-body">
<div id="myCarousel" class="carousel slide">
<!-- 轮播(Carousel)指标 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0"
class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- 轮播(Carousel)项目 -->
<div class="carousel-inner">
<div class="item active">
<img src="images/3.jpg" alt="First slide">
</div>
<div class="item">
<img src="images/2.jpg" alt="Second slide">
</div>
<div class="item">
<img src="images/1.jpg" alt="Third slide">
</div>
</div>
<!-- 轮播(Carousel)导航 -->
<a class="carousel-control left" href="#myCarousel"
data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#myCarousel"
data-slide="next">&rsaquo;</a>
</div>
</div>

</div>
<div class="panel panel-default col-md-3">
<div class="panel-heading">
公告
</div>
<ul class="list-group">
<li class="list-group-item">免费域名注册</li>
<li class="list-group-item">免费 Window 空间托管</li>
<li class="list-group-item">图像的数量</li>
<li class="list-group-item">免费域名注册</li>
<li class="list-group-item">免费 Window 空间托管</li>
<li class="list-group-item">
<span class="badge">新</span>
24*7 支持
</li>
<li class="list-group-item">每年更新成本</li>
<li class="list-group-item">
<span class="badge">新</span>
折扣优惠
</li>
</ul>
</div>

<div class="panel panel-default col-md-10 md-offset-2">
<br>
<div class="media col-md-3">
<a class="media-left" href="#">
<img class="media-object" src="images/pro1.jpg">
</a>
<div class="media-body">
<h4 class="media-heading">热门品类:护肤彩妆启示</h4>
洗护套装&nbsp;&nbsp;&nbsp;&nbsp;面部精华&nbsp;&nbsp;&nbsp;&nbsp;香水&nbsp;&nbsp;&nbsp;&nbsp;粉底液&nbsp;&nbsp;&nbsp;&nbsp;面霜&nbsp;&nbsp;&nbsp;&nbsp;洁面&nbsp;&nbsp;&nbsp;&nbsp;美容工具&nbsp;&nbsp;&nbsp;&nbsp;复方精油&nbsp;&nbsp;&nbsp;&nbsp;洗发水
</div>
</div>

<div class="media col-md-3">
<a class="media-left" href="#">
<img class="media-object" src="images/pro2.jpg">
</a>
<div class="media-body">
<h4 class="media-heading">强效保养:逆转皮肤问题</h4>
隔离&nbsp;&nbsp;&nbsp;&nbsp;保湿&nbsp;&nbsp;&nbsp;&nbsp;补水&nbsp;&nbsp;&nbsp;&nbsp;清洁&nbsp;&nbsp;&nbsp;&nbsp;清爽&nbsp;&nbsp;&nbsp;&nbsp;排毒&nbsp;&nbsp;&nbsp;&nbsp;去角质&nbsp;&nbsp;&nbsp;&nbsp;美白&nbsp;&nbsp;&nbsp;&nbsp;祛痘&nbsp;&nbsp;&nbsp;&nbsp;收缩毛孔&nbsp;&nbsp;&nbsp;&nbsp;紧质
</div>
</div>

<div class="media col-md-3">
<a class="media-left" href="#">
<img class="media-object" src="images/pro3.jpg">
</a>
<div class="media-body">
<h4 class="media-heading">人气品牌:最IN大牌</h4>
薇姿&nbsp;&nbsp;&nbsp;&nbsp;欧莱雅&nbsp;&nbsp;&nbsp;&nbsp;美宝莲&nbsp;&nbsp;&nbsp;&nbsp;SK-II&nbsp;&nbsp;&nbsp;&nbsp;百雀羚&nbsp;&nbsp;&nbsp;&nbsp;美即&nbsp;&nbsp;&nbsp;&nbsp;雅颂&nbsp;&nbsp;&nbsp;&nbsp;谜语&nbsp;&nbsp;&nbsp;&nbsp;妮维雅
</div>
</div>

<div class="media col-md-3">
<a class="media-left" href="#">
<img class="media-object" src="images/pro4.jpg">
</a>
<div class="media-body">
<h4 class="media-heading">潮流单品</h4>
孕妇护肤&nbsp;&nbsp;&nbsp;&nbsp;护手保养&nbsp;&nbsp;&nbsp;&nbsp;护肤能白锦集&nbsp;&nbsp;&nbsp;&nbsp;5步护肤术
</div>
</div>
<br>
<div align="center">
<p><img src="images/gray1.jpg"><img src="images/gray2.jpg"><img src="images/gray3.jpg"><img src="images/gray4.jpg"><img src="images/gray5.jpg"></p>
</div>
<br>
</div>

<!-- 版权区域-->

<div class="panel panel-default col-md-12">
<div class="foot_line"></div>
<p align="center" class="padding-top">Copyright 2015-2020 Q-Walking Fashion E&S 漫步时尚广场(QST教育)版权所有<br> 中国青岛 高新区广博路325号 青软教育集团 咨询热线:400-658-0166 400-658-1022</p>
<p align="center"><img src="images/foot_pic.jpg"></p>
<div class="clear"></div>
</div>

</body>
</html>

【任务2-2】实现Q-Walking E&S后台管理页面。

这里写图片描述

顶部导航页面

这里写图片描述

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>后台管理顶部导航</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default " role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">漫步时尚后台管理</a>
</div>
<div>
<ul class="nav navbar-nav">
<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>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> admin</a></li>
<li><a href="#"><span class="glyphicon badge pull-right">3</span> 消息</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 退出</a></li>
</ul>
</div>
</nav>

</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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>后台管理左侧导航页面</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
购物后台管理
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="list-group">
<a href="#" class="list-group-item">添加商品</a>
<a href="#" class="list-group-item">商品列表</a>
<a href="#" class="list-group-item">商品类型</a>
</div>
</div>
</div>


<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
影视后台管理
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="list-group">
<a href="#" class="list-group-item">添加影视</a>
<a href="#" class="list-group-item">影视列表</a>
<a href="#" class="list-group-item">影视类型</a>
</div>
</div>
</div>



<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
餐饮后台管理
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="list-group">
<a href="#" class="list-group-item">添加美食</a>
<a href="#" class="list-group-item">美食列表</a>
<a href="#" class="list-group-item">美食类型</a>
</div>
</div>
</div>

<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a href="#" class="collapsed" role="button">
订单管理
</a>
</h4>
</div>
</div>

<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a href="#" class="collapsed" role="button">
交易记录
</a>
</h4>
</div>
</div>

<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a href="#" class="collapsed" role="button">
统计报表
</a>
</h4>
</div>
</div>

<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a href="#" class="collapsed" role="button">
权限分配
</a>
</h4>
</div>
</div>

<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a href="#" class="collapsed" role="button">
修改密码
</a>
</h4>
</div>
</div>

<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a href="#" class="collapsed" role="button">
系统设置
</a>
</h4>
</div>
</div>


</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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>后台管理商品列表页面</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="panel panel-default">
<div class="panel-body">
<ol class="breadcrumb col-sm-9">
位置:
<li><a href="#">首页</a></li>
<li><a href="#">购物后台管理</a></li>
<li class="active">商品列表</li>

</ol>
<form class="form-horizontal" role="form">
<fieldset disabled>
<div class="form-group">
<div class="col-sm-11 col-sm-offset-1">
<input type="text" id="disabledTextInput" class="form-control" placeholder="今天是:2018年03月17日 星期日 14:30">
</div>
</div>
</fieldset>
</form>

</div>
</div>

<div class="panel panel-default">
<div class="panel-body">

<nav class="navbar navbar-default " role="navigation">
<div class="container-fluid">

<div>
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
商品分类
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">女装</a></li>
<li class="divider"></li>
<li><a href="#">男装</a></li>
<li class="divider"></li>
<li><a href="#">童装</a></li>
<li class="divider"></li>
<li><a href="#">运动</a></li>
</ul>
</li>

</ul>
</div>


<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>

<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-plus"></span> 添加</a></li>
<li><a href="#"><span class="glyphicon glyphicon-pencil"></span> 修改</a></li>
<li><a href="#"><span class="glyphicon glyphicon-remove"></span> 删除</a></li>
<li><a href="#"><span class="glyphicon glyphicon-signal"></span> 统计</a></li>
<li><a href="#"><span class="glyphicon glyphicon-cog"></span> 设置</a></li>
</ul>
</div>
</nav>

<table class="table table-striped">
<thead>
<tr>
<th>名称</th>
<th>缩略图</th>
<th>商品名称</th>
<th>商品类别</th>
<th>数量(件)</th>
<th>单价(元)</th>
<th>发布时间</th>
<th>是否审核</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td></td>
<td>RAX头层牛皮户外鞋</td>
<td>运动</td>
<td>334</td>
<td>¥566.00</td>
<td>2015-06-06 15:05</td>
<td>已审核</td>
<td>
<a href="#" class="btn btn-primary btn-xs" role="button">查看</a>
<a href="#" class="btn btn-danger btn-xs" role="button">删除</a>
</td>

</tr>
<tr>
<td>Sachin</td>
<td></td>
<td>七匹狼休闲裤</td>
<td>男装</td>
<td>455</td>
<td>¥236.00</td>
<td>2015-06-06 15:05</td>
<td>未审核</td>
<td><a href="#" class="btn btn-primary btn-xs" role="button">查看</a>
<a href="#" class="btn btn-danger btn-xs" role="button">删除</a></td>
</tr>
<tr>
<td>a</td>
<td></td>
<td>欧美大牌五分袖妆腰显瘦</td>
<td>女装</td>
<td>889</td>
<td>¥136.00</td>
<td>2015-06-06 15:05</td>
<td>已审核</td>
<td><a href="#" class="btn btn-primary btn-xs" role="button">查看</a>
<a href="#" class="btn btn-danger btn-xs" role="button">删除</a></td>
</tr>
<tr>
<td>a</td>
<td></td>
<td>欧美大牌五分袖妆腰显瘦</td>
<td>女装</td>
<td>889</td>
<td>¥136.00</td>
<td>2015-06-06 15:05</td>
<td>已审核</td>
<td><a href="#" class="btn btn-primary btn-xs" role="button">查看</a>
<a href="#" class="btn btn-danger btn-xs" role="button">删除</a></td>
</tr>
<tr>
<td>a</td>
<td></td>
<td>欧美大牌五分袖妆腰显瘦</td>
<td>女装</td>
<td>889</td>
<td>¥136.00</td>
<td>2015-06-06 15:05</td>
<td>已审核</td>
<td><a href="#" class="btn btn-primary btn-xs" role="button">查看</a>
<a href="#" class="btn btn-danger btn-xs" role="button">删除</a></td>
</tr>
</tbody>
</table>



</div>
<div class="panel-footer">共1256条记录,当前显示第2页
<nav style="text-align: right;">
<ul class="pagination">
<li><a href="#">&laquo;</a></li>
<li><a href="#">1</a></li>
<li class="active"><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">...</a></li>
<li><a href="#">10</a></li>
<li><a href="#">&raquo;</a></li>
</ul>
</nav>
</div>
</div>


</body>
</html>

【任务3-1】实现Q-Walking E&S用户注册页面。

这里写图片描述

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户注册</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<ol class="breadcrumb col-sm-6 col-md-offset-3">
位置:
<li><a href="#">首页</a></li>
<li class="active">用户注册</li>
</ol>

<div class="panel panel-default col-sm-6 col-md-offset-3">
<div class="panel-heading">
<h3 class="panel-title" align="center">用户注册</h3>
</div>
<div class="panel-body">



<form class="form-horizontal" role="form">
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">用户名:</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="userName"
placeholder="请输入用户名">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">邮箱地址:</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="eamil"
placeholder="请输入邮箱地址">
</div>
</div>

<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">设置密码:</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="userPwd"
placeholder="请输入密码 6-20个字符,由字母,数字和符号的两种以上组合。">
</div>
</div>

<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">确认密码:</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="usereRePwd"
placeholder="请再次输入密码">
</div>
</div>

<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">真实姓名:</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="realName"
placeholder="请输入真实姓名">
</div>
</div>

<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">性别:</label>
<div class="radio">
<label>
&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="optionsRadios" id="optionsRadios1" value="男" checked>男
</label>

<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="女">女
</label>
</div>
</div>

<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">上传头像:</label>
<div class="col-sm-6">
<input id="f_upload" type="file" class="file" />
</div>
</div>



<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">您的手机:</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="mobile"
placeholder="请输入您的手机号">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">单位名称:</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="company"
placeholder="请输入单位名称">
</div>
</div>

<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">单位地址:</label>
<div class="col-sm-2">
<select class="form-control">
<option>请选择省份</option>
<option>北京市</option>
<option>上海市</option>
<option>山东省</option>
<option>湖南省</option>
</select>
<select class="form-control">
<option>请选择城市</option>
<option>长沙市</option>
<option>株洲市</option>
<option>湘潭市</option>
<option>娄底市</option>
</select>
<select class="form-control">
<option>请选择区</option>
<option>娄星区</option>
<option>涟源市</option>
<option>冷水江</option>
</select>
</div>
<div class="col-sm-4">
<input type="password" class="form-control" id="company"
placeholder="请输入街道地址">
</div>
</div>

<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">您的爱好:</label>
<div class="col-sm-6">

<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 购物
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 影视
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 餐饮
</label>
</div>
</div>

<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">协议内容:</label>
<div class="col-sm-6 ">
<textarea class="form-control" rows="3"></textarea>
</div>
</div>

<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">注册</button>
</div>
</div>
</form>
</div>
</div>

</body>
</html>

【任务3-2】实现Q-Walking E&S后台管理模块-商品添加页面。

这里写图片描述

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>添加商品页面</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<ol class="breadcrumb col-sm-6 col-md-offset-3">
位置:
<li><a href="#">首页</a></li>
<li><a href="#">添加商品</a></li>
</ol>

<div class="panel panel-default col-sm-6 col-md-offset-3">
<div class="panel-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">商品缩略图:</label>
<div class="col-sm-6">
<input id="f_upload" type="file" class="file" />
</div>
</div>

<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">商品名称:</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="userName"
placeholder="请输入商品名称">
</div>
</div>

<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">商品分类:</label>
<div class="col-sm-3">
<select class="form-control">
<option>请选择分类</option>
<option>男装</option>
<option>女装</option>
<option>童装</option>
<option>运动</option>
<option>其他</option>
</select>
</div>
</div>

<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">商品单价:</label>
<div class="input-group col-sm-6">
<input type="text" class="form-control">
<span class="input-group-addon">元</span>
</div>
</div>

<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">团购价:</label>
<div class="input-group col-sm-6">
<input type="text" class="form-control">
<span class="input-group-addon">元</span>
</div>
</div>

<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">商品数量:</label>
<div class="input-group col-sm-6">
<input type="text" class="form-control">
<span class="input-group-addon">件</span>
</div>
</div>


<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">发布日期:</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="userName"
placeholder="请输入发布日期">
</div>
</div>

<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">是否审核:</label>
<div class="col-sm-3">
<select class="form-control">
<option>请选择</option>
<option>已审核</option>
<option>未审核</option>
</select>
</div>
</div>


<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">商品描述:</label>
<div class="col-sm-6 ">
<textarea class="form-control" rows="4"></textarea>
</div>
</div>


<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-danger">马上发布</button>
</div>
</div>

</form>
</div>
</div>

</body>
</html>

---------------- The End ----------------
May丶乘剑 wechat
欢迎扫描二维码关注我的微信公众号~~
0%