后台管理页面：
1
<!
DOCTYPE html
>
2
<
html
lang
="en"
>
3
<
head
>
4
<
meta
charset
="UTF-8"
>
5
<
title
>后台管理页面</title> 6 7<style type="text/css"> 8/*顶部菜单*/ 9 .pag-head{ 10 position: fixed; 11 z-index: 7; 12 top: 0; 13 left: 0; 14 right: 0; 15 height: 48px; 16 width: 100%; 17 background: #005EA7; 18 19} 20 .meun_top{ 21 height: 48px; 22 line-height: 48px; 23 width: 960px; 24/*border: 1px solid red;*/ 25 margin: 0 auto; 26} 27/*顶部菜单组*/ 28 .meuns_top{ 29 text-decoration: none; 30 color: white; 31 padding: 0px 10px 0px 10px; 32 display: inline-block; 33} 34 .meuns_top:hover{ 35 background-color: rgba(64,119,203,0.6); 36} 37 38 .clear_div{ 39 clear: both; 40} 41/*顶部菜单结束*/ 42 43 44/*下方大框*/ 45 .pag-cent{ 46 margin-top: 50px; 47 48} 49 50 51/*左侧菜单*/ 52 .left-meun{ 53 z-index: 8; 54 position: fixed; 55 top: 50px; 56 left: 55px; 57} 58 .meuns{ 59 60 background-color: #005EA7; 61 height: 45px; 62 width:150px; 63 color:white; 64 line-height: 45px; 65 text-align: center; 66} 67 .meuns:hover{ 68 background-color: rgba(64,119,203,0.6); 69} 70 .hide{ 71 display: none; 72} 73 .content{ 74 margin-left: 65%; 75} 76 .item{ 77 width:150px; 78} 79/*左侧菜单结束*/ 80 81/*下方右边内容块*/ 82 .big-content{ 83 height: 1000px; 84 border: 1px solid green; 85} 86 87 .content_right{ 88 margin: 0 auto; 89 height: 800px; 90 width: 960px; 91 border: 1px solid blueviolet; 92 93} 94 95 .hosts{ 96 margin-left: 30px; 97 margin-top: 20px; 98} 99 table{100 border-spacing: 1px;101 margin-top: 8px;102}103/*遮罩层*/104 .c1{105 position: fixed;106 z-index: 9;107/*打开多层样式 fixed模式 定义层级为9*/108 top:0;109 right:0;110 left:0;111 bottom:0;112/*上面表示全覆盖*/113 background-color: black;114/*上面为背景色 为黑 下面为透明度为50%*/115 opacity: 0.5;116}117 .c2{118 position: fixed;119 z-index: 10;120/*打开多层样式 fixed模式 定义层级为9*/121122 width:400px;123 height: 300px;124 top:50%;125 left:50%;126 margin-left: -200px;127 margin-top: -150px;128 background-color: white;129130}131 .z-z{132 width: 230px;133 height: 120px;134 margin-top: 90px;135 margin-left: 90px;136}137 hr{138 width: 230px;139}140 #cre{141 margin-left: 70px;142}143 .heds{144/*默认不显示*/145 display: none;146}147148/*下方右边内容块结束*/149150151/*返回顶部*/152 .pa-top{153 width: 68px;154 height: 48px;155 position: fixed;156 right: 25px;157 bottom: 25px;158 background-image: url(img/top.png);159 background-position: -425px -270px ;160161}162</style>163</head>164<body style="margin: 0">165<!--顶部菜单-->166<div class="pag-head">167<div class="meun_top">168<a href="" class="meuns_top">顶部菜单一</a>169<a href="" class="meuns_top">顶部菜单二</a>170<a href="" class="meuns_top">顶部菜单三</a>171<a href="" class="meuns_top">顶部菜单四</a>172<a href="" class="meuns_top">顶部菜单五</a>173<a href="" class="meuns_top">顶部菜单六</a>174</div>175<div class="clear_div">176177</div>178179</div>180<!--下方大框-->181<div class="pag-cent">182183<!--左边菜单-->184<div class="left-meun">185<div class="item">186<div id="i1" onclick="changemenu(‘i1‘)" class="meuns">菜单1</div>187<div class="content">188<div>内容1</div>189<div>内容1</div>190<div>内容1</div>191<div>内容1</div>192</div>193</div>194195<div class="item">196<div id="i2" onclick="changemenu(‘i2‘)" class="meuns">菜单2</div>197<div class="content hide">198<div>内容2</div>199<div>内容2</div>200<div>内容2</div>201<div>内容2</div>202</div>203</div>204205<div class="item">206<div id="i3" onclick="changemenu(‘i3‘)" class="meuns">菜单3</div>207<div class="content hide">208<div>内容3</div>209<div>内容3</div>210<div>内容3</div>211<div>内容3</div>212</div>213</div>214215<div class="item">216<div id="i4" onclick="changemenu(‘i4‘)" class="meuns">菜单4</div>217<div class="content hide">218<div>内容4</div>219<div>内容4</div>220<div>内容4</div>221<div>内容4</div>222223</div>224225226</div>227228</div>229230231232<!--右边内容-->233<div class="big-content">234<div class="content_right">235<div class="hosts">236<input type="button" value="添加" onclick="showmod()">237<input type="button" value="全选" onclick="Chooseall()">238<input type="button" value="取消" onclick="cancleall()">239<input type="button" value="返选" onclick="Reverseall()">240241<table border="1" id="tab">242<thead>243<tr>244<th>选择</th>245<th>主机</th>246<th>端口</th>247</tr>248</thead>249<tbody id="tb">250251<tr>252<td><input type="checkbox"></td>253<td>10.10.12.1</td>254<td>1000</td>255<tr>256<td><input type="checkbox"></td>257<td>10.10.12.2</td>258<td>1002</td>259</tr>260<tr>261<td><input type="checkbox"></td>262<td>10.10.12.3</td>263<td>1003</td>264</tr>265</tbody>266</table>267</div>268</div>269<!--遮罩层-->270<div class="c1 heds" id="z-cent"></div>271<!--对话框-->272<div class="c2 heds" id="z-first">273<div class="z-z">274<lable>主 机：</lable>275<input type="text" id="users"><br /><br />276<lable>I P：</lable>277<input type="text" id="ip_add"><br />278<hr />279<input type="button" name="" id="cre" onclick="cresc()" value="确定">280<input type="button" onclick="hidemod()" value="关闭">281</div>282283</div>284285</div>286287</div>288289290291<div class="pa-top" onclick="topy();"></div>292293294295<script type="text/javascript">296//左侧菜单js 点击函数297function changemenu(id){
298var curr_header=document.getElementById(id)//获取当前的元素对象299var itme_list=curr_header.parentElement.parentElement.children;//取得当前的上上级的所有子元素300for (var i=0;i<itme_list.length;i++){
301var curr_list=itme_list[i];
302 curr_list.children[1].classList.add(‘hide‘)//加上关闭303 }
304 curr_header.nextElementSibling.classList.remove(‘hide‘)//移除关闭305 }
306//返回顶部307function topy(){
308 document.body.scrollTop=0;
309 }
310311312313314//显示对话框315function showmod(){
316 document.getElementById(‘z-cent‘).classList.remove(‘heds‘);//移除类名 样式317 document.getElementById(‘z-first‘).classList.remove(‘heds‘);
318319 }
320//关闭对话框321function hidemod(){
322 document.getElementById(‘z-cent‘).classList.add(‘heds‘);//添加 类名323 document.getElementById(‘z-first‘).classList.add(‘heds‘);
324 }
325//添加主机 IP326function cresc(){
327var tab=document.getElementById(‘tab‘);
328var user=document.getElementById(‘users‘).value
329var ip=document.getElementById(‘ip_add‘).value
330var tradd=tab.insertRow(4)
331 tradd.style.background=‘green‘332if (user==‘‘|| ip==‘‘){
333 alert(‘主机或用户名不能为空‘)
334return0335 }
336 tradd.innerHTML=‘<td><input type="checkbox"></td><td>‘+user+‘</td><td>‘+ip+‘</td>‘337 hidemod()
338 }
339//全选340function Chooseall(){
341var tbody=document.getElementById(‘tb‘);
342var tr_list=tbody.children;//取所有子元素的列表343for (var i=0;i<tr_list.length;i++){
344var curr=tr_list[i];//取当前子元素的子元素列表345var checkbox=curr.children[0].children[0];
346 checkbox.checked=true//打上勾347 }
348 }
349350//取消351function cancleall() {
352var tbody = document.getElementById(‘tb‘);
353var tr_list = tbody.children;//取所有子元素的列表354for (var i =0; i < tr_list.length; i++) {
355var curr = tr_list[i];//取当前子元素的子元素列表356var checkbox = curr.children[0].children[0];
357 checkbox.checked =false;//取消勾358 }
359 }
360//反选 361function Reverseall() {
362var tbody = document.getElementById(‘tb‘);
363var tr_list = tbody.children;//取所有子元素的列表364for (var i =0; i < tr_list.length; i++) {
365var curr = tr_list[i];//取当前子元素的子元素列表366var checkbox = curr.children[0].children[0];
367if (checkbox.checked){
368 checkbox.checked =false;//取消勾369 }else {
370 checkbox.checked =true;//打上勾371 }
372373 }
374 }
375</script>376377</body>378</html>
商城页面：
1
<!
DOCTYPE html
>
2
<
html
>
3
<
head
>
4
<
meta
charset
="UTF-8"
>
5
<
title
></
title
>
6
<
style
type
="text/css"
>
7
/*
顶部菜单
*/
8
.top
{
9
background-color
:
#000000
;
10
color
:
#DDDDDD
;
11
}
12
.top-meun
{
13
margin
:
0 auto
;
14
width
:
1100px
;
15
height
:
32px
;
16
}
17
.top-meun a,.top-meun span
{
18
font-size
:
12px
;
19
display
:
inline-block
;
20
line-height
:
32px
;
21
padding-right
:
10px
;
22
}
23
.top-meun-left
{
24
float
:
left
;
25
}
26
.top-meun-right
{
27
float
:
right
;
28
}
29
.top-meun-right span
{
30
color
:
red
;
31
}
32
/*
a标签 去下划线
*/
33
a
{
34
text-decoration
:
none
;
35
color
:
#DDDDDD
;
36
}
37
/*
返回顶部
*/
38
.top-s
{
39
position
:
fixed
;
40
top
:
160px
;
41
right
:
250px
;
42
width
:
60px
;
43
height
:
150px
;
44
/*
border: 1px solid darkred;
*/
45
}
46
47
ul
{
48
list-style-type
:
none
;
49
}
50
51
#jcSide li a
{
52
display
:
inline-block
;
53
list-style-type
:
none
;
54
55
background-color
:
#c41240
;
56
width
:
45px
;
57
height
:
45px
;
58
margin-left
:
5px
;
59
margin-top
:
5px
;
60
text-align
:
center
;
61
62
}
63
#jcSide li
{
64
65
margin
:
5px
;
66
width
:
55px
;
67
height
:
55px
;
68
background-color
:
#c41240
;
69
}
70
#jcSide li a:hover
{
71
background-color
:
white
;
72
color
:
#c41240
;
73
}
74
#jcSide li span
{
75
font-weight
:
bolder
;
76
}
77
/*
上方LOGO
*/
78
79
.logo-big
{
80
height
:
93px
;
81
background-image
:
url(img/v_index_bg.png)
;
82
}
83
.logo
{
84
margin
:
0 auto
;
85
width
:
1100px
;
86
position
:
relative
;
87
}
88
.logo-img,.search
{
89
float
:
left
;
90
}
91
.search
{
92
position
:
absolute
;
93
left
:
185px
;
94
top
:
18px
;
95
border
:
1px solid red
;
96
height
:
45px
;
97
98
}
99
.search select,#search-id
{
100
display
:
inline-block
;
101
line-height
:
45px
;
102
width
:
100px
;
103
height
:
45px
;
104
padding
:
0 0
;
105
margin
:
0 0
;
106
}
107
/*
搜索框
*/
108
#search-id
{
109
width
:
400px
;
110
height
:
41px
;
111
}
112
.img-small
{
113
position
:
absolute
;
114
top
:
15px
;
115
right
:
10px
;
116
height
:
20px
;
117
width
:
20px
;
118
background-image
:
url(img/sprite-photo-search.png)
;
119
}
120
.img-big
{
121
background-color
:
#e20052
;
122
position
:
absolute
;
123
position
:
relative
;
124
top
:
18px
;
125
left
:
700px
;
126
width
:
47px
;
127
height
:
47px
;
128
}
129
130
#a-img
{
131
position
:
absolute
;
132
background-image
:
url(img/v_hd_bg1.png)
;
133
top
:
1px
;
134
left
:
14px
;
135
background-position
:
0px -60px
;
136
background-repeat
:
no-repeat
;
137
width
:
50px
;
138
height
:
50px
;
139
}
140
.hot
{
141
font-size
:
12px
;
142
position
:
absolute
;
143
top
:
32px
;
144
left
:
758px
;
145
color
:
#646363
;
146
}
147
.hot a
{
148
color
:
#474545
;
149
}
150
151
/*
中间菜单
*/
152
.meun_centr
{
153
background-color
:
#740d92
;
154
}
155
.meun_centr-big
{
156
margin
:
0 auto
;
157
width
:
1100px
;
158
height
:
40px
;
159
}
160
.meun_centr-big a
{
161
display
:
inline-block
;
162
line-height
:
40px
;
163
font-size
:
13px
;
164
font-weight
:
bolder
;
165
padding
:
0 10px 0 10px
;
166
text-align
:
center
;
167
}
168
.meun_centr-big a:hover
{
169
background-color
:
#c41240
;
170
}
171
172
.centr-left
{
173
float
:
left
;
174
}
175
.centr-right
{
176
float
:
right
;
177
}
178
179
/*
中间菜单下方
*/
180
.meun-down
{
181
height
:
15px
;
182
background-color
:
#c41240
;
183
}
184
/*
中间内容
*/
185
.content
{
186
187
background-image
:
url(img/v_index_bg.png)
;
188
}
189
.cont-cent ,.footer-noe,.mag,.down
{
190
margin
:
0 auto
;
191
width
:
1100px
;
192
/*
border: 2px solid #740D92;
*/
193
}
194
195
196
.cont-cent-left
{
197
float
:
left
;
198
width
:
820px
;
199
/*
border: 1px dashed;
*/
200
}
201
.new
{
202
height
:
82px
;
203
}
204
.list-li, .list ul,.list
{
205
margin
:
0 0
;
206
padding
:
0 0
;
207
}
208
209
.list-li
{
210
margin
:
0 0
;
211
padding
:
0 0
;
212
width
:
820px
;
213
height
:
230px
;
214
background-color
:
gainsboro
;
215
216
}
217
.list
{
218
margin-bottom
:
10px
;
219
}
220
/*
.list-li:hover{
221
border: 2px solid #C41240;
222
}
*/
223
.a-big
{
224
position
:
relative
;
225
display
:
block
;
226
width
:
820px
;
227
height
:
230px
;
228
background-color
:
black
;
229
}
230
.a-big:hover
{
231
border
:
4px solid #C41240
;
232
background-color
:
#C41240
;
233
}
234
235
.shop_name,.time,.left_shadow
{
236
position
:
absolute
;
237
}
238
.shop_name
{
239
display
:
inline-block
;
240
line-height
:
30px
;
241
width
:
230px
;
242
bottom
:
0px
;
243
left
:
0px
;
244
color
:
white
;
245
background-color
:
black
;
246
font-size
:
14px
;
247
text-align
:
center
;
248
}
249
.shop_name:hover
{
250
background-color
:
#C41240
;
251
}
252
253
.left_shadow
{
254
left
:
5px
;
255
top
:
5px
;
256
text-align
:
center
;
257
}
258
259
.time
{
260
width
:
590px
;
261
height
:
30px
;
262
right
:
0
;
263
bottom
:
0px
;
264
background-color
:
white
;
265
text-align
:
left
;
266
line-height
:
30px
;
267
font-size
:
12px
;
268
color
:
#000000
;
269
}
270
.sale
{
271
display
:
inline-block
;
272
width
:
220px
;
273
height
:
20px
;
274
background-color
:
white
;
275
color
:
red
;
276
font-size
:
14px
;
277
padding-top
:
80px
;
278
279
}
280
.shop_ad
{
281
text-align
:
center
;
282
margin
:
0 auto
;
283
font-size
:
12px
;
284
color
:
#696969
;
285
}
286
/*
右边内容
*/
287
.cont-cent-right
{
288
float
:
right
;
289
width
:
270px
;
290
height
:
960px
;
291
/*
border: 1px dashed;
*/
292
}
293
294
.gif
{
295
margin-top
:
82px
;
296
width
:
220px
;
297
height
:
200px
;
298
}
299
300
301
/*
底部开始
*/
302
.footer-noe-right
{
303
float
:
right
;
304
display
:
inline-block
;
305
line-height
:
76px
;
306
height
:
66px
;
307
width
:
235px
;
308
309
}
310
.foot-span
{
311
float
:
left
;
312
display
:
inline-block
;
313
height
:
52px
;
314
width
:
138px
;
315
/*
margin-top: 15px;
316
margin-left: 15px;
*/
317
margin
:
15px 15px 15px 15px
;
318
}
319
#footer-img-4
{
320
background-image
:
url(img/footer_bg.png)
;
321
}
322
#footer-img-3
{
323
background-image
:
url(img/footer_bg.png)
;
324
background-position-y
:
-52px
;
325
}
326
#footer-img-2
{
327
background-image
:
url(img/footer_bg.png)
;
328
background-position-y
:
-104px
;
329
}
330
#footer-img-1
{
331
background-image
:
url(img/footer_bg.png)
;
332
background-position-y
:
-156px
;
333
}
334
335
footer
{
336
border-top
:
3px solid red
;
337
background-color
:
#fafafa
;
338
border-bottom
:
1px solid #DCDCDC
;
339
}
340
341
/*
下方信息
*/
342
.footer_sort
{
343
margin-top
:
30px
;
344
width
:
154px
;
345
float
:
left
;
346
text-align
:
center
;
347
}
348
.f_title
{
349
padding-left
:
23px
;
350
display
:
inline-block
;
351
text-align
:
center
;
352
width
:
145px
;
353
}
354
.f_title ul
{
355
width
:
145px
;
356
text-align
:
left
;
357
/*
padding-left: 10px;
*/
358
list-style
:
none
;
359
margin
:
0
;
360
}
361
.f_title ul li
{
362
363
line-height
:
20px
;
364
height
:
20px
;
365
}
366
.f_title ul li a
{
367
368
}
369
370
.footer_sort a
{
371
color
:
black
;
372
font-size
:
12px
;
373
}
374
375
/*
最下方底疗
*/
376
.footer_nav a
{
377
margin
:
15px
;
378
}
379
.footer_nav_box a, .footer_nav_box
{
380
color
:
#8c8c8c
;
381
font-size
:
12px
;
382
text-decoration
:
none
;
383
}
384
385
.footer_nav_box .footer_nav
{
386
text-align
:
center
;
387
line-height
:
20px
;
388
padding-bottom
:
17px
;
389
}
390
.footer_nav_box .footer_copyright
{
391
line-height
:
20px
;
392
text-align
:
center
;
393
width
:
960px
;
394
margin
:
0 auto
;
395
}
396
397
.footer_nav_box
{
398
padding-bottom
:
70px
;
399
}
400
401
/*
清除浮动
*/
402
.div_float
{
403
clear
:
both
;
404
}
405
</
style
>
406
</
head
>
407
<
body
style
="margin: 0;"
>
408
<!--
上方菜单
-->
409
<
div
class
="top"
>
410
<
div
class
="top-meun"
>
411
<
div
class
="top-meun-left"
>
412
<
span
>欢迎光临当当，</span>413<a href="登陆页面.html">请登陆</a>414<a href="注册页面.html">成为会员</a>415</div>416<div class="top-meun-right">417<a href="#">购物车</a><span>0</span>418<a href="#">我的订单</a>419<a href="#">原创征文</a>420<a href="#"><img src=""/>手机当当</a>421<a href="#">我的当当</a>422<a href="#">企业采购</a>423<a href="#">客户服务</a>424</div>425426</div>427<div class="div_float"></div>428</div>429430<!--top返回顶部 -->431<div class="top-s">432<ul id="jcSide">433<li id="back_1"><a href="javascript:;" class="maobackvip" rel="po1">今日<span>最新</span></a></li>434<li id="back_2"><a href="javascript:;" class="maobackvip" rel="po2">最后<span>疯抢</span></a></li>435<li id="back_3"><a href="javascript:;" class="maobackvip" rel="po3">即将<span>开售</span></a></li>436<li onclick="topy()"><a href="javascript:;" class="v_back_top" id="back_to_top"><br /><span>TOP</span></a></li>437</ul>438439</div>440<!--上方logo-->441<div class="logo-big">442<div class="logo">443<div class="logo-img">444<a href="3"><img src="img/v_logo.png"/></a>445</div>446<div class="search">447<select name="all-meun">448<option value="#">全部分类</option>449<option value="#">尾品汇</option>450<option value="#">图书</option>451<option value="#">电子书</option>452<option value="#">时尚美妆</option>453<option value="#">玩具</option>454<option value="#">家居日用</option>455</select>456<input type="text" name="" id="search-id" value="图书"/>457<span class="img-small"></span>458</div>459<div class="img-big"><a href="" id="a-img"></a></div>460<span class="hot">大家都在搜：
461<a href="#" name="hotword" target="_blank">初语</a>462<a href="#" name="hotword" target="_blank">AMII</a>463<a href="#" name="hotword" target="_blank">连衣裙</a>464</span>465</div>466<div class="div_float"></div>467</div>468469<!--中间的菜单-->470<div class="meun_centr">471<div class="meun_centr-big">472<div class="centr-left">473<a href="#">当当首页</a>474<a href="#">尾品汇</a>475<a href="#">孕婴服饰</a>476<a href="#">家居日用</a>477<a href="#">家具装饰</a>478<a href="#">箱包皮具</a>479<a href="#">手表饰品</a>480<a href="#">运动户外</a>481<a href="#">汽车用品</a>482</div>483<div class="centr-right">484<a href="#">收藏此页</a>485</div>486487</div>488<div class="div_float"></div>489</div>490<!--中间的菜单下方-->491<div class="meun-down">492493</div>494495496<!--中间内容-->497<div class="content">498<div class="cont-cent">499<div class="cont-cent-left">500<div class="new">501<img src="img/jinrizuixin.png"/>502</div>503504<div class="list">505<ul>506<li class="list-li">507<a href="#" target="_blank" class="a-big">508<img src="img/177030034604248_1_o.jpg">509<span class="shop_name">七匹狼全场低至2折起</span>510<span class="time">511<span overtype="1" js="true" action="countdown" type="seckill" class="time_hs" endvalue="150121600" showtype="3">512<span sec="sep">还剩 <span>3</span>天 </span>513</span>514</span>515<span class="left_shadow">516<span class="img_logo">517<img data-original="" src="img/177030034604250_1_o.jpg" style="display: block;">518</span>519<span class="shop_ad">七匹狼，中国知名品牌！</span><br />520<span class="sale"></span>521</span>522<span class="red_circle" style="display: none;"></span>523</a>524</li>525</ul>526</div>527528<div class="list">529<ul>530<li class="list-li">531<a href="#" target="_blank" class="a-big">532<img src="img/182870031157919_1_o.jpg">533<span class="shop_name">全场低至2折起</span>534<span class="time">535<span overtype="1" js="true" action="countdown" type="seckill" class="time_hs" endvalue="150121600" showtype="3">536<span sec="sep">还剩 <span>2</span>天 </span>537</span>538</span>539<span class="left_shadow">540<span class="img_logo">541<img data-original="" src="img/182870031157922_1_o.jpg" style="display: block;">542</span>543<span class="shop_ad">喜欢自己 表现到底</span><br />544545<span class="sale"></span>546</span>547<span class="red_circle" style="display: none;"></span>548</a>549</li>550</ul>551</div>552553554<div class="list">555<ul>556<li class="list-li">557<a href="#" target="_blank" class="a-big">558<img src="img/184840026912612_1_o.jpg">559<span class="shop_name">全场低至2折起</span>560<span class="time">561<span overtype="1" js="true" action="countdown" type="seckill" class="time_hs" endvalue="150121600" showtype="3">562<span sec="sep">还剩 <span>2</span>天 </span>563</span>564</span>565<span class="left_shadow">566<span class="img_logo">567<img data-original="" src="img/184840026912614_1_o.jpg" style="display: block;">568</span>569<span class="shop_ad">喜欢自己 表现到底</span><br />570<span class="sale">满200减120</span>571</span>572<span class="red_circle" style="display: none;"></span>573</a>574</li>575</ul>576</div>577578579580<div class="list">581<ul>582<li class="list-li">583<a href="#" target="_blank" class="a-big">584<img src="img/177030034604248_1_o.jpg">585<span class="shop_name">七匹狼全场低至2折起</span>586<span class="time">587<span overtype="1" js="true" action="countdown" type="seckill" class="time_hs" endvalue="150121600" showtype="3">588<span sec="sep">还剩 <span>3</span>天 </span>589</span>590</span>591<span class="left_shadow">592<span class="img_logo">593<img data-original="" src="img/177030034604250_1_o.jpg" style="display: block;">594</span>595<span class="shop_ad">七匹狼，中国知名品牌！</span><br />596<span class="sale"></span>597</span>598<span class="red_circle" style="display: none;"></span>599</a>600</li>601</ul>602</div>603604<div class="list">605<ul>606<li class="list-li">607<a href="#" target="_blank" class="a-big">608<img src="img/182870031157919_1_o.jpg">609<span class="shop_name">全场低至2折起</span>610<span class="time">611<span overtype="1" js="true" action="countdown" type="seckill" class="time_hs" endvalue="150121600" showtype="3">612<span sec="sep">还剩 <span>2</span>天 </span>613</span>614</span>615<span class="left_shadow">616<span class="img_logo">617<img data-original="" src="img/182870031157922_1_o.jpg" style="display: block;">618</span>619<span class="shop_ad">喜欢自己 表现到底</span><br />620621<span class="sale"></span>622</span>623<span class="red_circle" style="display: none;"></span>624</a>625</li>626</ul>627</div>628629630<div class="list">631<ul>632<li class="list-li">633<a href="#" target="_blank" class="a-big">634<img src="img/184840026912612_1_o.jpg">635<span class="shop_name">全场低至2折起</span>636<span class="time">637<span overtype="1" js="true" action="countdown" type="seckill" class="time_hs" endvalue="150121600" showtype="3">638<span sec="sep">还剩 <span>2</span>天 </span>639</span>640</span>641<span class="left_shadow">642<span class="img_logo">643<img data-original="" src="img/184840026912614_1_o.jpg" style="display: block;">644</span>645<span class="shop_ad">喜欢自己 表现到底</span><br />646<span class="sale">满200减120</span>647</span>648<span class="red_circle" style="display: none;"></span>649</a>650</li>651</ul>652</div>653654655656</div>657658659660<div class="cont-cent-right">661<div class="gif">662<img src="img/slogan.gif.gif"/>663</div>664<img src="img/tushu.png"/>665<img src="img/tongshutemai.jpg"/>666<img src="img/tushu211_1030.jpg"/>667<div class="div-right">668<div class="">669<img src="img/jijiangkaish (1).png"/>670</div>671672</div>673</div>674675</div>676<div class="div_float"></div>677</div>678679<!--底部-->680<footer>681<div class="footer-noe">682<a class="footer-noe-right" href="#">683<span id="footer-img-1" class="foot-span"></span>684</a>685<a class="footer-noe-right" href="#">686<span id="footer-img-2" class="foot-span"></span>687</a>688<a class="footer-noe-right" href="#">689<span id="footer-img-3" class="foot-span"></span>690</a>691<a class="footer-noe-right" href="#">692<span id="footer-img-4" class="foot-span"></span>693</a>694</div>695<div class="div_float"></div>696</footer>697<!--下方信息块-->698<div class="shop-wit">699<div class="mag">700701<div class="public_footer_new">702<div class="footer_sort footer_nvice">703<span class="f_title">购物指南</span>704<ul>705<li><a name="foot_gouwu" href="#" target="_blank" class="main" rel="nofollow">购物流程</a></li>706<li><a name="foot_jifen" href="#" target="_blank" rel="nofollow">发票制度</a></li>707<li><a name="foot_fapiao" href="#" target="_blank" rel="nofollow">账户管理</a></li>708<li><a name="foot_mydangdang" href="#" target="_blank" rel="nofollow">会员优惠</a></li>709</ul>710</div>711<div class="footer_sort footer_pay">712<span class="f_title">支付方式</span>713<ul>714<li><a name="foot_tuihuanhuoliucheng" href="#" target="_blank" rel="nofollow">货到付款</a></li>715<li><a name="foot_tuihuanhuo" href="#" target="_blank" rel="nofollow">网上支付</a></li>716<li><a name="foot_huanhuo" href="#" target="_blank" rel="nofollow">礼品卡支付</a></li>717<li><a name="foot_tuihuo" href="#" target="_blank" rel="nofollow">银行转帐</a></li>718</ul>719</div>720<div class="footer_sort footer_characteristic">721<span class="f_title">订单服务</span>722<ul>723<li><a name="foot_jifen" href="#" target="_blank" class="main" rel="nofollow">订单配送查询</a></li>724<li><a name="foot_lipinka" href="#" target="_blank" rel="nofollow">订单状态说明</a></li>725<li><a name="foot_ershoushu" href="#r" target="_blank" rel="nofollow">自助取消订单</a></li>726<li><a name="foot_shouji" href="#" target="_blank" rel="nofollow">自助修改订单</a></li>727</ul>728</div>729<div class="footer_sort footer_distribution">730<span class="f_title">配送方式</span>731<ul>732<li><a name="foot_huodaofukuan" href="#" target="_blank" class="main" rel="nofollow">配送范围及免邮标准</a></li>733<li><a name="foot_yinhangzhuanzhang" href="#" target="_blank" class="main" rel="nofollow">当日递/次日达</a></li>734<li><a name="foot_dangdanglijuan" href="#" target="_blank" rel="nofollow">订单自提</a></li>735<li><a name="foot_dangdanglijuan" href="#" target="_blank" rel="nofollow">验货与签收</a></li>736</ul>737</div>738<div class="footer_sort footer_help">739<span class="f_title">退换货</span>740<ul>741<li><a name="foot_faq" href="#" target="_blank" rel="nofollow">退换货政策</a></li>742<li><a name="foot_zhaohuimima" href="#" target="_blank" rel="nofollow">自助申请退换货</a></li>743<li><a name="foot_huikuandan" href="#" target="_blank" rel="nofollow">退换货进度查询</a></li>744<li><a name="foot_tuiding" href="#" target="_blank" rel="nofollow">退款方式和时间</a></li>745</ul>746</div>747<div class="footer_sort footer_shangjia">748<span class="f_title">商家服务</span>749<ul>750751<li><a name="foot_zhaohuimima" href="#" target="_blank" rel="nofollow">商家中心</a></li>752<li><a name="foot_huikuandan" href="#" target="_blank" rel="nofollow">运营服务</a></li>753<li><a name="foot_tuiding" href="#" target="_blank" rel="nofollow">加入尾品汇</a></li>754</ul>755</div>756</div>757758759760761762</div>763<div class="div_float"></div>764</div>765766767768<!--最底部-->769<div class="footer-down">770<!--<div class="down">-->771<div class="footer_nav_box">772<div class="footer_nav">773<a href="#" target="_blank" rel="nofollow">公司简介</a>774<span class="sep">|</span>775<a href="#" target="_blank">Investor Relations</a>776<span class="sep">|</span>777<a href="#" target="_blank">诚聘英才</a>778<span class="sep">|</span>779<a href="#" target="_blank">网站联盟</a>780<span class="sep">|</span>781<a href="#" target="_blank">当当招商</a>782<span class="sep">|</span>783<a href="#" target="_blank" rel="nofollow">机构销售</a>784<span class="sep">|</span>785<a href="#" target="_blank">手机当当</a>786<span class="sep">|</span>787<a href="#" target="_blank">官方 Blog</a>788<span class="sep">|</span>789<a href="#" target="_blank">热词搜索</a>790</div>791792<div class="footer_copyright">793<span>Copyright (C) 当当网 2004-2017, All Rights Reserved</span>794<a href="#" target="_blank" class="footer_img" rel="nofollow"><img src="img/validate.gif" target="_blank" rel="nofollow">京ICP证041189号</a>795<span>出版物经营许可证 新出发京批字第直0673号</span>796</div>797798</div>799800801<!--</div>-->802<div class="div_float"></div>803804</div>805806807<script type="text/javascript">808//返回顶部809function topy(){
810 document.body.scrollTop=0;
811 }
812</script>813814</body>815</html>
注册页面：
1
<!
DOCTYPE html
>
2
<
html
>
3
<
head
>
4
<
meta
charset
="UTF-8"
>
5
<
title
></
title
>
6
<
style
type
="text/css"
>
7
8
/*
顶部菜单
*/
9
.top-meun
{
10
background-color
:
#DDDDDD
;
11
}
12
.top-one
{
13
margin
:
0 auto
;
14
width
:
960px
;
15
height
:
32px
;
16
17
18
}
19
.top-meun a
{
20
display
:
inline-block
;
21
line-height
:
32px
;
22
font-size
:
14px
;
23
padding-right
:
15px
;
24
text-decoration
:
none
;
25
color
:
dimgray
;
26
}
27
.top-meun-left
{
28
float
:
left
;
29
}
30
.top-meun-right
{
31
float
:
right
;
32
}
33
/*
logo 框
*/
34
35
.logo
{
36
padding-top
:
18px
;
37
margin
:
0 auto
;
38
/*
top: 50px;
39
left: 10px;
*/
40
width
:
960px
;
41
height
:
80px
;
42
}
43
44
/*
外边大框
*/
45
.oustd
{
46
margin
:
0 auto
;
47
width
:
960px
;
48
}
49
/*
注册框
*/
50
51
.rest
{
52
53
border
:
5px solid #dddddd
;
54
top
:
150px
;
55
width
:
960px
;
56
height
:
600px
;
57
58
}
59
60
/*
左边
*/
61
62
h2
{
63
margin-top
:
10px
;
64
}
65
.rest_left
{
66
padding-left
:
50px
;
67
position
:
relative
;
68
width
:
550px
;
69
height
:
600px
;
70
border-right
:
1px solid blueviolet
;
71
float
:
left
;
72
}
73
.rest_left input
{
74
width
:
220px
;
75
height
:
30px
;
76
padding-right
:
35px
;
77
}
78
span
{
79
color
:
red
;
80
81
}
82
.users
{
83
margin-top
:
55px
;
84
padding-top
:
5px
;
85
clear
:
both
;
86
87
}
88
.users_u
{
89
margin
:
70px 10px
;
90
}
91
.users_user
{
92
position
:
relative
;
93
float
:
left
;
94
width
:
300px
;
95
/*
border: 1px solid blue;
*/
96
}
97
.sp
{
98
display
:
inline-block
;
99
line-height
:
30px
;
100
width
:
100px
;
101
float
:
left
;
102
/*
border: 3px solid black;
*/
103
}
104
.sp-1
{
105
height
:
30px
;
106
width
:
100px
;
107
}
108
.sp label
{
109
float
:
right
;
110
}
111
112
/*
验证码
*/
113
114
115
#yzm
{
116
float
:
left
;
117
width
:
70px
;
118
height
:
30px
;
119
}
120
#img_yzm a
{
121
float
:
left
;
122
width
:
70px
;
123
height
:
30px
;
124
background-image
:
url(img/view.png)
;
125
background-position-x
:
-25px
;
126
background-position-y
:
5px
;
127
margin
:
0 0
;
128
padding
:
0 0
;
129
130
/*
display: inline-block;
131
line-height: 45px;
*/
132
}
133
.auto_left
{
134
float
:
left
;
135
font-size
:
12px
;
136
padding-right
:
15px
;
137
}
138
#check_left
{
139
display
:
inline
;
140
width
:
15px
;
141
height
:
15px
;
142
}
143
#auto_logo
{
144
color
:
black
;
145
}
146
#logoing,.rest-q
{
147
background-color
:
red
;
148
149
width
:
200px
;
150
text-align
:
center
;
151
display
:
inline-block
;
152
line-height
:
30px
;
153
154
}
155
156
157
/*
清除浮动
*/
158
.div_float
{
159
clear
:
both
;
160
}
161
162
163
#logoing a,.rest-q a
{
164
165
text-decoration
:
none
;
166
color
:
white
;
167
}
168
169
170
/*
右边
*/
171
.rest_right
{
172
/*
background-repeat: no-repeat;
173
*/
174
float
:
right
;
175
width
:
350px
;
176
height
:
600px
;
177
/*
border: 1px solid red;
*/
178
text-align
:
center
;
179
180
}
181
182
.ld-div
{
183
margin-top
:
50px
;
184
}
185
.ld-div span
{
186
color
:
black
;
187
}
188
.img-right
{
189
margin-top
:
50px
;
190
width
:
200px
;
191
border
:
0
;
192
}
193
</
style
>
194
</
head
>
195
<
body
style
="margin: 0;"
>
196
<!--
顶部菜单
-->
197
<
div
class
="top-meun"
>
198
<
div
class
="top-one"
>
199
<
div
class
="top-meun-left"
>
200
<
a
href
="3"
>收藏本站</a>201</div>202<div class="top-meun-right">203<a href="登陆页面.html" target="_blank">登陆</a>204<a href="注册页面.html">免费注册</a>205<a href="#">我的订单</a>206<a href="#">VIP会员俱乐部</a>207<a href="#">客户服务</a>208</div>209210</div>211<div class="div_float"></div>212213</div>214215216<div class="logo"><a href="#"><img src="img/logo.png"/></a></div>217218<div class="oustd">219220221222<!--注册框-->223<div class="rest">224<!--左边-->225<div class="rest_left">226<div class="users">227<h2>注册新用户</h2>228</div>229230<div class="users">231<div class="sp">232<label><span>*</span>用户名：</label>233</div>234<div class="users_user">235<input type="text" name="" id="" value=""/>236<samp id="img-user"></samp>237</div>238</div>239240<div class="users">241<div class="sp">242<label><span>*</span>手机号：</label>243</div>244<div class="users_user">245<input type="text" name="" id="" value=""/>246<samp id="img-user"></samp>247</div>248</div>249250<div class="users">251<div class="sp">252<label><span>*</span>登陆密码：</label>253</div>254<div class="users_user">255<input type="text" name="" id="" value=""/>256<samp id="img-pwd"></samp>257</div>258</div>259260<div class="users">261<div class="sp">262<label><span>*</span>确认密码：</label>263</div>264<div class="users_user">265<input type="text" name="" id="" value=""/>266<samp id="img-pwd"></samp>267</div>268</div>269270<div class="users">271<div class="sp">272<label><span>*</span>验证码：</label>273</div>274<div class="users_user">275<input type="text" name="" id="yzm" value=""/>276<span id="img_yzm"><a href=""></a></span>277</div>278</div>279280<div class="users ">281<div class="sp sp-1">282</div>283<div class="users_user ">284<input type="checkbox" name="" class="auto_left" id="check_left" value=""/>285<span class="auto_left" id="auto_logo">我已阅读并同意</span>286<a href="#" class="auto_left"><<用户注册协议>></a>287</div>288</div>289290<div class="users">291<div class="sp sp-1">292</div>293<div class="users_user" id="logoing"><a href="#">同意以上协议并注册</a>294</div>295</div>296297298299</div>300<!--右边-->301<div class="rest_right">302<div class="ld-div">303<span id="dl">304 我已经注册，现在就
305</span>306<a href="登陆页面.html" target="_blank">登陆</a>307</div>308<img src="img/right.jpeg" class="img-right" alt="这是一张风景画！" title="好看吗？"/>309</div>310</div>311312313<div class="div_float"></div>314315</div>316</body>317</html>
登陆页面：
1
<!
DOCTYPE html
>
2
<
html
>
3
<
head
>
4
<
meta
charset
="UTF-8"
>
5
<
title
></
title
>
6
<
style
type
="text/css"
>
7
8
/*
logo 框
*/
9
10
.logo
{
11
margin
:
0 auto
;
12
top
:
50px
;
13
left
:
10px
;
14
width
:
960px
;
15
height
:
80px
;
16
}
17
18
/*
外边大框
*/
19
.oustd
{
20
margin
:
0 auto
;
21
width
:
960px
;
22
}
23
/*
登陆框
*/
24
25
.rest
{
26
27
border
:
5px solid #dddddd
;
28
top
:
150px
;
29
width
:
960px
;
30
height
:
400px
;
31
}
32
/*
左边
*/
33
.rest_left
{
34
/*
background-repeat: no-repeat;
35
*/
36
float
:
left
;
37
width
:
450px
;
38
height
:
400px
;
39
/*
border: 1px solid red;
*/
40
text-align
:
center
;
41
42
}
43
.rest_left a
{
44
background-image
:
url(img/left.jpg)
;
45
background-repeat
:
no-repeat
;
46
text-decoration
:
none
;
47
display
:
inline-block
;
48
line-height
:
315px
;
49
width
:
315px
;
50
height
:
315px
;
51
margin-top
:
45px
;
52
53
/*
border: 1px solid green;
*/
54
}
55
/*
右边
*/
56
.rest_right
{
57
position
:
relative
;
58
width
:
505px
;
59
height
:
400px
;
60
/*
border: 1px solid blueviolet;
*/
61
float
:
right
;
62
}
63
.rest_right input
{
64
width
:
260px
;
65
height
:
30px
;
66
padding-right
:
35px
;
67
}
68
span
{
69
color
:
red
;
70
71
}
72
.users
{
73
margin-top
:
55px
;
74
padding-top
:
5px
;
75
clear
:
both
;
76
77
}
78
.users_u
{
79
margin
:
70px 10px
;
80
}
81
.users_user
{
82
position
:
relative
;
83
float
:
left
;
84
width
:
300px
;
85
/*
border: 1px solid blue;
*/
86
}
87
.sp
{
88
display
:
inline-block
;
89
line-height
:
30px
;
90
width
:
100px
;
91
float
:
left
;
92
/*
border: 3px solid black;
*/
93
}
94
.sp-1
{
95
height
:
30px
;
96
width
:
100px
;
97
}
98
.sp label
{
99
float
:
right
;
100
}
101
/*
输入框 小图标
*/
102
#img-user,#img-pwd
{
103
position
:
absolute
;
104
background-image
:
url(img/user.jpg)
;
105
background-position
:
-86px -150px
;
106
height
:
25px
;
107
width
:
25px
;
108
/*
border: 1px solid red;
*/
109
right
:
5px
;
110
top
:
5px
;
111
display
:
inline-block
;
112
}
113
#img-pwd
{
114
background-position
:
-275px -320px
;
115
}
116
/*
验证码
*/
117
118
119
#yzm
{
120
float
:
left
;
121
width
:
70px
;
122
height
:
30px
;
123
}
124
#img_yzm a
{
125
float
:
left
;
126
width
:
70px
;
127
height
:
30px
;
128
background-image
:
url(img/view.png)
;
129
background-position-x
:
-25px
;
130
background-position-y
:
5px
;
131
margin
:
0 0
;
132
padding
:
0 0
;
133
134
/*
display: inline-block;
135
line-height: 45px;
*/
136
}
137
.auto_left
{
138
float
:
left
;
139
font-size
:
12px
;
140
padding-right
:
15px
;
141
}
142
#check_left
{
143
display
:
inline
;
144
width
:
15px
;
145
height
:
15px
;
146
}
147
#auto_logo
{
148
color
:
black
;
149
}
150
#logoing,.rest-q
{
151
background-color
:
red
;
152
153
width
:
200px
;
154
text-align
:
center
;
155
display
:
inline-block
;
156
line-height
:
30px
;
157
158
}
159
/*
免费注册
*/
160
.rest-q
{
161
width
:
100px
;
162
height
:
30px
;
163
background-color
:
green
;
164
position
:
absolute
;
165
right
:
0
;
166
bottom
:
0
;
167
}
168
169
/**/
170
.div_float
{
171
clear
:
both
;
172
}
173
/*
下方
*/
174
.footer
{
175
margin
:
0 auto
;
176
top
:
560px
;
177
width
:
960px
;
178
text-align
:
center
;
179
}
180
181
#logoing a,.rest-q a
{
182
183
text-decoration
:
none
;
184
color
:
white
;
185
}
186
187
</
style
>
188
</
head
>
189
<
body
>
190
<
div
class
="logo"
><
a
href
="#"
><
img
src
="img/logo.png"
/></
a
></
div
>
191
192
<
div
class
="oustd"
>
193
194
195
196
<!--
注册框
-->
197
<
div
class
="rest"
>
198
<!--
左边
-->
199
<
div
class
="rest_left"
>
200
<
a
href
="#"
></
a
>
201
</
div
>
202
203
<!--
右边
-->
204
<
div
class
="rest_right"
>
205
<
div
class
="users"
>
206
<
div
class
="sp"
>
207
<
label
><
span
>*</span>用户名：</label>208</div>209<div class="users_user">210<input type="text" name="" id="" value=""/>211<samp id="img-user"></samp>212</div>213</div>214215<div class="users">216<div class="sp">217<label><span>*</span>密码：</label>218</div>219<div class="users_user">220<input type="text" name="" id="" value=""/>221<samp id="img-pwd"></samp>222</div>223</div>224225<div class="users">226<div class="sp">227<label><span>*</span>验证码：</label>228</div>229<div class="users_user">230<input type="text" name="" id="yzm" value=""/>231<span id="img_yzm"><a href=""></a></span>232</div>233</div>234235<div class="users ">236<div class="sp sp-1">237</div>238<div class="users_user ">239<input type="checkbox" name="" class="auto_left" id="check_left" value=""/>240<span class="auto_left" id="auto_logo">自动登陆</span>241<a href="#" class="auto_left">忘记密码</a>242</div>243</div>244245<div class="users">246<div class="sp sp-1">247</div>248<div class="users_user" id="logoing"><a href="#">登陆</a>249</div>250</div>251252253<div class="rest-q"><a href="注册页面.html" target="_blank">免费注册》</a></div>254</div>255256</div>257258<div class="div_float"></div>259260</div>261262263<!--下方-->264<footer class="footer">265<p>Copyright ?老男孩教育. All Rights Reserved.</p>266</footer>267</body>268</html>
原文：http://www.cnblogs.com/uge3/p/7235935.html
【说明】：本文章由站长整理发布，文章内容不代表本站观点，如文中有侵权行为，请与本站客服联系(QQ:254677821)！