后台管理页面：
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*/ 121 122 width:400px; 123 height: 300px; 124 top:50%; 125 left:50%; 126 margin-left: -200px; 127 margin-top: -150px; 128 background-color: white; 129 130 } 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 } 147 148 /*下方右边内容块结束*/ 149 150 151 /*返回顶部*/ 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 ; 160 161 } 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"> 176 177 </div> 178 179 </div> 180 <!--下方大框--> 181 <div class="pag-cent"> 182 183 <!--左边菜单--> 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> 194 195 <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> 204 205 <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> 214 215 <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> 222 223 </div> 224 225 226 </div> 227 228 </div> 229 230 231 232 <!--右边内容--> 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()"> 240 241 <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"> 250 251 <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> 282 283 </div> 284 285 </div> 286 287 </div> 288 289 290 291 <div class="pa-top" onclick="topy();"></div> 292 293 294 295 <script type="text/javascript"> 296 //左侧菜单js 点击函数 297 function changemenu(id){ 298 var curr_header=document.getElementById(id)//获取当前的元素对象 299 var itme_list=curr_header.parentElement.parentElement.children;//取得当前的上上级的所有子元素 300 for (var i=0;i<itme_list.length;i++){ 301 var curr_list=itme_list[i]; 302 curr_list.children[1].classList.add('hide')//加上关闭 303 } 304 curr_header.nextElementSibling.classList.remove('hide')//移除关闭 305 } 306 //返回顶部 307 function topy(){ 308 document.body.scrollTop=0; 309 } 310 311 312 313 314 //显示对话框 315 function showmod(){ 316 document.getElementById('z-cent').classList.remove('heds');//移除类名 样式 317 document.getElementById('z-first').classList.remove('heds'); 318 319 } 320 //关闭对话框 321 function hidemod(){ 322 document.getElementById('z-cent').classList.add('heds');//添加 类名 323 document.getElementById('z-first').classList.add('heds'); 324 } 325 //添加主机 IP 326 function cresc(){ 327 var tab=document.getElementById('tab'); 328 var user=document.getElementById('users').value 329 var ip=document.getElementById('ip_add').value 330 var tradd=tab.insertRow(4) 331 tradd.style.background='green' 332 if (user=='' || ip==''){ 333 alert('主机或用户名不能为空') 334 return 0 335 } 336 tradd.innerHTML='<td><input type="checkbox"></td><td>'+user+'</td><td>'+ip+'</td>' 337 hidemod() 338 } 339 //全选 340 function Chooseall(){ 341 var tbody=document.getElementById('tb'); 342 var tr_list=tbody.children;//取所有子元素的列表 343 for (var i=0;i<tr_list.length;i++){ 344 var curr=tr_list[i];//取当前子元素的子元素列表 345 var checkbox=curr.children[0].children[0]; 346 checkbox.checked=true//打上勾 347 } 348 } 349 350 //取消 351 function cancleall() { 352 var tbody = document.getElementById('tb'); 353 var tr_list = tbody.children;//取所有子元素的列表 354 for (var i = 0; i < tr_list.length; i++) { 355 var curr = tr_list[i];//取当前子元素的子元素列表 356 var checkbox = curr.children[0].children[0]; 357 checkbox.checked = false;//取消勾 358 } 359 } 360 //反选 361 function Reverseall() { 362 var tbody = document.getElementById('tb'); 363 var tr_list = tbody.children;//取所有子元素的列表 364 for (var i = 0; i < tr_list.length; i++) { 365 var curr = tr_list[i];//取当前子元素的子元素列表 366 var checkbox = curr.children[0].children[0]; 367 if (checkbox.checked){ 368 checkbox.checked = false;//取消勾 369 }else { 370 checkbox.checked = true;//打上勾 371 } 372 373 } 374 } 375 </script> 376 377 </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> 425 426 </div> 427 <div class="div_float"></div> 428 </div> 429 430 <!--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> 438 439 </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> 468 469 <!--中间的菜单--> 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> 486 487 </div> 488 <div class="div_float"></div> 489 </div> 490 <!--中间的菜单下方--> 491 <div class="meun-down"> 492 493 </div> 494 495 496 <!--中间内容--> 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> 503 504 <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> 527 528 <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 /> 544 545 <span class="sale"></span> 546 </span> 547 <span class="red_circle" style="display: none;"></span> 548 </a> 549 </li> 550 </ul> 551 </div> 552 553 554 <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> 577 578 579 580 <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> 603 604 <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 /> 620 621 <span class="sale"></span> 622 </span> 623 <span class="red_circle" style="display: none;"></span> 624 </a> 625 </li> 626 </ul> 627 </div> 628 629 630 <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> 653 654 655 656 </div> 657 658 659 660 <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> 671 672 </div> 673 </div> 674 675 </div> 676 <div class="div_float"></div> 677 </div> 678 679 <!--底部--> 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"> 700 701 <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> 750 751 <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> 757 758 759 760 761 762 </div> 763 <div class="div_float"></div> 764 </div> 765 766 767 768 <!--最底部--> 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> 791 792 <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> 797 798 </div> 799 800 801 <!--</div>--> 802 <div class="div_float"></div> 803 804 </div> 805 806 807 <script type="text/javascript"> 808 //返回顶部 809 function topy(){ 810 document.body.scrollTop=0; 811 } 812 </script> 813 814 </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> 209 210 </div> 211 <div class="div_float"></div> 212 213 </div> 214 215 216 <div class="logo"><a href="#"><img src="img/logo.png"/></a></div> 217 218 <div class="oustd"> 219 220 221 222 <!--注册框--> 223 <div class="rest"> 224 <!--左边--> 225 <div class="rest_left"> 226 <div class="users"> 227 <h2>注册新用户</h2> 228 </div> 229 230 <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> 239 240 <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> 249 250 <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> 259 260 <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> 269 270 <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> 279 280 <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> 289 290 <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> 296 297 298 299 </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> 311 312 313 <div class="div_float"></div> 314 315 </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> 214 215 <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> 224 225 <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> 234 235 <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> 244 245 <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> 251 252 253 <div class="rest-q"><a href="注册页面.html" target="_blank">免费注册》</a></div> 254 </div> 255 256 </div> 257 258 <div class="div_float"></div> 259 260 </div> 261 262 263 <!--下方--> 264 <footer class="footer"> 265 <p>Copyright ©老男孩教育. All Rights Reserved.</p> 266 </footer> 267 </body> 268 </html>