module06-2-电子商务网站页面（动态）
目录结构
商品列表页面（非动态） ├ images ├ style | ├ index.css | ├ login.css | └ register.css ├ js | └ index.js └ index.html
代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>当当尾品汇闪购</title> 6 <link rel="stylesheet" href="style/index.css"> 7 <link rel="shortcut icon" href="images/1.ico"> 8 <script></script> 9 </head> 10 <body> 11 <!--头部-开始--> 12 <div class="header" id="header"> 13 <!--顶部菜单-开始--> 14 <div class="top-bg"> 15 <div class="top entity"> 16 17 <!--顶部菜单_左侧 开始--> 18 <div class="top-l"> 19 欢迎光临当当，请 20 <a href="login.html">登陆</a> 21 <a href="register.html">成为会员</a> 22 </div> 23 <!--顶部菜单_左侧 结束--> 24 25 <!--顶部菜单_右侧 开始--> 26 <ul class="top-r"> 27 <li> 28 <a href="#">购物车<span style="color:red;">0</span></a> 29 </li> 30 <li> 31 <a href="#">我的订单</a> 32 </li> 33 <li> 34 <a href="#">我的云书房</a> 35 </li> 36 <li class="top_level_1_menu" onmouseover="ShowLevel2Menu('my_dd_menu')" onmouseout="HideLevel2Menu('my_dd_menu')"> 37 <a href="#">我的当当 ▽</a> 38 <ul class="top_level_2_menu hide" id="my_dd_menu"> 39 <li> 40 <a href="#">我的订单</a> 41 </li> 42 <li> 43 <a href="#">购物车</a> 44 </li> 45 <li> 46 <a href="#">积分抵现</a> 47 </li> 48 <li> 49 <a href="#">我的收藏</a> 50 </li> 51 <li> 52 <a href="#">我的余额</a> 53 </li> 54 <li> 55 <a href="#">我的评论</a> 56 </li> 57 <li> 58 <a href="#">礼券/礼品卡</a> 59 </li> 60 </ul> 61 </li> 62 <li> 63 <a href="#">小说投稿</a> 64 </li> 65 <li class="top_level_1_menu" onmouseover="ShowLevel2Menu('e_pro_menu')" onmouseout="HideLevel2Menu('e_pro_menu')"> 66 <a href="#">企业采购 ▽</a> 67 <ul class="top_level_2_menu hide" id="e_pro_menu"> 68 <li> 69 <a href="#">大宗采购</a> 70 </li> 71 <li> 72 <a href="#">礼品卡采购</a> 73 </li> 74 <li> 75 <a href="#">礼品卡激活</a> 76 </li> 77 <li> 78 <a href="#">礼品卡使用</a> 79 </li> 80 81 </ul> 82 </li> 83 <li class="top_level_1_menu" onmouseover="ShowLevel2Menu('cs_menu')" onmouseout="HideLevel2Menu('cs_menu')"> 84 <a href="#">客户服务 ▽</a> 85 <ul class="top_level_2_menu hide" id="cs_menu"> 86 <li> 87 <a href="#">帮助中心</a> 88 </li> 89 <li> 90 <a href="#">自动退换货</a> 91 </li> 92 <li> 93 <a href="#">自助发票</a> 94 </li> 95 <li> 96 <a href="#">联系客服</a> 97 </li> 98 <li> 99 <a href="#">我要投诉</a> 100 </li> 101 </ul> 102 </li> 103 104 </ul> 105 <!--顶部菜单_右侧 结束--> 106 107 </div> 108 </div> 109 <!--顶部菜单-结束--> 110 111 <!--顶部搜索-开始--> 112 <div class="search-bg"> 113 <div class="search entity"> 114 <div class="v_logo"> 115 <img src="images/v_logo.png" alt="尾品汇"> 116 </div> 117 118 119 <!--搜索框-开始--> 120 <div class="search-box"> 121 <select name="search-type" id="" class="search-type"> 122 <option value="0" selected>全部分类</option> 123 <option value="1">尾品汇</option> 124 <option value="2">图书</option> 125 <option value="3">电子书</option> 126 <option value="4">音像</option> 127 <option value="5">影视</option> 128 <option value="6">时尚美妆</option> 129 <option value="7">母婴用品</option> 130 <option value="8">玩具</option> 131 <option value="9">孕婴服饰</option> 132 <option value="10">童装童鞋</option> 133 <option value="11">家居日用</option> 134 <option value="12">家具装饰</option> 135 </select> 136 <input type="text" value="梵如" class="search-kw"> 137 138 </div> 139 <!--搜索框-结束--> 140 141 <input type="button" class="search-button"/> 142 143 <div class="pop-search"> 144 <span>大家都在搜：</span> 145 <a href="#">百思图</a> 146 <a href="#">裂帛</a> 147 <a href="#">连衣裙</a> 148 </div> 149 150 </div> 151 </div> 152 <!--顶部搜索-结束--> 153 154 <div class="nav-bg"> 155 <div class="nav entity"> 156 <a href="#" class="nav-item">当当首页</a> 157 <a href="#" class="nav-item">尾品汇</a> 158 <a href="#" class="nav-item">孕婴童</a> 159 <a href="#" class="nav-item">男装</a> 160 <a href="#" class="nav-item">女装</a> 161 <a href="#" class="nav-item">内衣</a> 162 <a href="#" class="nav-item">鞋履</a> 163 <a href="#" class="nav-item">运动/户外</a> 164 <a href="#" class="nav-item">箱包/礼品</a> 165 <a href="#" class="nav-item">珠宝饰品</a> 166 <a href="#" class="nav-item">居家</a> 167 <a href="#" class="nav-item">美妆</a> 168 <a href="#" class="nav-item">图书/童书</a> 169 <a href="#" class="fav">收藏此页</a> 170 </div> 171 </div> 172 173 <div class="nav_bottom_dec"></div> 174 175 </div> 176 <!--头部-结束--> 177 178 <!--侧边栏-开始--> 179 <div class="sidebar-container"> 180 <a href="#jrzx" class="sidebar"> 181 <div class="sidebar-t">今日</div> 182 <div class="sidebar-b">最新</div> 183 </a> 184 <a href="#zhfq" class="sidebar"> 185 <div class="sidebar-t">最后</div> 186 <div class="sidebar-b">疯抢</div> 187 </a> 188 <a href="#zhfq" class="sidebar"> 189 <div class="sidebar-t">即将</div> 190 <div class="sidebar-b">开售</div> 191 </a> 192 <a href="#header" class="sidebar"> 193 <div class="sidebar-t">△</div> 194 <div class="sidebar-b">TOP</div> 195 </a> 196 </div> 197 <!--侧边栏-结束--> 198 199 <!--内容-开始--> 200 <div class="content-bg"> 201 <div class="content entity"> 202 <div class="content-top"></div> 203 204 <!--主内容部分-开始--> 205 <div class="content-main"> 206 <!--左侧内容-开始--> 207 <div class="content-main-left"> 208 209 <!--今日最新-开始--> 210 <div class=""> 211 212 <!--仅作定位之用--> 213 <div id="jrzx"></div> 214 215 <!--今日最新_标题-开始--> 216 <div class="content-main-left-title"> 217 <img src="images/jinrizuixin.png" alt=""> 218 </div> 219 <!--今日最新_标题-结束--> 220 221 <!--商品简图-开始--> 222 <a href="#" class="content-main-left-item" name="content-item" onmouseover="ShowBorder(this)" onmouseout="HideBorder(this)"> 223 <img src="images/jrzx-1.jpg" alt="裂帛"> 224 225 <div class="item-lt"> 226 <div class="item-lt-1"> 227 <img src="images/item-lt-pic.jpg" alt=""> 228 </div> 229 230 <div class="item-lt-2">裂帛-向内行走</div> 231 232 <div class="item-lt-3">全场包邮 2件6折</div> 233 234 </div> 235 236 <div class="item-lb">裂帛秋冬焕新</div> 237 238 <div class="item-rb">还剩 <span>4</span> 天</div> 239 240 <div class="item-border hide"></div> 241 242 </a> 243 <!--商品简图-结束--> 244 245 <!--商品简图-开始--> 246 <a href="#" class="content-main-left-item" name="content-item" onmouseover="ShowBorder(this)" onmouseout="HideBorder(this)"> 247 <img src="images/jrzx-1.jpg" alt="裂帛"> 248 249 <div class="item-lt"> 250 <div class="item-lt-1"> 251 <img src="images/item-lt-pic.jpg" alt=""> 252 </div> 253 254 <div class="item-lt-2">裂帛-向内行走</div> 255 256 <div class="item-lt-3">全场包邮 2件6折</div> 257 258 </div> 259 260 <div class="item-lb">裂帛秋冬焕新</div> 261 262 <div class="item-rb">还剩 <span>4</span> 天</div> 263 264 <div class="item-border hide"></div> 265 266 </a> 267 <!--商品简图-结束--> 268 269 <!--商品简图-开始--> 270 <a href="#" class="content-main-left-item" name="content-item" onmouseover="ShowBorder(this)" onmouseout="HideBorder(this)"> 271 <img src="images/jrzx-1.jpg" alt="裂帛"> 272 273 <div class="item-lt"> 274 <div class="item-lt-1"> 275 <img src="images/item-lt-pic.jpg" alt=""> 276 </div> 277 278 <div class="item-lt-2">裂帛-向内行走</div> 279 280 <div class="item-lt-3">全场包邮 2件6折</div> 281 282 </div> 283 284 <div class="item-lb">裂帛秋冬焕新</div> 285 286 <div class="item-rb">还剩 <span>4</span> 天</div> 287 288 <div class="item-border hide"></div> 289 290 </a> 291 <!--商品简图-结束--> 292 293 <!--商品简图-开始--> 294 <a href="#" class="content-main-left-item" name="content-item" onmouseover="ShowBorder(this)" onmouseout="HideBorder(this)"> 295 <img src="images/jrzx-1.jpg" alt="裂帛"> 296 297 <div class="item-lt"> 298 <div class="item-lt-1"> 299 <img src="images/item-lt-pic.jpg" alt=""> 300 </div> 301 302 <div class="item-lt-2">裂帛-向内行走</div> 303 304 <div class="item-lt-3">全场包邮 2件6折</div> 305 306 </div> 307 308 <div class="item-lb">裂帛秋冬焕新</div> 309 310 <div class="item-rb">还剩 <span>4</span> 天</div> 311 312 <div class="item-border hide"></div> 313 314 </a> 315 <!--商品简图-结束--> 316 317 </div> 318 <!--今日最新-结束--> 319 320 <!--最后疯抢-开始--> 321 <div class="" id="zhfq"> 322 323 <!--最后疯抢_标题-开始--> 324 <div class="content-main-left-title"> 325 <img src="images/zuihoufengqiang.png" alt=""> 326 </div> 327 <!--最后疯抢_标题-结束--> 328 329 <!--商品简图容器-开始--> 330 <div class="item-container"> 331 <!--商品简图(zhfq)-开始--> 332 <a href="#" class="content-main-left-item-2" onmouseover="ShowBorder2(this)" onmouseout="HideBorder2(this)"> 333 <img src="images/zhfq-1.jpg" alt=""> 334 <div class="sale-time"> 335 <div class="time-text"> 336 还剩 337 <span>2</span> 338 天 339 </div> 340 </div> 341 <div class="goods-logo"> 342 <img src="images/zhfq-1-logo.jpg" alt="" width="115"> 343 </div> 344 345 <div class="item-border-2 hide"></div> 346 347 </a> 348 <!--商品简图(zhfq)-结束--> 349 350 <!--商品简图(zhfq)-开始--> 351 <a href="#" class="content-main-left-item-2" onmouseover="ShowBorder2(this)" onmouseout="HideBorder2(this)"> 352 <img src="images/zhfq-1.jpg" alt=""> 353 <div class="sale-time"> 354 <div class="time-text"> 355 还剩 356 <span>2</span> 357 天 358 </div> 359 </div> 360 <div class="goods-logo"> 361 <img src="images/zhfq-1-logo.jpg" alt="" width="115"> 362 </div> 363 364 <div class="item-border-2 hide"></div> 365 366 </a> 367 <!--商品简图(zhfq)-结束--> 368 369 <!--商品简图(zhfq)-开始--> 370 <a href="#" class="content-main-left-item-2" onmouseover="ShowBorder2(this)" onmouseout="HideBorder2(this)"> 371 <img src="images/zhfq-1.jpg" alt=""> 372 <div class="sale-time"> 373 <div class="time-text"> 374 还剩 375 <span>2</span> 376 天 377 </div> 378 </div> 379 <div class="goods-logo"> 380 <img src="images/zhfq-1-logo.jpg" alt="" width="115"> 381 </div> 382 383 <div class="item-border-2 hide"></div> 384 385 </a> 386 <!--商品简图(zhfq)-结束--> 387 388 <!--商品简图(zhfq)-开始--> 389 <a href="#" class="content-main-left-item-2" onmouseover="ShowBorder2(this)" onmouseout="HideBorder2(this)"> 390 <img src="images/zhfq-1.jpg" alt=""> 391 <div class="sale-time"> 392 <div class="time-text"> 393 还剩 394 <span>2</span> 395 天 396 </div> 397 </div> 398 <div class="goods-logo"> 399 <img src="images/zhfq-1-logo.jpg" alt="" width="115"> 400 </div> 401 402 <div class="item-border-2 hide"></div> 403 404 </a> 405 <!--商品简图(zhfq)-结束--> 406 407 </div> 408 <!--商品简图容器-结束--> 409 410 <div style="clear:both;"></div> 411 412 </div> 413 <!--最后疯抢-结束--> 414 415 <!--即将开售-开始--> 416 <div id="jjks"> 417 <div class="content-main-left-title" > 418 <img src="images/jijiangkaishou.png" alt=""> 419 </div> 420 421 <!--商品简图容器(jjks)-开始--> 422 <div class="item-container"> 423 424 <!--商品简图(jjks)-开始--> 425 <a class="content-main-left-item-2" onmouseover="ShowIntro(this)" onmouseout="HideIntro(this)"> 426 <img src="images/jjks-1.jpg" alt=""> 427 428 <div class="jjks-item-1">即将开售</div> 429 430 <div class="sale-time" style="background-color: rgba(116,8,110,0.8)"> 431 <div class="discount-info">1件8折 2件6折</div> 432 <div class="time-text"> 433 还有 434 <span>20</span> 435 小时开始 436 </div> 437 438 </div> 439 440 <div class="goods-logo"> 441 <img src="images/jjks-1-logo.jpg" alt="" width="115"> 442 </div> 443 444 <div class="goods-introduction hide"> 445 <h2>品牌故事</h2> 446 <p> 447 无论外界洪流如何，我们所要选择的仅仅只是——体贴自然，聚惠生活！然聚针对中国广大知识女性对质地优良、自然典雅、价格适中特点的女装需求，创造家庭和谐的时尚优雅女装，客群主要为：18-40岁的女性，她们自信独立，聪颖智慧。 448 </p> 449 450 <div class="remind"> 451 <input type="text" value="输入邮箱地址或手机号码" class="info-input"> 452 <input type="button" value='开售提醒' class="remind-button"> 453 </div> 454 </div> 455 456 </a> 457 <!--商品简图(jjks)-结束--> 458 459 <!--商品简图(jjks)-开始--> 460 <a class="content-main-left-item-2" onmouseover="ShowIntro(this)" onmouseout="HideIntro(this)"> 461 <img src="images/jjks-1.jpg" alt=""> 462 463 <div class="jjks-item-1">即将开售</div> 464 465 <div class="sale-time" style="background-color: rgba(116,8,110,0.8)"> 466 <div class="discount-info">1件8折 2件6折</div> 467 <div class="time-text"> 468 还有 469 <span>20</span> 470 小时开始 471 </div> 472 473 </div> 474 475 <div class="goods-logo"> 476 <img src="images/jjks-1-logo.jpg" alt="" width="115"> 477 </div> 478 479 <div class="goods-introduction hide"> 480 <h2>品牌故事</h2> 481 <p> 482 无论外界洪流如何，我们所要选择的仅仅只是——体贴自然，聚惠生活！然聚针对中国广大知识女性对质地优良、自然典雅、价格适中特点的女装需求，创造家庭和谐的时尚优雅女装，客群主要为：18-40岁的女性，她们自信独立，聪颖智慧。 483 </p> 484 485 <div class="remind"> 486 <input type="text" value="输入邮箱地址或手机号码" class="info-input"> 487 <input type="button" value='开售提醒' class="remind-button"> 488 </div> 489 </div> 490 491 </a> 492 <!--商品简图(jjks)-结束--> 493 494 <!--商品简图(jjks)-开始--> 495 <a class="content-main-left-item-2" onmouseover="ShowIntro(this)" onmouseout="HideIntro(this)"> 496 <img src="images/jjks-1.jpg" alt=""> 497 498 <div class="jjks-item-1">即将开售</div> 499 500 <div class="sale-time" style="background-color: rgba(116,8,110,0.8)"> 501 <div class="discount-info">1件8折 2件6折</div> 502 <div class="time-text"> 503 还有 504 <span>20</span> 505 小时开始 506 </div> 507 508 </div> 509 510 <div class="goods-logo"> 511 <img src="images/jjks-1-logo.jpg" alt="" width="115"> 512 </div> 513 514 <div class="goods-introduction hide"> 515 <h2>品牌故事</h2> 516 <p> 517 无论外界洪流如何，我们所要选择的仅仅只是——体贴自然，聚惠生活！然聚针对中国广大知识女性对质地优良、自然典雅、价格适中特点的女装需求，创造家庭和谐的时尚优雅女装，客群主要为：18-40岁的女性，她们自信独立，聪颖智慧。 518 </p> 519 520 <div class="remind"> 521 <input type="text" value="输入邮箱地址或手机号码" class="info-input"> 522 <input type="button" value='开售提醒' class="remind-button"> 523 </div> 524 </div> 525 526 </a> 527 <!--商品简图(jjks)-结束--> 528 529 <!--商品简图(jjks)-开始--> 530 <a class="content-main-left-item-2" onmouseover="ShowIntro(this)" onmouseout="HideIntro(this)"> 531 <img src="images/jjks-1.jpg" alt=""> 532 533 <div class="jjks-item-1">即将开售</div> 534 535 <div class="sale-time" style="background-color: rgba(116,8,110,0.8)"> 536 <div class="discount-info">1件8折 2件6折</div> 537 <div class="time-text"> 538 还有 539 <span>20</span> 540 小时开始 541 </div> 542 543 </div> 544 545 <div class="goods-logo"> 546 <img src="images/jjks-1-logo.jpg" alt="" width="115"> 547 </div> 548 549 <div class="goods-introduction hide"> 550 <h2>品牌故事</h2> 551 <p> 552 无论外界洪流如何，我们所要选择的仅仅只是——体贴自然，聚惠生活！然聚针对中国广大知识女性对质地优良、自然典雅、价格适中特点的女装需求，创造家庭和谐的时尚优雅女装，客群主要为：18-40岁的女性，她们自信独立，聪颖智慧。 553 </p> 554 555 <div class="remind"> 556 <input type="text" value="输入邮箱地址或手机号码" class="info-input"> 557 <input type="button" value='开售提醒' class="remind-button"> 558 </div> 559 </div> 560 561 </a> 562 <!--商品简图(jjks)-结束--> 563 564 565 </div> 566 <!--商品简图容器(jjks)-结束--> 567 568 <div style="clear:both;"></div> 569 570 </div> 571 <!--即将开售-结束--> 572 573 574 575 </div> 576 <!--左侧内容-结束--> 577 578 <!--右侧内容-开始--> 579 <div class="content-main-right"> 580 <div class="slogan"> 581 <img src="images/slogan.gif" alt=""> 582 </div> 583 584 <!--图书尾品汇-开始--> 585 <div class="base-sale"> 586 <img src="images/tushu.png" alt=""> 587 588 <a href="#"> 589 <img src="images/tongshutemai.jpg" alt=""> 590 </a> 591 592 <a href="#"> 593 <img src="images/tongshutemai.jpg" alt=""> 594 </a> 595 596 </div> 597 <!--图书尾品汇-结束--> 598 599 <!--右侧内容的"即将开售"-开始--> 600 <div class="advance-sale"> 601 <img src="images/jijiangkaish.png" alt=""> 602 603 <div class="advance-sale-title"> 604 <div class="title-selected" id="ast1" onmouseover="HighLightedSelect('ast1','asc1')">10月15日</div> 605 <div class="title-unselected" id="ast2" onmouseover="HighLightedSelect('ast2','asc2')">10月16日</div> 606 <div class="title-unselected" id="ast3" onmouseover="HighLightedSelect('ast3','asc3')">10月17日</div> 607 608 </div> 609 610 <!--三个日期对应内容的父元素容器-开始--> 611 <div> 612 <!--第一个标题框中的日期对应的内容 - 开始--> 613 <div class="advance-sale-content" id="asc1"> 614 615 <!--商品图片 - 开始--> 616 <div class="asc-item"> 617 <a onmouseover="ShowIntro2(this)" onmouseout="HideIntro2(this)"> 618 <img src="images/boxolo-logo.jpg" alt="" width="115" height="40"> 619 </a> 620 621 <!--鼠标悬浮在商品图片上时出现的商品信息框 - 开始--> 622 <div class="goods-introduction-box hide"> 623 <img src="images/boxolo-pic.jpg" alt="" width="240" height="178"> 624 625 <div class="goods-introduction-2"> 626 <p> 627 BOKOLO伯克龙男装以“绅士文化”理念，将绅士精神融入具有英伦时尚风格的商务男装中，为25-45岁左右的都市白领和成功人士倾情打造穿着舒适、设计独特、剪裁精细的时尚商务衣装。 628 </p> 629 630 <div class="remind-2"> 631 <input type="text" value="请输入手机号码或邮箱" class="info-input-2"> 632 <input type="button" value="开售提醒" class="remind-button-2"> 633 <div style="clear:both;"></div> 634 </div> 635 636 </div> 637 638 </div> 639 <!--鼠标悬浮在商品图片上时出现的商品信息框 - 结束--> 640 641 </div> 642 <!--商品图片 - 结束--> 643 644 <!--商品图片 - 开始--> 645 <div class="asc-item"> 646 <a onmouseover="ShowIntro2(this)" onmouseout="HideIntro2(this)"> 647 <img src="images/boxolo-logo.jpg" alt="" width="115" height="40"> 648 </a> 649 650 <!--鼠标悬浮在商品图片上时出现的商品信息框 - 开始--> 651 <div class="goods-introduction-box hide"> 652 <img src="images/boxolo-pic.jpg" alt="" width="240" height="178"> 653 654 <div class="goods-introduction-2"> 655 <p> 656 BOKOLO伯克龙男装以“绅士文化”理念，将绅士精神融入具有英伦时尚风格的商务男装中，为25-45岁左右的都市白领和成功人士倾情打造穿着舒适、设计独特、剪裁精细的时尚商务衣装。 657 </p> 658 659 <div class="remind-2"> 660 <input type="text" value="请输入手机号码或邮箱" class="info-input-2"> 661 <input type="button" value="开售提醒" class="remind-button-2"> 662 <div style="clear:both;"></div> 663 </div> 664 665 </div> 666 667 </div> 668 <!--鼠标悬浮在商品图片上时出现的商品信息框 - 结束--> 669 670 </div> 671 <!--商品图片 - 结束--> 672 673 <!--商品图片 - 开始--> 674 <div class="asc-item"> 675 <a onmouseover="ShowIntro2(this)" onmouseout="HideIntro2(this)"> 676 <img src="images/boxolo-logo.jpg" alt="" width="115" height="40"> 677 </a> 678 679 <!--鼠标悬浮在商品图片上时出现的商品信息框 - 开始--> 680 <div class="goods-introduction-box hide"> 681 <img src="images/boxolo-pic.jpg" alt="" width="240" height="178"> 682 683 <div class="goods-introduction-2"> 684 <p> 685 BOKOLO伯克龙男装以“绅士文化”理念，将绅士精神融入具有英伦时尚风格的商务男装中，为25-45岁左右的都市白领和成功人士倾情打造穿着舒适、设计独特、剪裁精细的时尚商务衣装。 686 </p> 687 688 <div class="remind-2"> 689 <input type="text" value="请输入手机号码或邮箱" class="info-input-2"> 690 <input type="button" value="开售提醒" class="remind-button-2"> 691 <div style="clear:both;"></div> 692 </div> 693 694 </div> 695 696 </div> 697 <!--鼠标悬浮在商品图片上时出现的商品信息框 - 结束--> 698 699 </div> 700 <!--商品图片 - 结束--> 701 702 <!--商品图片 - 开始--> 703 <div class="asc-item"> 704 <a onmouseover="ShowIntro2(this)" onmouseout="HideIntro2(this)"> 705 <img src="images/boxolo-logo.jpg" alt="" width="115" height="40"> 706 </a> 707 708 <!--鼠标悬浮在商品图片上时出现的商品信息框 - 开始--> 709 <div class="goods-introduction-box hide"> 710 <img src="images/boxolo-pic.jpg" alt="" width="240" height="178"> 711 712 <div class="goods-introduction-2"> 713 <p> 714 BOKOLO伯克龙男装以“绅士文化”理念，将绅士精神融入具有英伦时尚风格的商务男装中，为25-45岁左右的都市白领和成功人士倾情打造穿着舒适、设计独特、剪裁精细的时尚商务衣装。 715 </p> 716 717 <div class="remind-2"> 718 <input type="text" value="请输入手机号码或邮箱" class="info-input-2"> 719 <input type="button" value="开售提醒" class="remind-button-2"> 720 <div style="clear:both;"></div> 721 </div> 722 723 </div> 724 725 </div> 726 <!--鼠标悬浮在商品图片上时出现的商品信息框 - 结束--> 727 728 </div> 729 <!--商品图片 - 结束--> 730 731 <!--商品图片 - 开始--> 732 <div class="asc-item"> 733 <a onmouseover="ShowIntro2(this)" onmouseout="HideIntro2(this)"> 734 <img src="images/boxolo-logo.jpg" alt="" width="115" height="40"> 735 </a> 736 737 <!--鼠标悬浮在商品图片上时出现的商品信息框 - 开始--> 738 <div class="goods-introduction-box hide"> 739 <img src="images/boxolo-pic.jpg" alt="" width="240" height="178"> 740 741 <div class="goods-introduction-2"> 742 <p> 743 BOKOLO伯克龙男装以“绅士文化”理念，将绅士精神融入具有英伦时尚风格的商务男装中，为25-45岁左右的都市白领和成功人士倾情打造穿着舒适、设计独特、剪裁精细的时尚商务衣装。 744 </p> 745 746 <div class="remind-2"> 747 <input type="text" value="请输入手机号码或邮箱" class="info-input-2"> 748 <input type="button" value="开售提醒" class="remind-button-2"> 749 <div style="clear:both;"></div> 750 </div> 751 752 </div> 753 754 </div> 755 <!--鼠标悬浮在商品图片上时出现的商品信息框 - 结束--> 756 757 </div> 758 <!--商品图片 - 结束--> 759 760 <!--商品图片 - 开始--> 761 <div class="asc-item"> 762 <a onmouseover="ShowIntro2(this)" onmouseout="HideIntro2(this)"> 763 <img src="images/boxolo-logo.jpg" alt="" width="115" height="40"> 764 </a> 765 766 <!--鼠标悬浮在商品图片上时出现的商品信息框 - 开始--> 767 <div class="goods-introduction-box hide"> 768 <img src="images/boxolo-pic.jpg" alt="" width="240" height="178"> 769 770 <div class="goods-introduction-2"> 771 <p> 772 BOKOLO伯克龙男装以“绅士文化”理念，将绅士精神融入具有英伦时尚风格的商务男装中，为25-45岁左右的都市白领和成功人士倾情打造穿着舒适、设计独特、剪裁精细的时尚商务衣装。 773 </p> 774 775 <div class="remind-2"> 776 <input type="text" value="请输入手机号码或邮箱" class="info-input-2"> 777 <input type="button" value="开售提醒" class="remind-button-2"> 778 <div style="clear:both;"></div> 779 </div> 780 781 </div> 782 783 </div> 784 <!--鼠标悬浮在商品图片上时出现的商品信息框 - 结束--> 785 786 </div> 787 <!--商品图片 - 结束--> 788 789 <div style="clear:both;"></div> 790 791 </div> 792 <!--第一个标题框中的日期对应的内容 - 结束--> 793 794 <!--第二个标题框中的日期对应的内容 - 开始--> 795 <div class="advance-sale-content hide" id="asc2"> 796 797 <!--商品图片 - 开始--> 798 <div class="asc-item"> 799 <a onmouseover="ShowIntro2(this)" onmouseout="HideIntro2(this)"> 800 <img src="images/mbox-logo.jpg" alt="" width="115" height="40"> 801 </a> 802 803 <!--鼠标悬浮在商品图片上时出现的商品信息框 - 开始--> 804 <div class="goods-introduction-box hide"> 805 <img src="images/boxolo-pic.jpg" alt="" width="240" height="178"> 806 807 <div class="goods-introduction-2"> 808 <p> 809 BOKOLO伯克龙男装以“绅士文化”理念，将绅士精神融入具有英伦时尚风格的商务男装中，为25-45岁左右的都市白领和成功人士倾情打造穿着舒适、设计独特、剪裁精细的时尚商务衣装。 810 </p> 811 812 <div class="remind-2"> 813 <input type="text" value="请输入手机号码或邮箱" class="info-input-2"> 814 <input type="button" value="开售提醒" class="remind-button-2"> 815 <div style="clear:both;"></div> 816 </div> 817 818 </div> 819 820 </div> 821 <!--鼠标悬浮在商品图片上时出现的商品信息框 - 结束--> 822 823 </div> 824 <!--商品图片 - 结束--> 825 826 <!--商品图片 - 开始--> 827 <div class="asc-item"> 828 <a onmouseover="ShowIntro2(this)" onmouseout="HideIntro2(this)"> 829 <img src="images/mbox-logo.jpg" alt="" width="115" height="40"> 830 </a> 831 832 <!--鼠标悬浮在商品图片上时出现的商品信息框 - 开始--> 833 <div class="goods-introduction-box hide"> 834 <img src="images/boxolo-pic.jpg" alt="" width="240" height="178"> 835 836 <div class="goods-introduction-2"> 837 <p> 838 BOKOLO伯克龙男装以“绅士文化”理念，将绅士精神融入具有英伦时尚风格的商务男装中，为25-45岁左右的都市白领和成功人士倾情打造穿着舒适、设计独特、剪裁精细的时尚商务衣装。 839 </p> 840 841 <div class="remind-2"> 842 <input type="text" value="请输入手机号码或邮箱" class="info-input-2"> 843 <input type="button" value="开售提醒" class="remind-button-2"> 844 <div style="clear:both;"></div> 845 </div> 846 847 </div> 848 849 </div> 850 <!--鼠标悬浮在商品图片上时出现的商品信息框 - 结束--> 851 852 </div> 853 <!--商品图片 - 结束--> 854 855 <!--商品图片 - 开始--> 856 <div class="asc-item"> 857 <a onmouseover="ShowIntro2(this)" onmouseout="HideIntro2(this)"> 858 <img src="images/mbox-logo.jpg" alt="" width="115" height="40"> 859 </a> 860 861 <!--鼠标悬浮在商品图片上时出现的商品信息框 - 开始--> 862 <div class="goods-introduction-box hide"> 863 <img src="images/boxolo-pic.jpg" alt="" width="240" height="178"> 864 865 <div class="goods-introduction-2"> 866 <p> 867 BOKOLO伯克龙男装以“绅士文化”理念，将绅士精神融入具有英伦时尚风格的商务男装中，为25-45岁左右的都市白领和成功人士倾情打造穿着舒适、设计独特、剪裁精细的时尚商务衣装。 868 </p> 869 870 <div class="remind-2"> 871 <input type="text" value="请输入手机号码或邮箱" class="info-input-2"> 872 <input type="button" value="开售提醒" class="remind-button-2"> 873 <div style="clear:both;"></div> 874 </div> 875 876 </div> 877 878 </div> 879 <!--鼠标悬浮在商品图片上时出现的商品信息框 - 结束--> 880 881 </div> 882 <!--商品图片 - 结束--> 883 884 <!--商品图片 - 开始--> 885 <div class="asc-item"> 886 <a onmouseover="ShowIntro2(this)" onmouseout="HideIntro2(this)"> 887 <img src="images/mbox-logo.jpg" alt="" width="115" height="40"> 888 </a> 889 890 <!--鼠标悬浮在商品图片上时出现的商品信息框 - 开始--> 891 <div class="goods-introduction-box hide"> 892 <img src="images/boxolo-pic.jpg" alt="" width="240" height="178"> 893 894 <div class="goods-introduction-2"> 895 <p> 896 BOKOLO伯克龙男装以“绅士文化”理念，将绅士精神融入具有英伦时尚风格的商务男装中，为25-45岁左右的都市白领和成功人士倾情打造穿着舒适、设计独特、剪裁精细的时尚商务衣装。 897 </p> 898 899 <div class="remind-2"> 900 <input type="text" value="请输入手机号码或邮箱" class="info-input-2"> 901 <input type="button" value="开售提醒" class="remind-button-2"> 902 <div style="clear:both;"></div> 903 </div> 904 905 </div> 906 907 </div> 908 <!--鼠标悬浮在商品图片上时出现的商品信息框 - 结束--> 909 910 </div> 911 <!--商品图片 - 结束--> 912 913 <!--商品图片 - 开始--> 914 <div class="asc-item"> 915 <a onmouseover="ShowIntro2(this)" onmouseout="HideIntro2(this)"> 916 <img src="images/mbox-logo.jpg" alt="" width="115" height="40"> 917 </a> 918 919 <!--鼠标悬浮在商品图片上时出现的商品信息框 - 开始--> 920 <div class="goods-introduction-box hide"> 921 <img src="images/boxolo-pic.jpg" alt="" width="240" height="178"> 922 923 <div class="goods-introduction-2"> 924 <p> 925 BOKOLO伯克龙男装以“绅士文化”理念，将绅士精神融入具有英伦时尚风格的商务男装中，为25-45岁左右的都市白领和成功人士倾情打造穿着舒适、设计独特、剪裁精细的时尚商务衣装。 926 </p> 927 928 <div class="remind-2"> 929 <input type="text" value="请输入手机号码或邮箱" class="info-input-2"> 930 <input type="button" value="开售提醒" class="remind-button-2"> 931 <div style="clear:both;"></div> 932 </div> 933 934 </div> 935 936 </div> 937 <!--鼠标悬浮在商品图片上时出现的商品信息框 - 结束--> 938 939 </div> 940 <!--商品图片 - 结束--> 941 942 <!--商品图片 - 开始--> 943 <div class="asc-item"> 944 <a onmouseover="ShowIntro2(this)" onmouseout="HideIntro2(this)"> 945 <img src="images/mbox-logo.jpg" alt="" width="115" height="40"> 946 </a> 947 948 <!--鼠标悬浮在商品图片上时出现的商品信息框 - 开始--> 949 <div class="goods-introduction-box hide"> 950 <img src="images/boxolo-pic.jpg" alt="" width="240" height="178"> 951 952 <div class="goods-introduction-2"> 953 <p> 954 BOKOLO伯克龙男装以“绅士文化”理念，将绅士精神融入具有英伦时尚风格的商务男装中，为25-45岁左右的都市白领和成功人士倾情打造穿着舒适、设计独特、剪裁精细的时尚商务衣装。 955 </p> 956 957 <div class="remind-2"> 958 <input type="text" value="请输入手机号码或邮箱" class="info-input-2"> 959 <input type="button" value="开售提醒" class="remind-button-2"> 960 <div style="clear:both;"></div> 961 </div> 962 963 </div> 964 965 </div> 966 <!--鼠标悬浮在商品图片上时出现的商品信息框 - 结束--> 967 968 </div> 969 <!--商品图片 - 结束--> 970 971 <div style="clear:both"></div> 972 </div> 973 <!--第二个标题框中的日期对应的内容 - 结束--> 974 975 <!--第三个标题框中的日期对应的内容 - 开始--> 976 <div class="advance-sale-content hide" id="asc3"> 977 978 <!--商品图片 - 开始--> 979 <div class="asc-item"> 980 <a onmouseover="ShowIntro2(this)" onmouseout="HideIntro2(this)"> 981 <img src="images/babudou-logo.jpg" alt="" width="115" height="40"> 982 </a> 983 984 <!--鼠标悬浮在商品图片上时出现的商品信息框 - 开始--> 985 <div class="goods-introduction-box hide"> 986 <img src="images/boxolo-pic.jpg" alt="" width="240" height="178"> 987 988 <div class="goods-introduction-2"> 989 <p> 990 BOKOLO伯克龙男装以“绅士文化”理念，将绅士精神融入具有英伦时尚风格的商务男装中，为25-45岁左右的都市白领和成功人士倾情打造穿着舒适、设计独特、剪裁精细的时尚商务衣装。 991 </p> 992 993 <div class="remind-2"> 994 <input type="text" value="请输入手机号码或邮箱" class="info-input-2"> 995 <input type="button" value="开售提醒" class="remind-button-2"> 996 <div style="clear:both;"></div> 997 </div> 998 999 </div> 1000 1001 </div> 1002 <!--鼠标悬浮在商品图片上时出现的商品信息框 - 结束--> 1003 1004 </div> 1005 <!--商品图片 - 结束--> 1006 1007 <!--商品图片 - 开始--> 1008 <div class="asc-item"> 1009 <a onmouseover="ShowIntro2(this)" onmouseout="HideIntro2(this)"> 1010 <img src="images/babudou-logo.jpg" alt="" width="115" height="40"> 1011 </a> 1012 1013 <!--鼠标悬浮在商品图片上时出现的商品信息框 - 开始--> 1014 <div class="goods-introduction-box hide"> 1015 <img src="images/boxolo-pic.jpg" alt="" width="240" height="178"> 1016 1017 <div class="goods-introduction-2"> 1018 <p> 1019 BOKOLO伯克龙男装以“绅士文化”理念，将绅士精神融入具有英伦时尚风格的商务男装中，为25-45岁左右的都市白领和成功人士倾情打造穿着舒适、设计独特、剪裁精细的时尚商务衣装。 1020 </p> 1021 1022 <div class="remind-2"> 1023 <input type="text" value="请输入手机号码或邮箱" class="info-input-2"> 1024 <input type="button" value="开售提醒" class="remind-button-2"> 1025 <div style="clear:both;"></div> 1026 </div> 1027 1028 </div> 1029 1030 </div> 1031 <!--鼠标悬浮在商品图片上时出现的商品信息框 - 结束--> 1032 1033 </div> 1034 <!--商品图片 - 结束--> 1035 1036 <!--商品图片 - 开始--> 1037 <div class="asc-item"> 1038 <a onmouseover="ShowIntro2(this)" onmouseout="HideIntro2(this)"> 1039 <img src="images/babudou-logo.jpg" alt="" width="115" height="40"> 1040 </a> 1041 1042 <!--鼠标悬浮在商品图片上时出现的商品信息框 - 开始--> 1043 <div class="goods-introduction-box hide"> 1044 <img src="images/boxolo-pic.jpg" alt="" width="240" height="178"> 1045 1046 <div class="goods-introduction-2"> 1047 <p> 1048 BOKOLO伯克龙男装以“绅士文化”理念，将绅士精神融入具有英伦时尚风格的商务男装中，为25-45岁左右的都市白领和成功人士倾情打造穿着舒适、设计独特、剪裁精细的时尚商务衣装。 1049 </p> 1050 1051 <div class="remind-2"> 1052 <input type="text" value="请输入手机号码或邮箱" class="info-input-2"> 1053 <input type="button" value="开售提醒" class="remind-button-2"> 1054 <div style="clear:both;"></div> 1055 </div> 1056 1057 </div> 1058 1059 </div> 1060 <!--鼠标悬浮在商品图片上时出现的商品信息框 - 结束--> 1061 1062 </div> 1063 <!--商品图片 - 结束--> 1064 1065 <!--商品图片 - 开始--> 1066 <div class="asc-item"> 1067 <a onmouseover="ShowIntro2(this)" onmouseout="HideIntro2(this)"> 1068 <img src="images/babudou-logo.jpg" alt="" width="115" height="40"> 1069 </a> 1070 1071 <!--鼠标悬浮在商品图片上时出现的商品信息框 - 开始--> 1072 <div class="goods-introduction-box hide"> 1073 <img src="images/boxolo-pic.jpg" alt="" width="240" height="178"> 1074 1075 <div class="goods-introduction-2"> 1076 <p> 1077 BOKOLO伯克龙男装以“绅士文化”理念，将绅士精神融入具有英伦时尚风格的商务男装中，为25-45岁左右的都市白领和成功人士倾情打造穿着舒适、设计独特、剪裁精细的时尚商务衣装。 1078 </p> 1079 1080 <div class="remind-2"> 1081 <input type="text" value="请输入手机号码或邮箱" class="info-input-2"> 1082 <input type="button" value="开售提醒" class="remind-button-2"> 1083 <div style="clear:both;"></div> 1084 </div> 1085 1086 </div> 1087 1088 </div> 1089 <!--鼠标悬浮在商品图片上时出现的商品信息框 - 结束--> 1090 1091 </div> 1092 <!--商品图片 - 结束--> 1093 1094 <!--商品图片 - 开始--> 1095 <div class="asc-item"> 1096 <a onmouseover="ShowIntro2(this)" onmouseout="HideIntro2(this)"> 1097 <img src="images/babudou-logo.jpg" alt="" width="115" height="40"> 1098 </a> 1099 1100 <!--鼠标悬浮在商品图片上时出现的商品信息框 - 开始--> 1101 <div class="goods-introduction-box hide"> 1102 <img src="images/boxolo-pic.jpg" alt="" width="240" height="178"> 1103 1104 <div class="goods-introduction-2"> 1105 <p> 1106 BOKOLO伯克龙男装以“绅士文化”理念，将绅士精神融入具有英伦时尚风格的商务男装中，为25-45岁左右的都市白领和成功人士倾情打造穿着舒适、设计独特、剪裁精细的时尚商务衣装。 1107 </p> 1108 1109 <div class="remind-2"> 1110 <input type="text" value="请输入手机号码或邮箱" class="info-input-2"> 1111 <input type="button" value="开售提醒" class="remind-button-2"> 1112 <div style="clear:both;"></div> 1113 </div> 1114 1115 </div> 1116 1117 </div> 1118 <!--鼠标悬浮在商品图片上时出现的商品信息框 - 结束--> 1119 1120 </div> 1121 <!--商品图片 - 结束--> 1122 1123 <!--商品图片 - 开始--> 1124 <div class="asc-item"> 1125 <a onmouseover="ShowIntro2(this)" onmouseout="HideIntro2(this)"> 1126 <img src="images/babudou-logo.jpg" alt="" width="115" height="40"> 1127 </a> 1128 1129 <!--鼠标悬浮在商品图片上时出现的商品信息框 - 开始--> 1130 <div class="goods-introduction-box hide"> 1131 <img src="images/boxolo-pic.jpg" alt="" width="240" height="178"> 1132 1133 <div class="goods-introduction-2"> 1134 <p> 1135 BOKOLO伯克龙男装以“绅士文化”理念，将绅士精神融入具有英伦时尚风格的商务男装中，为25-45岁左右的都市白领和成功人士倾情打造穿着舒适、设计独特、剪裁精细的时尚商务衣装。 1136 </p> 1137 1138 <div class="remind-2"> 1139 <input type="text" value="请输入手机号码或邮箱" class="info-input-2"> 1140 <input type="button" value="开售提醒" class="remind-button-2"> 1141 <div style="clear:both;"></div> 1142 </div> 1143 1144 </div> 1145 1146 </div> 1147 <!--鼠标悬浮在商品图片上时出现的商品信息框 - 结束--> 1148 1149 </div> 1150 <!--商品图片 - 结束--> 1151 1152 1153 <div style="clear:both;"></div> 1154 </div> 1155 <!--第三个标题框中的日期对应的内容 - 结束--> 1156 </div> 1157 <!--三个日期对应内容的父元素容器-结束--> 1158 1159 </div> 1160 <!--右侧内容的"即将开售"-结束--> 1161 1162 </div> 1163 <!--右侧内容-结束--> 1164 1165 <div style="clear:both;"></div> 1166 </div> 1167 <!--主内容部分-结束--> 1168 1169 </div> 1170 </div> 1171 1172 <!--内容-结束--> 1173 1174 <!--底部-开始--> 1175 <div class="footer"> 1176 <div class="footer-top-pic-bg"> 1177 <div class="footer-top-pic"> 1178 <a href="#" class="footer-pic1"></a> 1179 <a href="#" class="footer-pic2"></a> 1180 <a href="#" class="footer-pic3"></a> 1181 <a href="#" class="footer-pic4"></a> 1182 </div> 1183 </div> 1184 1185 <div class="public-footer"> 1186 1187 <div class="public-footer-item"> 1188 <div class="f_title"> 1189 购物指南 1190 </div> 1191 <ul> 1192 <li> 1193 <a href="#">购物流程</a> 1194 </li> 1195 <li> 1196 <a href="#">发票制度</a></li> 1197 <li> 1198 <a href="#">账户管理</a> 1199 </li> 1200 <li> 1201 <a href="#">会员优惠</a> 1202 </li> 1203 </ul> 1204 </div> 1205 <div class="public-footer-item"> 1206 <div class="f_title"> 1207 购物指南 1208 </div> 1209 <ul> 1210 <li> 1211 <a href="#">购物流程</a> 1212 </li> 1213 <li> 1214 <a href="#">发票制度</a></li> 1215 <li> 1216 <a href="#">账户管理</a> 1217 </li> 1218 <li> 1219 <a href="#">会员优惠</a> 1220 </li> 1221 </ul> 1222 </div> 1223 <div class="public-footer-item"> 1224 <div class="f_title"> 1225 购物指南 1226 </div> 1227 <ul> 1228 <li> 1229 <a href="#">购物流程</a> 1230 </li> 1231 <li> 1232 <a href="#">发票制度</a></li> 1233 <li> 1234 <a href="#">账户管理</a> 1235 </li> 1236 <li> 1237 <a href="#">会员优惠</a> 1238 </li> 1239 </ul> 1240 </div> 1241 <div class="public-footer-item"> 1242 <div class="f_title"> 1243 购物指南 1244 </div> 1245 <ul> 1246 <li> 1247 <a href="#">购物流程</a> 1248 </li> 1249 <li> 1250 <a href="#">发票制度</a></li> 1251 <li> 1252 <a href="#">账户管理</a> 1253 </li> 1254 <li> 1255 <a href="#">会员优惠</a> 1256 </li> 1257 </ul> 1258 </div> 1259 <div class="public-footer-item"> 1260 <div class="f_title"> 1261 购物指南 1262 </div> 1263 <ul> 1264 <li> 1265 <a href="#">购物流程</a> 1266 </li> 1267 <li> 1268 <a href="#">发票制度</a></li> 1269 <li> 1270 <a href="#">账户管理</a> 1271 </li> 1272 <li> 1273 <a href="#">会员优惠</a> 1274 </li> 1275 </ul> 1276 </div> 1277 <div class="public-footer-item"> 1278 <div class="f_title"> 1279 购物指南 1280 </div> 1281 <ul> 1282 <li> 1283 <a href="#">购物流程</a> 1284 </li> 1285 <li> 1286 <a href="#">发票制度</a></li> 1287 <li> 1288 <a href="#">账户管理</a> 1289 </li> 1290 <li> 1291 <a href="#">会员优惠</a> 1292 </li> 1293 </ul> 1294 </div> 1295 </div> 1296 1297 <div class="footer-nav-box"> 1298 <div class="footer-nav"> 1299 <a href="#">公司简介</a> | 1300 <a href="#">诚聘英才</a> | 1301 <a href="#">网站联盟</a> | 1302 <a href="#">机构销售</a> | 1303 <a href="#">手机当当</a> | 1304 <a href="#">当当招商</a> | 1305 <a href="#">官方Blog</a> | 1306 <a href="#">热词搜索</a> 1307 </div> 1308 1309 <div class="footer-copyright"> 1310 Copyright (C) 当当网 2004-2017, All Rights Reserved 1311 <img src="images/validate.gif" alt=""> 1312 出版物经营许可证 新出发京批字第直0673号 1313 </div> 1314 1315 </div> 1316 1317 1318 </div> 1319 <!--底部-结束--> 1320 1321 <script language="JavaScript" src="js/index.js"></script> 1322 1323 </body> 1324 </html>
1 @charset "utf-8"; 2 *{ 3 margin:0; 4 padding:0; 5 } 6 body{ 7 width:100%; 8 } 9 img{ 10 border:0; 11 } 12 ul{ 13 list-style: none; 14 } 15 a{ 16 text-decoration: none; 17 } 18 19 .header{ 20 position:fixed; 21 top:0; 22 left:0; 23 right:0; 24 z-index: 999; 25 } 26 27 .top-bg{ 28 width:100%; 29 height:34px; 30 background-color: black; 31 } 32 33 /*内容泛用样式*/ 34 .entity{ 35 width:1100px; 36 margin:0 auto; 37 } 38 39 .top{ 40 line-height:34px; 41 color:#9f9f9f; 42 font-size: 12px; 43 } 44 45 .top a{ 46 color:#9f9f9f; 47 } 48 49 .top a:hover{ 50 color:white; 51 } 52 53 .top-l{ 54 float:left; 55 } 56 57 .top-r{ 58 height:34px; 59 float:right; 60 } 61 62 .top-r a{ 63 display:inline-block; 64 height:34px; 65 padding:0 9px; 66 } 67 68 .top-r > li{ 69 float:left; 70 } 71 72 .top_level_1_menu > a{ 73 padding-right:15px; 74 } 75 76 .top-r a:hover{ 77 background-color: #919191; 78 color:white; 79 } 80 81 .hide{ 82 display:none; 83 } 84 85 .top_level_2_menu{ 86 background-color: black; 87 z-index: 999; /*防止页面向下滚动时，被下面的内容覆盖*/ 88 position:relative; 89 } 90 91 92 .top_level_2_menu li:hover{ 93 background-color: #919191; 94 color:white; 95 } 96 97 .search-bg{ 98 width:100%; 99 height:90px; 100 overflow: hidden; 101 background: url(../images/v_index_bg.png) center top repeat; 102 } 103 104 .search{ 105 height:70px; 106 margin:10px auto; 107 /*border:1px solid black;*/ 108 } 109 110 .search > div{ 111 float:left; 112 } 113 114 .search-box{ 115 background-color: white; 116 margin:12px 10px 0 10px; 117 border:1px solid #aaa; 118 } 119 120 .search-type,.search-kw{ 121 height:44px; 122 border:none; 123 /*border：1px solid black;*/ 124 } 125 126 .search-type{ 127 width:100px; 128 } 129 130 .search-type option{ 131 text-align:center; 132 height:20px; 133 } 134 135 .search-type option:hover{ 136 background-color: #c70048; 137 } 138 139 .search-kw{ 140 width:380px; 141 color:#999; 142 } 143 144 .search-button{ 145 display:block; 146 float:left; 147 width:50px; 148 height:44px; 149 background: #e20052 url(../images/buttons.png) center -62px no-repeat; 150 margin-top:12px; 151 margin-right:10px; 152 border:0; 153 cursor:pointer; 154 } 155 156 .pop-search{ 157 height:44px; 158 font-size: 12px; 159 margin-top:12px; 160 line-height: 44px; 161 /*border: 1px solid black;*/ 162 } 163 164 .pop-search span{ 165 color:#828282; 166 } 167 168 .pop-search a{ 169 color:#3a1638; 170 } 171 172 .nav-bg{ 173 width:100%; 174 height:40px; 175 background-color: #740861; 176 } 177 178 .nav{ 179 height:40px; 180 line-height: 40px; 181 } 182 183 .nav a{ 184 display:block; 185 height:40px; 186 padding:0 10px; 187 color:white; 188 font-size: 14px; 189 } 190 191 .nav a:hover{ 192 background-color: #c70048; 193 } 194 195 .nav-item{ 196 float:left; 197 } 198 199 .fav{ 200 float:right; 201 } 202 203 .nav_bottom_dec{ 204 height:15px; 205 background-color: #c70048; 206 } 207 208 .sidebar-container{ 209 position:fixed; 210 top:179px; 211 right:100px; 212 } 213 214 .sidebar{ 215 display:block; 216 width:44px; 217 height:47px; 218 padding-top:3px; 219 margin-bottom:3px; 220 border:4px solid #e20052; 221 background-color: #e20052; 222 color:white; 223 text-align:center; 224 font-size:18px; 225 font-family: ’微软雅黑‘; 226 } 227 228 .sidebar:hover{ 229 background-color: white; 230 color:#e20052; 231 } 232 233 .sidebar-b{ 234 font-weight:bold; 235 } 236 237 .sidebar-backtotop{ 238 line-height: 47px; 239 } 240 241 .content-bg{ 242 margin-top:179px; 243 background: url(../images/v_index_bg.png) center top repeat; 244 /*border:1px solid black;*/ 245 } 246 247 .content{ 248 /*border:1px solid black;*/ 249 } 250 251 .content-top{ 252 height:300px; 253 background: url(../images/top_pic.jpg) no-repeat center center; 254 } 255 256 .content-main{ 257 margin-top:20px; 258 } 259 260 #jrzx{ 261 position:relative; 262 bottom:179px; 263 } 264 265 .content-main-left{ 266 float:left; 267 width:820px; 268 margin-right:10px; 269 } 270 271 .content-main-left-title{ 272 height:82px; 273 } 274 275 .content-main-left-item{ 276 display:block; 277 margin-bottom:20px; 278 position:relative; 279 width:820px; 280 height:230px; 281 /*border:1px solid black;*/ 282 } 283 284 285 .item-lt{ 286 position:absolute; 287 left:0; 288 top:0; 289 background-color: white; 290 width:230px; 291 height:200px; 292 /*border:1px solid black;*/ 293 } 294 295 .item-lt-1{ 296 position:absolute; 297 top:20px; 298 left:15px; 299 } 300 301 .item-lt-2{ 302 position:absolute; 303 top:97px; 304 width:230px; 305 text-align:center; 306 font-size:14px; 307 color:#383838; 308 /*border:1px solid black;*/ 309 } 310 311 .item-lt-3{ 312 position:absolute; 313 top:174px; 314 width:230px; 315 color:#e20052; 316 font-size:14px; 317 text-align: center; 318 /*border:1px solid black;*/ 319 } 320 321 .item-lb{ 322 position:absolute; 323 left:0; 324 bottom: 0; 325 width:230px; 326 height:30px; 327 line-height: 30px; 328 text-align: center; 329 background-color: black; 330 color:white; 331 font-size:14px; 332 } 333 334 .item-rb{ 335 position:absolute; 336 right:0; 337 bottom:0; 338 width:570px; 339 height:30px; 340 padding-left:20px; 341 background-color: white; 342 line-height: 30px; 343 color:black; 344 font-size:12px; 345 } 346 347 .item-rb span{ 348 font-size:14px; 349 } 350 351 .item-border{ 352 position:absolute; 353 top:0; 354 left:0; 355 width:816px; 356 height:226px; 357 border:2px solid #c70048; 358 } 359 360 .content-main-left-item-2{ 361 display:block; 362 float:left; 363 width:400px; 364 height:320px; 365 background-color:white; 366 margin-bottom: 30px; 367 margin-right: 20px; 368 position:relative; 369 } 370 371 /*包裹商品简图，使得叠放商品简图时不会因margin-right超出而换行*/ 372 .item-container{ 373 width:1100px; 374 } 375 376 .sale-time{ 377 position:absolute; 378 bottom:60px; 379 left:0; 380 padding:0 8px; 381 width:384px; 382 height:26px; 383 background-color: rgba(0,0,0,0.6); 384 line-height:26px; 385 } 386 387 .time-text{ 388 float:right; 389 color:white; 390 font-size:14px; 391 } 392 393 .time-text span{ 394 font-size:16px; 395 } 396 397 .goods-logo{ 398 position:absolute; 399 bottom:10px; 400 left:3px; 401 width:115px; 402 height:40px; 403 } 404 405 .item-border-2{ 406 position:absolute; 407 top:0; 408 left:0; 409 width:396px; 410 height:316px; 411 border:2px solid #c70048; 412 } 413 414 .jjks-item-1{ 415 position:absolute; 416 left:132px; 417 top:110px; 418 width:136px; 419 height:32px; 420 background-color: rgba(141,49,131,0.8); 421 color:white; 422 font-size:18px; 423 text-align:center; 424 line-height:32px; 425 } 426 427 .discount-info{ 428 float:left; 429 height:26px; 430 line-height: 26px; 431 color:white; 432 } 433 434 .goods-introduction{ 435 position:absolute; 436 left:0; 437 top:0; 438 width:370px; 439 height:230px; 440 padding:15px; 441 background-color: rgba(0,0,0,0.6); 442 color:#c9c9c9; 443 } 444 445 .goods-introduction h2{ 446 font-size:16px; 447 text-align:center; 448 padding: 15px 0 10px; 449 450 } 451 452 .goods-introduction p{ 453 font-size:12px; 454 height:100px; 455 } 456 457 .remind{ 458 width:260px; 459 margin:20px auto 0; 460 } 461 462 .info-input{ 463 float:left; 464 width:174px; 465 height:18px; 466 line-height:18px; 467 padding:6px 10px; 468 margin-right:6px; 469 border:none; 470 } 471 472 .remind-button{ 473 float:left; 474 width:60px; 475 height:30px; 476 background-color:#e83375; 477 border:none; 478 color:white; 479 } 480 481 .content-main-right{ 482 float:left; 483 width:270px; 484 } 485 486 .slogan{ 487 margin:0 0 20px 10px; 488 padding-top:65px; 489 } 490 491 .base-sale a{ 492 display:block; 493 margin-bottom:10px; 494 } 495 496 .advance-sale-title{ 497 height:40px; 498 background-color: #74086e; 499 font-size:14px; 500 color:white; 501 } 502 503 .advance-sale-title > div{ 504 float:left; 505 width:80px; 506 height:34px; 507 margin:0 5px; 508 border-bottom-width: 5px; 509 border-bottom-style: solid; 510 line-height: 40px; 511 text-align:center; 512 cursor:pointer; 513 } 514 515 .title-unselected{ 516 border-bottom-color:#74086e; 517 color:#e20052; 518 } 519 520 .title-selected{ 521 border-bottom-color:#e20052; 522 color:white; 523 } 524 525 .advance-sale-content{ 526 width:250px; 527 padding:20px 5px 20px 15px; 528 background-color:#f6f6f6; 529 box-shadow: 1px 2px 5px #ccc; 530 531 } 532 533 .asc-item{ 534 float:left; 535 width:115px; 536 height:80px; 537 margin-right:10px; 538 margin-bottom:10px; 539 position:relative; 540 z-index: 0; 541 } 542 543 .asc-item > a{ 544 display:block; 545 width:115px; 546 height:79px; 547 border-top:1px solid white; 548 position:absolute; /*设置定位的目的仅仅是为了可以设置z-index,以盖住下面goods-introduction-box的部分右边框*/ 549 top:0; 550 left:0; 551 z-index: 20; 552 background-color: white; 553 } 554 555 .asc-item a > img{ 556 display:block; 557 position:absolute; 558 top:20px; 559 left:0; 560 561 } 562 563 .goods-introduction-box{ 564 float:left; 565 position:absolute; 566 top:0; 567 right:114px; 568 z-index:10; /*需要比上面a的层级低*/ 569 padding:4px; 570 border:1px solid #dcdcdc; 571 background-color: white; 572 573 } 574 575 .goods-introduction-2{ 576 position:absolute; 577 top:4px; 578 left:4px; 579 right:4px; 580 width:240px; 581 height:178px; 582 background-color: rgba(0,0,0,0.6); 583 584 } 585 586 .goods-introduction-2 p{ 587 margin:18px 10px; 588 font-size:12px; 589 color:white; 590 line-height: 20px; 591 } 592 593 .remind-2{ 594 width:206px; 595 margin:0 auto; 596 597 } 598 599 .info-input-2{ 600 display:block; 601 float:left; 602 width:128px; 603 height:18px; 604 padding:4px 6px; 605 margin-right:6px; 606 line-height:18px; 607 font-size:12px; 608 border:none; 609 } 610 611 .remind-button-2{ 612 display:block; 613 float:left; 614 width:60px; 615 height:26px; 616 background-color: #e83375; 617 border:none; 618 padding:0; 619 line-height:26px; 620 font-size:12px; 621 color:white; 622 } 623 624 .footer{ 625 border-top:2px solid #ff2832; 626 margin:15px auto; 627 } 628 629 .footer-top-pic-bg{ 630 background-color: #fafafa; 631 border-bottom:1px solid #ebebeb; 632 } 633 634 .footer-top-pic{ 635 width:940px; 636 height:52px; 637 padding:15px 0; 638 margin:0 auto; 639 } 640 641 .footer-top-pic a{ 642 display:block; 643 float:left; 644 width:139px; 645 height:52px; 646 margin:0 48px; 647 648 } 649 650 .footer-pic1{ 651 background:url(../images/footer_bg.png) 0 0 no-repeat; 652 } 653 654 .footer-pic2{ 655 background:url(../images/footer_bg.png) 0 -52px no-repeat; 656 } 657 658 .footer-pic3{ 659 background:url(../images/footer_bg.png) 0 -104px no-repeat; 660 } 661 662 .footer-pic4{ 663 background:url(../images/footer_bg.png) 0 -156px no-repeat; 664 } 665 666 .public-footer{ 667 width:930px; 668 height:140px; 669 padding-top:30px; 670 margin: 0 auto; 671 } 672 673 .public-footer-item{ 674 float:left; 675 width:155px; 676 } 677 678 .f_title{ 679 height:36px; 680 line-height:36px; 681 font-size:14px; 682 text-align:center; 683 } 684 685 .public-footer-item ul{ 686 color:#999; 687 font-size:10px; 688 } 689 690 .public-footer-item ul li{ 691 height:20px; 692 line-height: 20px; 693 text-align: center; 694 } 695 696 .public-footer-item ul li a{ 697 color:#323232; 698 } 699 700 .footer-nav-box{ 701 border-top:1px solid #ebebeb; 702 color:#8c8c8c; 703 font-size:12px; 704 text-align:center; 705 } 706 707 .footer-nav{ 708 text-align:center; 709 margin-bottom:20px; 710 } 711 712 .footer-nav a{ 713 color:#8c8c8c; 714 }
1 // 鼠标悬浮时显示/隐藏二级菜单 2 function ShowLevel2Menu(id){ 3 document.getElementById(id).classList.remove('hide'); 4 } 5 6 function HideLevel2Menu(id){ 7 document.getElementById(id).classList.add('hide'); 8 } 9 10 // 用于 “今日最新” 模块，鼠标悬浮时显示边框，及改变左下角元素背景色 11 function ShowBorder(obj){ 12 var len = obj.children.length; 13 obj.children[(len-1)].classList.remove('hide'); 14 obj.children[(len-3)].style.backgroundColor='#c70048'; 15 } 16 17 function HideBorder(obj){ 18 var len = obj.children.length; 19 obj.children[(len-1)].classList.add('hide'); 20 obj.children[(len-3)].style.backgroundColor='black'; 21 } 22 23 // 用于 “最后疯抢” 模块，鼠标悬浮时显示边框，及改变中间元素颜色和透明度 24 function ShowBorder2(obj){ 25 var len = obj.children.length; 26 obj.children[(len-1)].classList.remove('hide'); 27 obj.children[(len-3)].style.backgroundColor='rgba(226,0,82,0.8)'; 28 } 29 30 function HideBorder2(obj){ 31 var len = obj.children.length; 32 obj.children[(len-1)].classList.add('hide'); 33 obj.children[(len-3)].style.backgroundColor='rgba(0,0,0,0.6)'; 34 } 35 36 // 用于 “即将发售” 模块，鼠标悬浮时显示遮罩及商品信息 37 function ShowIntro(obj){ 38 var len = obj.children.length; 39 obj.children[(len-1)].classList.remove('hide'); 40 } 41 42 function HideIntro(obj){ 43 var len = obj.children.length; 44 obj.children[(len-1)].classList.add('hide'); 45 } 46 47 // 用于 “右侧内容” 的 “advance-sale” 模块，使得日期部分在鼠标悬浮时高亮，并显示该日期对应的内容 48 function HighLightedSelect(id1,id2){ 49 var title_selected = document.getElementById(id1); 50 var content_selected = document.getElementById(id2); 51 var tp = title_selected.parentElement; 52 var cp = content_selected.parentElement; 53 54 title_selected.className = 'title-selected'; 55 for(var i=0;i<tp.children.length;i++){ 56 if(tp.children[i] != title_selected){ 57 tp.children[i].className = 'title-unselected'; 58 } 59 } 60 61 content_selected.classList.remove('hide'); 62 for(var j=0;j<cp.children.length;j++){ 63 if(cp.children[j] != content_selected){ 64 cp.children[j].classList.add('hide'); 65 } 66 } 67 } 68 69 // 用于 “右侧内容” 的 “advance-sale” 模块下的商品图标框体，当鼠标悬浮在商品图片上时: 70 // ①在商品图片左侧显示商品信息框体， 71 // ②并更改商品图片上边框颜色，使得此时的商品信息与图片有浑然一体的感觉， 72 // ③临时改变悬浮的商品图标的框体z-index，使其子元素不会被后面的父元素的兄弟元素覆盖 73 function ShowIntro2(obj){ 74 obj.style.borderTopColor='#dcdcdc'; 75 obj.nextElementSibling.classList.remove('hide'); 76 obj.parentElement.style.zIndex='999'; 77 } 78 79 function HideIntro2(obj){ 80 obj.style.borderTopColor='white'; 81 obj.nextElementSibling.classList.add('hide'); 82 obj.parentElement.style.zIndex='0'; 83 }
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>登录-当当网</title> 6 <link rel="stylesheet" href="style/login.css"> 7 <link rel="shortcut icon" href="images/1.ico"> 8 </head> 9 <body> 10 <!--头部-开始--> 11 <div class="header"> 12 <div class="header-l"> 13 <a href="http://www.dangdang.com"> 14 <img src="images/logo.png" alt=""> 15 </a> 16 </div> 17 18 <div class="header-r"> 19 “登录页面”改进建议 20 </div> 21 22 <div style="clear:both;"></div> 23 24 </div> 25 <!--头部-结束--> 26 27 <!--内容-开始--> 28 <div class="content"> 29 <div class="input-box"> 30 <p>登 录</p> 31 32 <div class="user-input-box"> 33 <input type="text" placeholder="邮箱/昵称/手机号码" class="user-input"> 34 <div class="input-icon user-icon"></div> 35 </div> 36 37 <div class="pwd-input-box"> 38 <input type="password" placeholder="密码" class="pwd-input"> 39 <div class="input-icon pwd-icon"></div> 40 </div> 41 42 <div class="auto-login"> 43 <div class="auto-login-l"> 44 <input type="checkbox" checked="checked"> 45 <span>请勿在公用电脑上勾选此选项</span> 46 </div> 47 48 <div class="forget"> 49 <a href="#">忘记密码？</a> 50 </div> 51 52 <div style="clear:both;"></div> 53 </div> 54 55 <input type="button" value='登 录' class="login-button"> 56 57 <div class="register"> 58 <a href="register.html">立即注册</a> 59 </div> 60 61 </div> 62 63 </div> 64 <!--内容-结束--> 65 66 <!--底部-开始--> 67 <div class="footer"> 68 69 <div class="footer-nav-box"> 70 <div class="footer-nav"> 71 <a href="#">公司简介</a> | 72 <a href="#">诚聘英才</a> | 73 <a href="#">网站联盟</a> | 74 <a href="#">机构销售</a> | 75 <a href="#">手机当当</a> | 76 <a href="#">当当招商</a> | 77 <a href="#">官方Blog</a> | 78 <a href="#">热词搜索</a> 79 </div> 80 81 <div class="footer-copyright"> 82 Copyright (C) 当当网 2004-2017, All Rights Reserved 83 <img src="images/validate.gif" alt=""> 84 出版物经营许可证 新出发京批字第直0673号 85 </div> 86 87 </div> 88 89 90 </div> 91 <!--底部-结束--> 92 93 <script> 94 95 </script> 96 </body> 97 </html>
1 @charset "utf-8"; 2 *{ 3 margin:0; 4 padding:0; 5 } 6 body{ 7 width:100%; 8 font-size:12px; 9 } 10 img{ 11 border:none; 12 } 13 a{ 14 text-decoration: none; 15 } 16 ul li{ 17 list-style: none; 18 } 19 20 .header{ 21 width:1200px; 22 height:60px; 23 margin:12px auto 14px; 24 } 25 26 .header-l{ 27 float:left; 28 padding-top:9px; 29 } 30 31 .header-r{ 32 float:right; 33 margin-top:34px; 34 color:#787878; 35 } 36 37 .content{ 38 width:1200px; 39 height:590px; 40 margin:0 auto; 41 background: url(../images/login-bg.jpg) -650px 0 no-repeat ; 42 43 } 44 45 .input-box{ 46 float:right; 47 width:320px; 48 margin-top:90px; 49 color:#6e6e6e; 50 border:1px solid #ddd; 51 padding:25px; 52 box-shadow: 5px 5px 10px #ccc; 53 } 54 55 .input-box p{ 56 font-size:20px; 57 color:#3c3c3c; 58 } 59 60 .user-input-box,.pwd-input-box{ 61 position: relative; 62 width:320px; 63 height:34px; 64 margin-top:20px ; 65 /*border:1px solid black;*/ 66 } 67 68 .user-input,.pwd-input{ 69 display:block; 70 width:282px; 71 height:34px; 72 padding-left:36px; 73 border:1px solid #e6e6e6; 74 color:#6e6e6e; 75 position:absolute; 76 left:0; 77 top:0; 78 } 79 80 .input-icon{ 81 width:30px; 82 height:36px; 83 position:absolute; 84 left:0; 85 top:0; 86 } 87 88 .user-icon{ 89 background: url(../images/icons.png) 10px -110px no-repeat; 90 } 91 92 .pwd-icon{ 93 background: url(../images/icons.png) 10px -150px no-repeat; 94 } 95 96 .auto-login{ 97 margin-top:30px; 98 height:34px; 99 line-height:34px; 100 } 101 102 .auto-login-l{ 103 float:left; 104 } 105 106 .forget{ 107 float:right; 108 } 109 110 .login-button{ 111 display:block; 112 width:320px; 113 height:44px; 114 background-color: #ff2832; 115 border:none; 116 color:white; 117 text-align:center; 118 font-size:20px; 119 font-family:'微软雅黑'; 120 } 121 122 .register{ 123 height:34px; 124 line-height: 34px; 125 } 126 127 .register a{ 128 float:right; 129 color:#6e6e6e; 130 } 131 132 .footer{ 133 margin-top:15px; 134 } 135 136 .footer-nav-box{ 137 border-top:1px solid #ebebeb; 138 color:#8c8c8c; 139 font-size:12px; 140 text-align:center; 141 } 142 143 .footer-nav{ 144 text-align:center; 145 margin-bottom:20px; 146 } 147 148 .footer-nav a{ 149 color:#8c8c8c; 150 }
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>登录-当当网</title> 6 <link rel="stylesheet" href="style/register.css"> 7 <link rel="shortcut icon" href="images/1.ico"> 8 </head> 9 <body> 10 <!--头部-开始--> 11 <div class="header"> 12 <div class="header-l"> 13 <img src="images/logo.png" alt=""> 14 </div> 15 16 <div class="header-r"> 17 欢迎光临当当网，请 18 <a href="login.html">登录</a> 19 <a href="#">免费注册</a> 20 </div> 21 22 </div> 23 <!--头部-结束--> 24 25 <!--内容-开始--> 26 <div class="content"> 27 <div class="content-top"> 28 <div class="content-top-l">新用户注册</div> 29 <div class="content-top-r"> 30 <a href="#" class="index-link">当当首页</a> 31 <a href="#">注册帮助</a> 32 </div> 33 34 <div style="clear:both;"></div> 35 36 </div> 37 38 <div class="content-main"> 39 40 <div class="identify-item"> 41 <div class="input-for-what">手机号码</div> 42 <input type="text" value="请输入您的手机号码"> 43 44 <div style="clear:both;"></div> 45 </div> 46 47 <div class="identify-item"> 48 <div class="input-for-what">登录密码</div> 49 <input type="text"> 50 51 <div style="clear:both;"></div> 52 </div> 53 54 <div class="identify-item"> 55 <div class="input-for-what">确认密码</div> 56 <input type="text"> 57 58 <div style="clear:both;"></div> 59 </div> 60 61 <div class="clause"> 62 <input type="checkbox" checked> 63 我已阅读并同意 64 <a href="#">《当当交易条款》</a> 65 和 66 <a href="#">《当当社区条款》</a> 67 </div> 68 69 <input type="button" value="立即注册" class="reg-button"> 70 71 </div> 72 73 </div> 74 <!--内容-结束--> 75 76 <!--底部-开始--> 77 <div class="footer"> 78 79 <div class="footer-nav-box"> 80 <div class="footer-nav"> 81 <a href="#">公司简介</a> | 82 <a href="#">诚聘英才</a> | 83 <a href="#">网站联盟</a> | 84 <a href="#">机构销售</a> | 85 <a href="#">手机当当</a> | 86 <a href="#">当当招商</a> | 87 <a href="#">官方Blog</a> | 88 <a href="#">热词搜索</a> 89 </div> 90 91 <div class="footer-copyright"> 92 Copyright (C) 当当网 2004-2017, All Rights Reserved 93 <img src="images/validate.gif" alt=""> 94 出版物经营许可证 新出发京批字第直0673号 95 </div> 96 97 </div> 98 99 100 </div> 101 <!--底部-结束--> 102 </body> 103 </html>
1 @charset "utf-8"; 2 *{ 3 margin:0; 4 padding:0; 5 } 6 body{ 7 width:100%; 8 font-size:12px; 9 } 10 img{ 11 border:none; 12 } 13 a{ 14 text-decoration: none; 15 } 16 ul li{ 17 list-style: none; 18 } 19 20 .header{ 21 width:960px; 22 height:70px; 23 margin:0 auto; 24 border-bottom:2px solid #ff4400; 25 } 26 27 .header-l{ 28 float:left; 29 margin-top:14px; 30 } 31 32 .header-r{ 33 float:right; 34 margin-top:50px; 35 } 36 37 .header-r a:hover{ 38 color:#1a66b3; 39 } 40 41 .content{ 42 width:950px; 43 margin:30px auto; 44 border:5px solid #ddd; 45 } 46 47 .content-top{ 48 width:840px; 49 margin:30px auto -1px; 50 } 51 52 .content-top-l{ 53 float:left; 54 width:140px; 55 border:1px solid #ddd; 56 border-bottom:1px solid white; 57 line-height:50px; 58 font-size:16px; 59 text-align:center; 60 color:#464646; 61 } 62 63 .content-top-r{ 64 float:right; 65 height:50px; 66 margin-right:10px; 67 } 68 69 .content-top-r a{ 70 color:#646464; 71 } 72 73 .content-top-r a:hover{ 74 color:#ff4400; 75 } 76 77 .index-link{ 78 display:inline-block; 79 height:20px; 80 margin-top:25px; 81 background: url(../images/icons.png) 0 2px no-repeat; 82 padding-left:15px; 83 /*border:1px solid black;*/ 84 } 85 86 .content-main{ 87 width:900px; 88 margin:0 auto; 89 padding:45px 0 45px; 90 border-top:1px solid #ddd; 91 /*border:1px solid black;*/ 92 } 93 94 .identify-item{ 95 margin-bottom:30px; 96 /*border:1px solid black;*/ 97 } 98 99 .input-for-what{ 100 float:left; 101 width:350px; 102 height:40px; 103 margin-right:20px; 104 line-height:40px; 105 text-align: right; 106 font-size:14px; 107 color:#646464; 108 /*border:1px solid black;*/ 109 } 110 111 .identify-item input{ 112 display:block; 113 float:left; 114 width:290px; 115 height:38px; 116 padding-left:10px; 117 border:1px solid #ddd; 118 color:#999; 119 } 120 121 .clause{ 122 width:500px; 123 margin:0 auto 30px; 124 text-align:center; 125 } 126 127 .reg-button{ 128 display:block; 129 width:180px; 130 height:44px; 131 margin:0 auto; 132 background-color: #ff2832; 133 border-radius:22px; 134 border:none; 135 text-align: center; 136 color:white; 137 font-size:18px; 138 } 139 140 .footer{ 141 padding-top:35px; 142 border-top:1px solid #ddd; 143 } 144 145 .footer-nav-box{ 146 border-top:1px solid #ebebeb; 147 color:#8c8c8c; 148 font-size:12px; 149 text-align:center; 150 } 151 152 .footer-nav{ 153 text-align:center; 154 margin-bottom:20px; 155 } 156 157 .footer-nav a{ 158 color:#8c8c8c; 159 }
