global.css

@charset "utf-8";
/* CSS Document */* {margin: 0px;padding: 0px;font-size: 12px;line-height: 20px;color: #333;
}ul, li, ol, h1, dl, dd {list-style: none;margin: 0px;padding: 0px;
}a {color: #333333;text-decoration: none;
}a:hover {color: #333333;text-decoration: underline;
}img {border: 0px;
}.blue {color: #1965b3;text-decoration: none;
}.blue:hover {color: #1965b3;text-decoration: underline;
}#main {width: 960px;margin: 0px auto 0px auto;clear: both;float: none;
}#header, #footer {width: 100%;
}#header {width: 100%;background: -webkit-linear-gradient(#fff, #f3f3f3);background: -o-linear-gradient(#fff, #f3f3f3);background: -moz-linear-gradient(#fff, #f3f3f3);background: linear-gradient(#fff, #f3f3f3);height: 30px;line-height: 30px;overflow: hidden;
}.search {float: left;margin-left: 15px;margin-top: 20px;
}.search input[type=text] {width: 600px;height: 30px;border: 2px solid #49bafc;float: left;
}.search input[type=button] {background: url("../images/search.jpg") no-repeat;width: 124px;height: 36px;overflow: hidden;border: none;
}#nav {width: 100%;background: #49bafc;height: 38px;clear: both;
}#nav ul {width: 960px;margin: 0 auto;
}#nav ul li {float: left;text-align: center;width: 120px;
}#nav ul li:first-of-type {width: 180px;
}#nav ul li a {color: #ffffff;font-size: 16px;font-weight: bold;line-height: 38px;display: block;
}#nav ul li a:hover {background: #2487c1;
}

layout.css

@charset "utf-8";
/* CSS Document *//*首页样式*/
/*右侧随鼠标滚动的广告图片*/
.right {top: 50px;right: 30px;position: absolute;z-index: 3;
}.dd_close {width: 35px;height: 18px;text-align: center;border: solid 1px #999;background-color: #E0E0E0;top: 0px;right: 0px;position: absolute;
}#catList, #content, #silder {float: left;
}#catList {width: 180px;margin-right: 10px;margin-top: 5px;
}#content {width: 540px;margin-right: 10px;
}#silder {width: 220px;margin-top: 5px;
}.book_sort {border: solid 1px #999;margin-bottom: 10px;
}.book_sort_bg {background-color: #d7eff8;padding-left: 10px;color: #207291;font-size: 14px;height: 28px;font-weight: bold;line-height: 30px;
}.book_sort_bottom {margin: 0px 10px 0px 10px;line-height: 25px;
}.book_cate {padding: 10px 0px 0px 10px;font-weight: bold;
}.scroll {width: 540px;height: 200px;overflow: hidden;padding: 5px 0 5px 0;position: relative;
}.scroll img {width: 540px;
}.scroll #scroll_img li {margin-bottom: 20px;
}#scroll_number {right: 0;padding-right: 5px;position: absolute;bottom: 10px;
}#scroll_number li {width: 28px;height: 28px;border-radius: 50%;text-align: center;color: #fff;margin-left: 5px;float: left;font-size: 16px;font-weight: bold;line-height: 26px;cursor: pointer;background: #a9a9a9;
}.scroll_number_out {
}#scroll_number .scroll_number_over {background: #9b2d30;color: #FFF;
}#dome {overflow: hidden; /*溢出的部分不显示*/height: 160px;padding: 5px;
}/*网页版权部分样式开始*/
.footer_end {width: 800px;margin: 0px auto 0px auto;clear: both;text-align: center;
}.footer_top {clear: both;text-align: center;height: 35px;line-height: 35px;background: #4db3f5;color: #fff;
}.footer_top a, .footer_top a:hover {color: #fff;font-weight: bold;
}.footer_dull_red, .footer_dull_red:hover {color: #06516d;margin: 0px 8px 0px 8px;
}/*网页版权部分样式结束*//*当当网商品展示页样式开始*/
.current_place {padding-left: 10px;clear: both;height: 30px;
}#product_left {width: 180px;float: left;
}#product_catList {border: solid 1px #d3d3d3;background-color: #dff1f7;
}#product_catList a {color: #000000;
}.product_catList_top {color: #FFF;height: 23px;font-size: 14px;padding-left: 10px;background-image: url(../images/product_left_top_bg.jpg);background-repeat: repeat-x;line-height: 28px;margin-bottom: 10px;}#product_catList_class li {height: 25px;padding-left: 10px;
}.product_catList_end {border: solid 1px #d3d3d3;margin: 10px 0px 10px 0px;text-align: center;
}#product_storyList {border: solid 1px #a1a1a1;float: right;width: 770px;margin-bottom: 20px;}#product_storyList_top {background-color: #dff1f7;border-bottom: solid 1px #a1a1a1;height: 30px;
}#product_storyList_top li {float: left;line-height: 28px;padding-left: 5px;
}#product_storyList_top img {padding-top: 5px;
}#product_array {background-color: #dff1f7;border-bottom: solid 1px #a1a1a1;height: 30px;padding-right: 15px;
}#product_array a {line-height: 22px;margin-right: 0px;margin-top: 5px;padding: 0 5px;float: right;background: none;border: #808080 1px solid;
}#product_array a.click {background: #F96;border: #F04E23 1px solid;
}.product_storyList_content {margin: 20px 10px 20px 10px;
}.product_storyList_content .big_img_list {width: 25%;height: 240px;background: #fff;float: left;overflow: hidden;text-align: left;margin: 10px auto;position: relative;
}.product_storyList_content .big_img_list.over {overflow: visible;z-index: 99;
}.product_storyList_content .big_img_list ul {background: #fff;padding: 0 5px 5px;
}.product_storyList_content .big_img_list ul.over {border: 2px solid #F96;position: absolute;z-index: 99;
}.product_storyList_content .big_img_list li {padding: 2px 5px;font-size: 12px;
}.product_storyList_content .big_img_list li a {padding: 2px 10px;font-size: 12px;
}.product_storyList_content .big_img_list .bookImg img {width: 150px;height: 150px;
}.product_storyList_content .big_img_list dl {width: 100%;overflow: hidden;
}.product_storyList_content .big_img_list dl dd {float: left;margin-left: 10px;
}.product_storyList_content_bottom {border-bottom: 1px solid #666;clear: both;margin-bottom: 20px;
}.product_storyList_content_left {width: 100px;text-align: center;float: left;
}.product_storyList_content_right {float: left;width: 640px;
}.product_storyList_content_dash {border-bottom: dashed 1px #666;
}.blue_14 {color: #1965b3;font-size: 14px;text-decoration: none;
}.blue_14:hover {color: #1965b3;text-decoration: underline;font-size: 14px;
}.product_content_dd dd {float: right;padding-right: 10px;
}.product_content_delete {text-decoration: line-through;
}#product_page li {float: left;
}.product_page {width: 18px;height: 18px;text-decoration: none;float: left;display: block;background-color: #FC6;margin: 0px 3px 1px 0px;text-align: center;}.product_page:hover {width: 18px;height: 18px;text-decoration: none;float: left;background-color: #900;margin: 0px 3px 1px 0px;color: #FFF;}/*购物车页面样式开始*/
.shopping_commend {background-image: url(../images/shopping_commend_bg.gif);background-repeat: repeat-x;height: 21px;border: solid 1px #999;
}.shopping_commend_left {float: left;padding-left: 10px;
}.shopping_commend_right {float: right;padding-right: 10px;margin-top: 3px;
}.shopping_commend_right img {cursor: pointer;
}#shopping_commend_sort {border: solid 1px #999;border-top: 0;padding: 5px 20px 5px 20px;height: 120px;
}.shopping_commend_sort_left {float: left;width: 450px;
}.shopping_commend_sort_mid {float: left;width: 15px;background-image: url(../images/shopping_dotted.gif);background-repeat: repeat-y;height: 120px;
}.shopping_commend_list_1, .shopping_commend_list_2, .shopping_commend_list_3, .shopping_commend_list_4 {float: left;height: 30px;line-height: 30px;
}.shopping_commend_list_1 {width: 240px;
}.shopping_commend_list_2 {width: 70px;text-align: center;text-decoration: line-through;color: #999;
}.shopping_commend_list_3 {width: 70px;text-align: center;
}.shopping_commend_list_4 {text-align: center;width: 65px;
}.shopping_yellow {color: #ED610C;
}.shopping_yellow:hover {color: #ED610C;text-decoration: underline;
}.shopping_list_top {clear: both;font-size: 14px;font-weight: bold;margin-top: 20px;
}.shopping_list_border {border: solid 2px #999;
}.shopping_list_title {background-color: #d5edf6;height: 25px;
}.shopping_list_title li {float: left;line-height: 28px;
}.shopping_list_title_1 {width: 420px;padding-left: 30px;text-align: left;
}.shopping_list_title_2 {width: 120px;text-align: center;
}.shopping_list_title_3 {width: 120px;text-align: center;
}.shopping_list_title_4 {width: 120px;text-align: center;
}.shopping_list_title_5 {width: 70px;text-align: center;
}.shopping_list_title_6 {width: 70px;text-align: center;
}.shopping_product_list {background-color: #fefbf2;height: 40px;}.shopping_product_list input {width: 30px;height: 15px;border: solid 1px #666;text-align: center;
}.shopping_product_list td {line-height: 35px;border-bottom: dashed 1px #CCC;
}.shopping_product_list_1 {width: 420px;padding-left: 30px;text-align: left;
}.shopping_product_list_2 {width: 120px;text-align: center;color: #464646;
}.shopping_product_list_3 {width: 120px;text-align: center;color: #464646;
}.shopping_product_list_4 {width: 120px;text-align: center;color: #191919;
}.shopping_product_list_5 {width: 70px;text-align: center;
}.shopping_product_list_6 {width: 70px;text-align: center;
}.shopping_list_end {background-color: #d5edf6;height: 84px;
}.shopping_list_end li {float: right;
}.shopping_list_end_1 {margin: 10px 10px 0px 10px;
}.shopping_list_end_2 {font-weight: bold;color: #BD3E00;font-size: 14px;margin: 15px 10px 0px 0px;
}.shopping_list_end_3 {font-weight: bold;font-size: 14px;margin: 15px 0px 0px 15px;
}.shopping_list_end_4 {border-right: solid 1px #666666;margin: 10px 0px 0px 15px;padding-right: 10px;
}.shopping_list_end_yellow {color: #BD3E00;
}.shopping_list_end #removeAllProduct {line-height: 24px;padding: 0 5px;margin-left: 20px;color: #1965B3;
}.empty_product {height: 150px;background: #ffffff url(../images/emptyShopping.jpg) 300px 40px no-repeat;font-size: 16px;text-align: center;position: relative;
}.empty_product div {padding-top: 60px;
}.empty_product a {color: #1965B3;
}/*注册页面样式*/
#register_header {height: 48px;
}.register_header_left {float: left;margin: 7px 0px 0px 40px;display: inline;
}.register_header_right {float: right;margin: 25px 20px 0px 0px;display: inline;
}.register_content {width: 950px;margin: 15px auto 15px auto;border-radius: 5px;border: 1px solid #a3a3a3;
}.register_mid_bg {border-bottom: dashed 1px #a3a3a3;border-top: 0px;height: 50px;padding-left: 20px;font-size: 18px;font-weight: bold;line-height: 50px;}.register_message {width: 900px;padding-top: 15px;
}.register_row {clear: both;
}.register_row dt {float: left;width: 200px;height: 30px;text-align: right;font-size: 14px;
}.register_row dd {float: left;margin-right: 5px;display: inline;
}.register_input {width: 200px;height: 18px;border: solid 1px #999;margin: 0px 0px 8px 0px;
}.registerBtn {height: 35px;margin: 10px 0px 10px 200px;clear: both;
}/*登录页面样式*/
.login_header_left {float: left;margin: 30px 10px 0px 100px;
}.login_header_right {float: right;margin: 50px 60px 0px 0px;
}.login_main_left {float: left;padding: 15px 0 0 120px;
}.login_main_left img {float: left;border: 0px;
}.login_main_dotted {float: left;background-image: url(../images/shopping_dotted.gif);width: 1px;height: 90px;margin: 20px 15px 20px 15px;
}.login_main_mid {border: solid 1px #666;float: right;width: 320px;padding: 10px 5px 10px 5px;margin: 15px 100px 0 0;
}.login_main_right {float: left;width: 74px;
}.login_main_right img {border: 0px;
}.login_content_top {background-image: url(../images/login_icon_bg_01.gif);background-position: -300px -30px;background-repeat: no-repeat;padding: 10px 0px 0px 35px;font-weight: bold;font-size: 14px;color: #069dd5;border-bottom: 1px dashed #a9a9a9;margin-bottom: 30px;
}.login_content {clear: both;margin: 10px 0px 0px 0px;
}.login_content dt {font-size: 14px;height: 30px;text-align: right;width: 150px;float: left;
}.login_content dd {float: left;
}.login_content_input {width: 120px;height: 16px;border: solid 1px #999;
}.login_content_input_Focus {background-color: #f1ffde;width: 120px;height: 16px;border: solid 1px #999;
}.login_btn_out {background-image: url(../images/login_icon_bg_01.gif);background-position: 0px -30px;background-repeat: no-repeat;width: 77px;height: 26px;border: 0px;cursor: pointer;
}.login_btn_over {background-image: url(../images/login_icon_bg_01.gif);background-position: -78px -30px;background-repeat: no-repeat;width: 77px;height: 26px;border: 0px;cursor: pointer;
}.login_content_end_bg {padding: 20px 20px 20px 20px;
}.login_content_end_bg_top {clear: both;padding: 20px 0;line-height: 28px;
}.login_content_bold {font-weight: bold;color: #333;
}.login_content_end_bg_end {clear: both;text-align: right;padding: 10px;}.login_register_out {background-image: url(../images/login_icon_bg_01.gif);background-position: 0px -3px;background-repeat: no-repeat;width: 144px;height: 26px;border: 0px;cursor: pointer;}.login_register_over {background-image: url(../images/login_icon_bg_01.gif);background-position: -144px -3px;background-repeat: no-repeat;width: 144px;height: 26px;border: 0px;cursor: pointer;
}.book {width: 710px;clear: left;margin-bottom: 10px;float: left;
}.book h1 {height: 40px;font-size: 16px;clear: both;line-height: 50px;overflow: hidden;border-bottom: 2px #000000 solid;margin-bottom: 10px;
}.book ul {width: 100%;overflow: hidden;border-top: 1px #cccccc solid;border-right: 1px #cccccc solid;
}.book ul li {float: left;width: 235px;height: 220px;overflow: hidden;text-align: center;border-left: 1px #cccccc solid;border-bottom: 1px #cccccc solid;}.book ul li img {width: 80%;
}.tab {width: 238px;border: 1px #ccc solid;float: right;height: 495px;overflow: hidden;
}.tab ol li {float: left;background: #ffffff;width: 119px;height: 35px;line-height: 35px;overflow: hidden;text-align: center;
}.tab ol li:last-of-type {background: #efefef;border-left: 1px solid #cccccc;border-bottom: 1px solid #ccc;width: 118px;
}.tab ul {clear: both;width: 100%;
}.tab ul li {clear: both;
}.tab ul li span {display: block;width: 25px;color: #999999;float: left;text-align: center;font-weight: bold;line-height: 35px;
}.tab ul li p {height: 35px;overflow: hidden;border-bottom: 1px #ccc solid;float: left;width: 213px;line-height: 35px;
}.tab ul li dl {border-bottom: 1px #ccc solid;float: left;width: 213px;height: 130px;overflow: hidden;display: none;padding-top: 5px;
}.tab ul li dl dt {float: left;width: 90px;
}.tab ul li dl dt img {width: 90px;
}.tab ul li dl dd {float: left;width: 120px;
}
/*图书新书榜*/
.tab ul:last-of-type {display: none;
}
/*去掉下边框*/
.tab ul li:last-of-type p, .tab ul li:last-of-type dl {border-bottom: none;
}.tab ul li:first-of-type p {display: none;
}
/*.tab ul li p {*//*display: none;*/
/*}*/.tab ul li:first-of-type dl {display: block;
}

template.css

@charset "utf-8";
/* CSS Document *//*网页头部导航样式开始*/
.header_top,.header_middle,.header_search{margin-left:auto;margin-right:auto;width:955px;clear:both;
}
.header_top_left{float:left;width:260px;padding-left:10px;line-height:28px;
}
.header_top_right{float:right;padding-right:10px;width:400px;text-align:right;
}
.header_top_right li{float:right;margin-left:5px;margin-top:5px;
}
.logo,.menu_left,.menu_right{float:left;
}
.logo{width:155px;padding-top:13px;height:47px;
}
.menu_left{height:28px;margin-top:32px;line-height:35px;width:510px;border: 1px #a1a1a1 solid;border-bottom: none;border-top-left-radius: 5px;border-top-right-radius: 5px;background: #fbfbfb;
}.menu_left ul li{float:left;height:28px;padding:0px 3px 0px 3px;
}
.bold,.bold:hover{font-weight:bold;
}.menu_right{margin-top:32px;height:28px;
}
#menu_dull_red li{float:left;margin-left:5px;text-align:center;line-height:35px;height:28px;background: #d5edf6;border: 1px solid #3abbeb;border-bottom: none;border-top-left-radius: 5px;border-top-right-radius: 5px;padding: 0 4px;
}
#menu_dull_red a,#menu_dull_red:hover{color:#127da5;text-decoration:none;font-weight:bold;
}
.menu{clear:both;background:#1eb2e9;height:27px;line-height:28px;text-align:center;color:#FFF;border-radius: 5px;
}
#menu_white{float:left;}
.menu_mid_white,.menu_mid_white:hover{color:#FFF;padding:0px 4px 0px 4px;
}.header_search{margin-top:0px;height:35px;border: 1px #a1a1a1 solid;border-radius: 5px;;background: #fbfbfb;
}#header_serach_mid_menu li{float:left;margin-top:6px;padding:0px 5px 0px 5px;line-height:25px;
}
.header_input_search{margin-left:15px;width:200px;height:18px;
}
/*网页头部导航样式结束*/
/*网页版权部分样式开始*/
.footer_end{width:800px;margin:0px auto 0px auto;clear:both;text-align:center;
}/*网页版权部分样式结束*//*导航部分下拉菜单样式*/
#dd_menu_top_down{position:absolute;width:80px;text-align:left;border:solid 1px #999;border-top:0px;display:none;background-color:#FFF;padding-left:10px;
}#dd_menu_top_down li{float:none;
}

HTML代码

index.html

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>蔚蓝网首页</title><link href="css/global.css" rel="stylesheet"/><link href="css/layout.css" rel="stylesheet"/><link href="css/template.css" rel="stylesheet"/>
</head>
<body>
<!--随滚动条滚动可关闭广告-->
<div id="right" class="right"><div class="dd_close" id="dd_close"><a href="javascript:void(0);">关闭</a></div><img src="images/scroll.jpg" id="right1"/>
</div>
<!--头部-->
<header id="header"><div class="header_top"><div class="header_top_left">您好！欢迎光临蔚蓝网 [<a href="login.html" target="_parent">登录</a> | <a href="register.html"target="_parent">免费注册</a>]</div><div class="header_top_right"><ul><li><a href="#" target="_self">客户服务</a></li><li>|</li><li id="menu"><a href="#" target="_self">新手入门</a> <img src="images/arrow_down.gif" alt="arrow"/><div id="dd_menu_top_down"><a href="#" target="_self">购物保障</a><br/><a href="#" target="_self">购物流程</a><br/><a href="#" target="_self">会员介绍</a><br/><a href="#" target="_self">常见问题</a><br/></div></li><li>|</li><li><a href="#" target="_self">礼品卡</a></li><li>|</li><li><a href="#" target="_self">我的订单</a></li><li>|</li><li><a href="#" target="_self">我的账户</a></li><li>|</li><li><a href="shopping.html" target="_parent">购物车</a></li><li><img src="images/header_shop.gif" alt="shopping"/></li></ul></div></div>
</header>
<div class="header_middle"><div class="logo"><img src="images/logo.png" alt="logo"/></div><div class="search"><input type="text" placeholder="请输入搜索关键字"><input type="button"></div>
</div>
<nav id="nav"><ul><li><a href="#"> 全部商品分类</a></li><li><a href="#"> 首页</a></li><li><a href="#"> 图书</a></li><li><a href="#"> 特价</a></li><li><a href="#"> 团购</a></li></ul>
</nav>
<!--网站中间内容开始-->
<section id="main"><!--左侧菜单开始--><div id="catList"><!--图书商品分类开始--><div class="book_sort"><div class="book_sort_bg"><img src="images/dd_book_cate_icon.gif" alt="图书"/> 图书商品分类</div><div class="book_sort_bottom">悬疑 | 言情 | 职场 | 财经</div><div class="book_sort_bottom">文学 | 传记 | 艺术 | 摄影</div><div class="book_sort_bottom">青春文学 | 动漫 | 幽默</div><div class="book_sort_bottom">修养 | 成功 | 职场 | 沟通</div><div class="book_sort_bottom">0-2 | 3-6 | 7-10 | 11-14<br/>文学 | 科普 | 图画书</div><div class="book_sort_bottom">教材 | 中小学教辅 | 外语</div><!--<div class="book_sort_bottom">保健 | 家教 | 美丽装扮 | 育儿 | 美食 | 旅游 | 收藏 | 生活 | 体育 | 地图 | 个人理财</div><div class="book_cate">[个人社科]</div><div class="book_sort_bottom">文化 | 历史 | 哲学/宗教 | 古籍 | 政治/历史 | 法律 | 经济 | 社会科学 | 心理学</div><div class="book_cate">[管理]</div><div class="book_sort_bottom">管理 | 金融 | 营销 | 会计</div><div class="book_cate">[科技]</div><div class="book_sort_bottom">科普 | 建筑 | 医学 | 计算机 | 农林 | 自然科学 | 工业 | 通信</div><div class="book_cate">[教育]</div><div class="book_cate">[工具书]</div><div class="book_cate">[图外原版书]</div><div class="book_cate">[期刊]</div> --></div><!--图书商品分类结束--></div><!--左侧菜单结束--><!--中间部分开始--><div id="content"><!--轮换显示的横幅广告图片--><div class="scroll"><ul id="scroll_img"><li><img src="images/scroll-01.jpg"/></li><li><img src="images/scroll-02.jpg"/></li><li><img src="images/scroll-03.jpg"/></li><li><img src="images/scroll-04.jpg"/></li></ul><ul id="scroll_number"><li>1</li><li>2</li><li>3</li><li>4</li></ul></div></div><!--中间部分结束--><!--右侧部分开始--><section id="silder"><!--书讯快递--><div class="book_sort"><div class="book_sort_bg"><img src="images/dd_book_mess.gif" alt="mess"style=" vertical-align:text-bottom;"/>书讯快递</div><div class="book_class"><div id="dome"><div id="dome1"><ul id="express"><li>・2010考研英语大纲到货75折...</li><li>・权威定本四大名著（人民文...</li><li>・口述历史权威唐德刚先生国...</li><li>・袁伟民与体坛风云：实话实...</li><li>・我们台湾这些年：轰动两岸...</li><li>・畅销教辅推荐：精品套书50...</li><li>・2010版法律硕士联考大纲75...</li><li>・计算机新书畅销书75折抢购</li><li>・2009年孩子最喜欢的书&gt;&gt;</li><li>・弗洛伊德作品精选集59折</li><li>・2010考研英语大纲到货75折...</li><li>・权威定本四大名著（人民文...</li><li>・口述历史权威唐德刚先生国...</li><li>・袁伟民与体坛风云：实话实...</li><li>・我们台湾这些年：轰动两岸...</li><li>・畅销教辅推荐：精品套书50...</li><li>・2010版法律硕士联考大纲75...</li><li>・计算机新书畅销书75折抢购</li><li>・2009年孩子最喜欢的书&gt;&gt;</li><li>・弗洛伊德作品精选集59折</li><li>・2010考研英语大纲到货75折...</li><li>・权威定本四大名著（人民文...</li><li>・口述历史权威唐德刚先生国...</li><li>・袁伟民与体坛风云：实话实...</li><li>・我们台湾这些年：轰动两岸...</li><li>・畅销教辅推荐：精品套书50...</li><li>・2010版法律硕士联考大纲75...</li><li>・计算机新书畅销书75折抢购</li><li>・2009年孩子最喜欢的书&gt;&gt;</li><li>・弗洛伊德作品精选集59折</li><li>・2010考研英语大纲到货75折...</li><li>・权威定本四大名著（人民文...</li><li>・口述历史权威唐德刚先生国...</li><li>・袁伟民与体坛风云：实话实...</li><li>・我们台湾这些年：轰动两岸...</li><li>・畅销教辅推荐：精品套书50...</li><li>・2010版法律硕士联考大纲75...</li><li>・计算机新书畅销书75折抢购</li><li>・2009年孩子最喜欢的书&gt;&gt;</li><li>・弗洛伊德作品精选集59折</li></ul></div></div></div></div></section><!--右侧部分结束--><section class="book"><h1>电子书</h1><ul><li><img src="images/dianzi01.jpg"></li><li><img src="images/dianzi02.jpg"></li><li><img src="images/dianzi03.jpg"></li><li><img src="images/dianzi04.jpg"></li><li><img src="images/dianzi05.jpg"></li><li><img src="images/dianzi06.jpg"></li></ul></section><section class="tab"><ol><li>图书畅销榜</li><li>图书上新书榜</li></ol><ul><li><span>1</span><p>追风筝的人</p><dl><dt><img src="images/selling01.jpg"></dt><dd><h1>追风筝的人</h1>中文版，快乐大本营高圆圆感动推荐，奥巴马送给女儿的新年礼物</dd></dl></li><li><span>2</span><p>解忧杂货店</p><dl><dt><img src="images/selling02.jpg"></dt><dd><h1>解忧杂货店</h1>《白夜行》后东野圭吾备受欢迎作品：不是推理小说，却更扣人心弦</dd></dl></li><li><span>3</span><p>天才在左疯子在右</p><dl><dt><img src="images/selling03.jpg"></dt><dd><h1>天才在左疯子在右</h1>新增10个被封杀篇章！看高智商疯子如何调戏和羞辱正常人！继高圆圆后，女神陈乔恩芒果台盛情推荐！</dd></dl></li><li><span>4</span><p>白夜行</p><dl><dt><img src="images/selling04.jpg"></dt><dd><h1>白夜行</h1>东野圭吾推理小说无冕之王。全新精装典藏版</dd></dl></li><li><span>5</span><p>阮/陈恩静 吕亦涵 著</p><dl><dt><img src="images/selling05.jpg"></dt><dd><h1>阮/陈恩静 吕亦涵 著</h1>商战风云诡谲X情场暗潮汹涌。这一生幸运的是—— 以你之名，冠我之姓</dd></dl></li><li><span>6</span><p>摆渡人</p><dl><dt><img src="images/selling06.jpg"></dt><dd><h1>摆渡人</h1>畅销欧美33个国家，荣获多项图书大奖。如果命运是一条孤独的河流，谁会是你灵魂的摆渡人？如果我真的存在，也是因为你需要我。</dd></dl></li><li><span>7</span><p>岛上书店</p><dl><dt><img src="images/selling07.jpg"></dt><dd><h1>岛上书店</h1>每个人的生命中，都有无比艰难的那一年，将人生变得美好而辽阔</dd></dl></li><li><span>8</span><p>百年孤独</p><dl><dt><img src="images/selling08.jpg"></dt><dd><h1>百年孤独</h1>加西亚马尔克斯代表作，中文版首次授权！</dd></dl></li><li><span>9</span><p>我们仨</p><dl><dt><img src="images/selling09.jpg"></dt><dd><h1>我们仨</h1>《我们仨》是杨绛先生撰写的家庭生活回忆录，三联书店出版，影响几代人的作品，杨绛先生经典散文！</dd></dl></li><li><span>10</span><p>从你的全世界路过</p><dl><dt><img src="images/selling10.jpg"></dt><dd><h1>从你的全世界路过</h1>从你的全世界路过 2014中国好书榜获奖图书</dd></dl></li></ul><ul><li><span>1</span><p>好吗好的</p><dl><dt><img src="images/newBook01.jpg"></dt><dd><h1>好吗好的</h1>凡8月12日20:00前下单顾客，100%有大冰亲笔签名，之后下单顾客先到先得签名。各仓到货时间不一致，请各位耐心等待。</dd></dl></li><li><span>2</span><p>永无止尽的约会</p><dl><dt><img src="images/newBook02.jpg"></dt><dd><h1>永无止尽的约会</h1>永无止尽的约会</dd></dl></li><li><span>3</span><p>你的坚持，终将美好</p><dl><dt><img src="images/newBook03.jpg"></dt><dd><h1>你的坚持，终将美好</h1>无论正在经历什么，都请你不要轻言放弃，因为从来没有一种坚持会被辜负</dd></dl></li><li><span>4</span><p>茧</p><dl><dt><img src="images/newBook04.jpg"></dt><dd><h1>茧</h1>阔别十年，张悦然与我们再度重逢。真正的爱，是知道爱你有多困难还选择爱你；真正的长大，是知道生活的真相还热爱生活</dd></dl></li><li><span>5</span><p>就喜欢你看不惯我 </p><dl><dt><img src="images/newBook05.jpg"></dt><dd><h1>就喜欢你看不惯我 </h1>霸气吾皇率蠢萌巴扎黑、伪深邃的牛能强势归来！</dd></dl></li><li><span>6</span><p>遇见美好系列</p><dl><dt><img src="images/newBook06.jpg"></dt><dd><h1>遇见美好系列</h1>全8册，3-7岁心灵成长绘本。</dd></dl></li><li><span>7</span><p>八万四千问</p><dl><dt><img src="images/newBook07.jpg"></dt><dd><h1>八万四千问</h1>宗萨蒋扬钦哲仁波切四年来首部作品：“佛法能够解决你们的所有问题。</dd></dl></li><li><span>8</span><p>极简生活：简而美地活</p><dl><dt><img src="images/newBook08.jpg"></dt><dd><h1>极简生活：简而美地活</h1>极简是风靡全球的一种生活态度与理念。告别繁杂，拥有简而美的生活。</dd></dl></li><li><span>9</span><p>好妈妈胜过好老师</p><dl><dt><img src="images/newBook09.jpg"></dt><dd><h1>好妈妈胜过好老师</h1>好妈妈胜过好老师2：自由的孩子最自觉</dd></dl></li><li><span>10</span><p>我们始终独自行走在这个世界</p><dl><dt><img src="images/newBook10.jpg"></dt><dd><h1>我们始终独自行走在这个世界</h1>十点读书、二更食堂、清华南都等各大微信阅读平台，简书、豆瓣千万读者口碑相传作品。</dd></dl></li></ul></section>
</section>
<!--网站版权部分开始-->
<footer id="footer"><div class="footer_top"><a href="#" target="_parent" class="footer_dull_red">正版保障</a> | <a href="#" target="_parent"class="footer_dull_red">满额免运</a>| <a href="#" target="_parent" class="footer_dull_red">货到付款</a> | <a href="#" target="_parent"class="footer_dull_red">品种最全</a> | <ahref="#" target="_parent" class="footer_dull_red">免费退换</a></div><div class="footer_end">Copyright (C) 蔚蓝网 2006-2016, All Rights Reserved <img src="images/validate.gif" alt="版权"style="vertical-align:middle;"/>京ICP证100488号 出版物经营许可证 京批100160号</div>
</footer>
<script src="js/jquery-1.12.4.js"></script>
<script src="js/index.js"></script>
<script src="js/header.js"></script>
</body>
</html>

login.html

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8">
<title>蔚蓝网登录页面</title><link href="css/global.css" rel="stylesheet" /><link href="css/layout.css" rel="stylesheet"  /><link href="css/template.css" rel="stylesheet" />
</head><body>
<header  class="header_middle"><div class="login_header_left"><img src="images/logo.png" alt="logo"/></div><div class="login_header_right"><a href="index.html" class="blue">首页</a> | <a href="product.html" class="blue">商品展示页</a>  | <a href="shopping.html" class="blue">购物车</a> | <a href="register.html" class="blue">注册</a></div>
</header><div id="main"><div class="login_main_left"><img src="images/book.jpg"> </div><div class="login_main_mid"><div class="login_content_top">请登录蔚蓝网</div><form id="loginForm" action="" method="post"><dl class="login_content"><dt>Email地址或昵称：</dt><dd><input id="email" type="text" class="login_content_input"/></dd></dl><dl class="login_content"><dt>密码：</dt><dd><input id="pwd" type="password" class="login_content_input"/></dd></dl><dl class="login_content"><dt></dt><dd><input id="btn" value=" " type="submit" class="login_btn_out"/></dd></dl></form><div class="login_content_end_bg"><div class="login_content_end_bg_top"><label class="login_content_bold">还不是蔚蓝网用户？</label>快捷方便的免费注册，让你立刻尽享蔚蓝网提供的条项优惠服务......</div><div class="login_content_end_bg_end"><input id="quick_register" class="login_register_out" value=" " type="button"/></div></div></div>
</div><footer id="footer"><div class="footer_top"><a href="#" target="_parent" class="footer_dull_red">正版保障</a> | <a href="#" target="_parent" class="footer_dull_red">满额免运</a> | <a href="#" target="_parent" class="footer_dull_red">货到付款</a> | <a href="#" target="_parent" class="footer_dull_red">品种最全</a> | <a href="#" target="_parent" class="footer_dull_red">免费退换</a></div><div class="footer_end">Copyright (C) 蔚蓝网 2006-2016, All Rights Reserved  <img src="images/validate.gif"  alt="版权" style="vertical-align:middle;" /> 京ICP证100488号 出版物经营许可证 京批100160号</div>
</footer>
<script src="js/jquery-1.12.4.js"></script>
<script src="js/login.js"></script>
</body>
</html>

open.html

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>弹出广告窗口</title><link href="css/global.css" rel="stylesheet" />
</head>
<body>
<img src="images/dd_winOpen.jpg" alt="open" />
</body>
</html>

product.html

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8">
<title>蔚蓝网商品展示页面</title><link href="css/global.css" rel="stylesheet"/><link href="css/layout.css" rel="stylesheet"/><link href="css/template.css" rel="stylesheet" />
</head>
<body>
<header id="header"><div class="header_top"><div class="header_top_left">您好！欢迎光临蔚蓝网 [<a href="login.html" target="_parent">登录</a> | <a href="register.html" target="_parent">免费注册</a>]</div><div class="header_top_right"><ul><li><a href="#" target="_self">客户服务</a></li><li>|</li><li id="menu"><a href="#" target="_self">新手入门</a> <img src="images/arrow_down.gif" alt="arrow" /><div id="dd_menu_top_down"><a href="#" target="_self">购物保障</a><br /><a href="#" target="_self">购物流程</a><br /><a href="#" target="_self">会员介绍</a><br /><a href="#" target="_self">常见问题</a><br /></div></li><li>|</li><li><a href="#" target="_self">礼品卡</a></li><li>|</li><li><a href="#" target="_self">我的订单</a></li><li>|</li><li><a href="#" target="_self">我的账户</a></li><li>|</li><li><a href="shopping.html" target="_parent">购物车</a></li><li><img src="images/header_shop.gif" alt="shopping"/></li></ul></div></div>
</header>
<div class="header_middle"><div class="logo"><img src="images/logo.png" alt="logo"/></div><div class="search"><input type="text" placeholder="请输入搜索关键字"><input type="button"></div>
</div>
<nav id="nav"><ul><li><a href="#"> 全部商品分类</a></li><li><a href="#"> 首页</a></li><li><a href="#"> 图书</a></li><li><a href="#"> 特价</a></li><li><a href="#"> 团购</a></li></ul>
</nav>
<!--中间部分开始-->
<section id="main"><div class="current_place">您现在的位置：<a href="index.html">蔚蓝图书</a> &gt;&gt; 小说 &gt;&gt; 财经</div><!--左侧菜单开始--><div id="product_left"><div id="product_catList"><div class="product_catList_top">浏览同级分类</div><div id="product_catList_class"><!--使用javaScript显示图书分类--></div></div><div class="product_catList_end"><img src="images/product_01.gif" alt="shopping"/><img src="images/product_02.gif" alt="shopping"/></div></div><!--右侧内容开始--><div id="product_storyList"><div id="product_storyList_top"><ul><li>排序方式</li><li><img src="images/dd_arrow_right.gif" alt="arrow"/></li><li><select id="compositor"><option>按销量 降序</option><option>按价格 升序</option><option>按价格 降序</option><option>按折扣 升序</option><option>按折扣 降序</option><option>按出版时间 升序</option><option>按出版时间 降序</option><option>按上架时间 升序</option><option>按上架时间 降序</option></select></li><li><img src="images/product_icon_01.gif" alt="icon"/></li><li><img src="images/product_icon_02.gif" alt="icon"/></li><li><img src="images/product_icon_03.gif" alt="icon"/></li><li><img src="images/product_icon_04.gif" alt="icon"/></li><li>每页显示的数量</li><li><img src="images/dd_arrow_right.gif" alt="arrow"/></li><li><img src="images/product_icon_20.gif" alt="icon"/></li><li><img src="images/product_icon_40.gif" alt="icon"/></li><li style="float:right; padding-right:10px;"><img src="images/product_page_down.gif" alt="icon"/></li><li style="float:right;">第1页</li><li style="float:right;"><img src="images/product_page_up.gif" alt="icon"/></li></ul></div><div id="product_array"><a class="click" name="array"  href="javascript:void(0)">列表</a><a name="bigImg" href="javascript:void(0)">大图</a></div><!--图书排列开始--><div id="product_storyList_content" class="product_storyList_content"><div id="storyBooksssss"><!--使用javaScript显示图书列表--></div><!--列表开始--><div class="product_storyList_content_left"><img src="images/product_list_01.jpg" alt="图书列表"/></div><div class="product_storyList_content_right"><ul><li class="product_storyList_content_dash"><a href="#" class="blue_14">私募（首部披露资本博弈秘密的金融小说）</a></li><li>顾客评分：<img src="images/star_red.gif" alt="star"/><img src="images/star_red.gif" alt="star"/><img src="images/star_red.gif" alt="star"/><img src="images/star_red.gif" alt="star"/><img src="images/star_gray.gif" alt="star"/></li><li>作　者：<a href="#" class="blue_14">郭现杰</a> 著</li><li>出版社：<a href="#" class="blue_14">花山文艺出版社</a></li><li>出版时间：2009年08月</li><li>数年前，在一次股市的多、空之战中，以赵云狄、林康为首的私募基金―金鼎投资，和以王雨龙为首的私募基金，达成锁仓协议分食利益。殊料，以王雨龙为首的私募基金―鑫利投资背信弃义，导致金鼎投资惨败。以至...</li><li><dl class="product_content_dd"><dd><img src="images/product_buy_02.gif" alt="shopping"/></dd><dd><img src="images/product_buy_01.gif" alt="shopping"/></dd><dd>节省：￥13.10</dd><dd>折扣：<span>59折</span></dd><dd class="footer_dull_red"><span>￥18.90</span></dd><dd class="product_content_delete"><span>￥32.00</span></dd></dl></li></ul></div><div class="product_storyList_content_bottom"></div><!--列表开始--><div class="product_storyList_content_left"><img src="images/product_list_02.jpg" alt="图书列表"/></div><div class="product_storyList_content_right"><ul><li class="product_storyList_content_dash"><a href="#" class="blue_14">圈子圈套.1.战局篇 </a></li><li>顾客评分：<img src="images/star_red.gif" alt="star"/><img src="images/star_red.gif" alt="star"/><img src="images/star_red.gif" alt="star"/><img src="images/star_red.gif" alt="star"/><img src="images/star_red2.gif" alt="star"/></li><li>作　者：<a href="#" class="blue_14">王强 </a> 著</li><li>出版社：<a href="#" class="blue_14">清华大学出版社</a></li><li>出版时间：2006年01月</li><li>虽然没有硝烟，却比战场更血腥；虽然并未战死，却比死亡更痛苦。 洪钧从一个底层的销售人员，成为一家著名的跨国公司的中国区代理首席代表，在即将被扶正，事业情感都志得意满的时候，掉入俞威设计的圈套，...</li><li><dl class="product_content_dd"><dd><img src="images/product_buy_02.gif" alt="shopping"/></dd><dd><img src="images/product_buy_01.gif" alt="shopping"/></dd><dd>节省：￥8.90</dd><dd>折扣：<span>68折</span></dd><dd class="footer_dull_red"><span>￥19.10</span></dd><dd class="product_content_delete"><span>￥28.00</span></dd></dl></li></ul></div><div class="product_storyList_content_bottom"></div><!--列表开始--><div class="product_storyList_content_left"><img src="images/product_list_03.jpg" alt="图书列表"/></div><div class="product_storyList_content_right"><ul><li class="product_storyList_content_dash"><a href="#" class="blue_14">饕餮（最真实的商场高端博弈小说）  </a></li><li>顾客评分：<img src="images/star_red.gif" alt="star"/><img src="images/star_red.gif" alt="star"/><img src="images/star_red.gif" alt="star"/><img src="images/star_red.gif" alt="star"/><img src="images/star_red.gif" alt="star"/></li><li>作　者：<a href="#" class="blue_14">韦帕　 </a> 著</li><li>出版社：<a href="#" class="blue_14">国际文化出版公司</a></li><li>出版时间：2009年07月</li><li>北京，六百公里处，有宝地，233亩，土地价值2.5亿，总投资额近八亿，利润近三亿。　　项目吸引了众多北京房地产商目光，其中最贪婪的一道目光，来自顾忱。但顾忱，总资产不过千万！想拿项目，无异于“空手套...</li><li><dl class="product_content_dd"><dd><img src="images/product_buy_02.gif" alt="shopping"/></dd><dd><img src="images/product_buy_01.gif" alt="shopping"/></dd><dd>节省：￥8.40</dd><dd>折扣：<span>74折</span></dd><dd class="footer_dull_red"><span>￥23.60</span></dd><dd class="product_content_delete"><span>￥32.00</span></dd></dl></li></ul></div><div class="product_storyList_content_bottom"></div><!--列表开始--><div class="product_storyList_content_left"><img src="images/product_list_04.jpg" alt="图书列表"/></div><div class="product_storyList_content_right"><ul><li class="product_storyList_content_dash"><a href="#" class="blue_14">圈子圈套 迷局篇2：职场商战三部曲  </a></li><li>顾客评分：<img src="images/star_red.gif" alt="star"/><img src="images/star_red.gif" alt="star"/><img src="images/star_red.gif" alt="star"/><img src="images/star_red.gif" alt="star"/><img src="images/star_red.gif" alt="star"/></li><li>作　者：<a href="#" class="blue_14">王强 </a> 著</li><li>出版社：<a href="#" class="blue_14">长江文艺出版社</a></li><li>出版时间：2006年08月</li><li>《圈子圈套2・迷局篇》是“圈子圈套三部曲”的第二部。 职场风云再起。洪钧出任维西尔中国区总经理，他和俞威之间的较量又或明或暗地展开来，面对内部的纷争和商场上的尔虞我诈，他该如何出招……俞威依...</li><li><dl class="product_content_dd"><dd><img src="images/product_buy_02.gif" alt="shopping"/></dd><dd><img src="images/product_buy_01.gif" alt="shopping"/></dd><dd>节省：￥11.4</dd><dd>折扣：<span>59折</span></dd><dd class="footer_dull_red"><span>￥16.60</span></dd><dd class="product_content_delete"><span>￥28.00</span></dd></dl></li></ul></div><div class="product_storyList_content_bottom"></div><!--列表开始--><div class="product_storyList_content_left"><img src="images/product_list_05.jpg" alt="图书列表"/></div><div class="product_storyList_content_right"><ul><li class="product_storyList_content_dash"><a href="#" class="blue_14">圈子圈套3.终局篇（附赠王强演讲光盘）  </a></li><li>顾客评分：<img src="images/star_red.gif" alt="star"/><img src="images/star_red.gif" alt="star"/><img src="images/star_red.gif" alt="star"/><img src="images/star_red.gif" alt="star"/><img src="images/star_gray.gif" alt="star"/></li><li>作　者：<a href="#" class="blue_14">王强 </a> 著</li><li>出版社：<a href="#" class="blue_14">长江文艺出版社</a></li><li>出版时间：2007年10月</li><li>本书全景展示了商场和职场的生死厮杀、巅峰对决。主人公的命运、项目结局、所有的爱恨情仇都在本书中揭开谜底。 再次陷入低谷的洪钧在内忧外患中不甘消沉，在职场上和自己的上司明争暗斗，在商场上则和夙...</li><li><dl class="product_content_dd"><dd><img src="images/product_buy_02.gif" alt="shopping"/></dd><dd><img src="images/product_buy_01.gif" alt="shopping"/></dd><dd>节省：￥13.10</dd><dd>折扣：<span>59折</span></dd><dd class="footer_dull_red"><span>￥18.9</span></dd><dd class="product_content_delete"><span>￥32.00</span></dd></dl></li></ul></div><div class="product_storyList_content_bottom"></div><div><dl class="product_content_dd"><dd><img src="images/OK.gif" alt="ok"/></dd><dd>页</dd><dd><input name="page" type="text" value="1" style="width:20px;"/></dd><dd>跳转到第</dd><dd><img src="images/next.gif" alt="ok"/></dd><dd><ul id="product_page"><li><a href="#" class="product_page">1</a></li><li><a href="#" class="product_page">2</a></li><li> <a href="#" class="product_page">3</a></li><li> ...</li><li><a href="#" class="product_page">14</a></li><li><a href="#" class="product_page">15</a></li><li><a href="#" class="product_page">16</a></li></ul></dd><dd><img src="images/product_page_up.gif" alt="ok"/></dd></dl></div></div></div><!--右侧内容结束-->
</section>
<!--网站版权部分开始-->
<footer id="footer"><div class="footer_top"><a href="#" target="_parent" class="footer_dull_red">正版保障</a> | <a href="#" target="_parent" class="footer_dull_red">满额免运</a> | <a href="#" target="_parent" class="footer_dull_red">货到付款</a> | <a href="#" target="_parent" class="footer_dull_red">品种最全</a> | <a href="#" target="_parent" class="footer_dull_red">免费退换</a></div><div class="footer_end">Copyright (C) 蔚蓝网 2006-2016, All Rights Reserved  <img src="images/validate.gif"  alt="版权" style="vertical-align:middle;" /> 京ICP证100488号 出版物经营许可证 京批100160号</div>
</footer><script src="js/jquery-1.12.4.js"></script>
<script src="js/product.js"></script>
<script src="js/header.js"></script>
</body>
</html>

register.html

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8">
<title>蔚蓝网注册页面</title><link href="css/global.css" rel="stylesheet" /><link href="css/layout.css" rel="stylesheet" /><link href="css/template.css" rel="stylesheet" />
</head><body>
<header class="header_middle"><div id="register_header"><div class="register_header_left"><img src="images/logo.png" alt="logo"/></div><div class="register_header_right"><a href="index.html" class="blue">首页</a> | <a href="product.html" class="blue">商品展示页</a>  | <a href="shopping.html" class="blue">购物车</a> |  <a href="login.html" class="blue">登录</a></div></div>
</header>
<section id="main"><div class="register_content"><div class="register_mid_bg">用户注册</div><div class="register_message"><form action="" method="post" id="myform"><dl class="register_row"><dt>Email地址：</dt><dd><input id="email" type="email" required="required" class="register_input"/></dd></dl><dl class="register_row"><dt>设置昵称：</dt><dd><input id="nickName" type="text" class="register_input" required="required" pattern="[a-zA-Z0-9]{4,20}"/></dd></dl><dl class="register_row"><dt>设定密码：</dt><dd><input id="pwd" type="password" class="register_input" required="required"  pattern="[a-zA-Z0-9]{6,20}"/></dd></dl><dl class="register_row"><dt>再输入一次密码：</dt><dd><input id="repwd" type="password" class="register_input" required="required"/></dd></dl><dl class="register_row"><dt>性别：</dt><dd><input name="sex" id="man" type="radio" value="男" checked="checked"/> <label for="man">男</label></dd><dd> <input name="sex" id="woman" type="radio" value="女"/> <label for="woman">女</label></dd></dl><dl class="register_row"><dt>所在地区：</dt><dd><select id="province"  style="width:120px;" ><!--<option>请选择省/城市</option>--></select></dd><dd><select id="city"  style="width:130px;"><option>请选择城市/地区</option></select></dd></dl><div class="registerBtn"><input id="registerBtn" type="image" src="images/register_btn_out.gif"/></div></form></div></div>
</section>
<!--网站版权部分开始-->
<footer id="footer"><div class="footer_top"><a href="#" target="_parent" class="footer_dull_red">正版保障</a> | <a href="#" target="_parent" class="footer_dull_red">满额免运</a> | <a href="#" target="_parent" class="footer_dull_red">货到付款</a> | <a href="#" target="_parent" class="footer_dull_red">品种最全</a> | <a href="#" target="_parent" class="footer_dull_red">免费退换</a></div><div class="footer_end">Copyright (C) 蔚蓝网 2006-2016, All Rights Reserved  <img src="images/validate.gif"  alt="版权" style="vertical-align:middle;" /> 京ICP证100488号 出版物经营许可证 京批100160号</div>
</footer>
<script src="js/jquery-1.12.4.js"></script>
<script  src="js/register.js"></script>
</body>
</html>

shopping.html

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8">
<title>蔚蓝网购物车页面</title><link href="css/global.css" rel="stylesheet" /><link href="css/layout.css" rel="stylesheet" /><link href="css/template.css" rel="stylesheet" />
</head><body>
<header id="header"><div class="header_top"><div class="header_top_left">您好！欢迎光临蔚蓝网 [<a href="login.html" target="_parent">登录</a> | <a href="register.html" target="_parent">免费注册</a>]</div><div class="header_top_right"><ul><li><a href="#" target="_self">客户服务</a></li><li>|</li><li id="menu"><a href="#" target="_self">新手入门</a> <img src="images/arrow_down.gif" alt="arrow" /><div id="dd_menu_top_down"><a href="#" target="_self">购物保障</a><br /><a href="#" target="_self">购物流程</a><br /><a href="#" target="_self">会员介绍</a><br /><a href="#" target="_self">常见问题</a><br /></div></li><li>|</li><li><a href="#" target="_self">礼品卡</a></li><li>|</li><li><a href="#" target="_self">我的订单</a></li><li>|</li><li><a href="#" target="_self">我的账户</a></li><li>|</li><li><a href="shopping.html" target="_parent">购物车</a></li><li><img src="images/header_shop.gif" alt="shopping"/></li></ul></div></div>
</header>
<div class="header_middle"><div class="logo"><img src="images/logo.png" alt="logo"/></div><div class="search"><input type="text" placeholder="请输入搜索关键字"><input type="button"></div>
</div>
<nav id="nav"><ul><li><a href="#"> 全部商品分类</a></li><li><a href="#"> 首页</a></li><li><a href="#"> 图书</a></li><li><a href="#"> 特价</a></li><li><a href="#"> 团购</a></li></ul>
</nav>
<!--中间部分开始-->
<div id="main"><div>&nbsp;&nbsp;<img src="images/shopping_myshopping.gif" alt="shopping"/> <a href="#">全场免运费活动中</a></div><!--为您推荐商品开始--><div class="shopping_commend"><div class="shopping_commend_left">根据您挑选的商品，蔚蓝为您推荐</div><div class="shopping_commend_right"><img src="images/shopping_arrow_up.gif" alt="shopping" id="shopping_commend_arrow"/></div></div><div id="shopping_commend_sort"><div class="shopping_commend_sort_left"><ul><li class="shopping_commend_list_1">·<a href="#" class="blue">JavaScript DOM编程艺术</a></li><li class="shopping_commend_list_2">￥39.00</li><li class="shopping_commend_list_3">￥29.30</li><li class="shopping_commend_list_4"><a href="#" class="shopping_yellow">购买</a></li></ul><ul><li class="shopping_commend_list_1">·<a href="#" class="blue">解禁（蔚蓝网独家首发）</a></li><li class="shopping_commend_list_2">￥28.00</li><li class="shopping_commend_list_3">￥19.40</li><li class="shopping_commend_list_4"><a href="#" class="shopping_yellow">购买</a></li></ul><ul><li class="shopping_commend_list_1">·<a href="#" class="blue">地王之王（金融危机下房地产行...</a></li><li class="shopping_commend_list_2">￥32.80</li><li class="shopping_commend_list_3">￥25.10</li><li class="shopping_commend_list_4"><a href="#" class="shopping_yellow">购买</a></li></ul><ul><li class="shopping_commend_list_1">·<a href="#" class="blue">逃庄</a></li><li class="shopping_commend_list_2">￥36.00</li><li class="shopping_commend_list_3">￥27.70</li><li class="shopping_commend_list_4"><a href="#" class="shopping_yellow">购买</a></li></ul></div><div class="shopping_commend_sort_mid"></div><div class="shopping_commend_sort_left"><ul><li class="shopping_commend_list_1">·<a href="#" class="blue">深入浅出MySQL数据库开发、优...</a></li><li class="shopping_commend_list_2">￥59.00</li><li class="shopping_commend_list_3">￥47.20</li><li class="shopping_commend_list_4"><a href="#" class="shopping_yellow">购买</a></li></ul><ul><li class="shopping_commend_list_1">·<a href="#" class="blue">大玩家（马未都、王刚推荐!央...</a></li><li class="shopping_commend_list_2">￥34.80</li><li class="shopping_commend_list_3">￥20.60</li><li class="shopping_commend_list_4"><a href="#" class="shopping_yellow">购买</a></li></ul><ul><li class="shopping_commend_list_1">·<a href="#" class="blue">都市风水师--官场风水小说：一...</a></li><li class="shopping_commend_list_2">￥39.80</li><li class="shopping_commend_list_3">￥30.50</li><li class="shopping_commend_list_4"><a href="#" class="shopping_yellow">购买</a></li></ul><ul><li class="shopping_commend_list_1">·<a href="#" class="blue">国戏（以麻将术语解读宦海沉浮...</a></li><li class="shopping_commend_list_2">￥25.00</li><li class="shopping_commend_list_3">￥17.30</li><li class="shopping_commend_list_4"><a href="#" class="shopping_yellow">购买</a></li></ul></div></div><div class="shopping_list_top">您已选购以下商品</div><div class="shopping_list_border"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr class="shopping_list_title"><td class="shopping_list_title_1">商品名</td><td class="shopping_list_title_2">单品积分</td><td class="shopping_list_title_3">市场价</td><td class="shopping_list_title_4">蔚蓝价</td><td class="shopping_list_title_5">数量</td><td class="shopping_list_title_6">删除</td></tr></table><table width="100%" border="0" cellspacing="0" cellpadding="0" id="myTableProduct"><tr class="shopping_product_list" id="shoppingProduct_01"><td class="shopping_product_list_1"><a href="#" class="blue">私募（首部披露资本博弈秘密的金融...</a></td><td class="shopping_product_list_2"><label>189</label></td><td class="shopping_product_list_3">￥<label>32.00</label></td><td class="shopping_product_list_4">￥<label>18.90 </label>(59折)</td><td class="shopping_product_list_5"><input type="text" value="1"/></td><td class="shopping_product_list_6"><a href="javascript:void(0)" class="blue">删除</a></td></tr><tr class="shopping_product_list" id="shoppingProduct_02"><td class="shopping_product_list_1"><a href="#" class="blue"> 小团圆（张爱玲最神秘小说遗稿）</a></td><td class="shopping_product_list_2"><label>173</label></td><td class="shopping_product_list_3">￥<label>28.00</label></td><td class="shopping_product_list_4">￥<label>17.30</label>(62折)</td><td class="shopping_product_list_5"><input type="text" value="1"/></td><td class="shopping_product_list_6"><a href="javascript:void(0)" class="blue">删除</a></td></tr><tr class="shopping_product_list" id="shoppingProduct_03"><td class="shopping_product_list_1"><a href="#" class="blue">不抱怨的世界(畅销全球80国的世界...</a></td><td class="shopping_product_list_2"><label>154</label></td><td class="shopping_product_list_3">￥<label>24.80</label></td><td class="shopping_product_list_4">￥<label>15.40</label> (62折)</td><td class="shopping_product_list_5"><input type="text" value="2"/></td><td class="shopping_product_list_6"><a href="javascript:void(0)" class="blue">删除</a></td></tr><tr class="shopping_product_list" id="shoppingProduct_04"><td class="shopping_product_list_1"><a href="#" class="blue">福玛特双桶洗衣机XPB20-07S</a></td><td class="shopping_product_list_2"><label>358</label></td><td class="shopping_product_list_3">￥<label>458.00</label></td><td class="shopping_product_list_4">￥<label>358.00</label> (78折)</td><td class="shopping_product_list_5"><input type="text" value="1"/></td><td class="shopping_product_list_6"><a href="javascript:void(0)" class="blue">删除</a></td></tr><tr class="shopping_product_list" id="shoppingProduct_05"><td class="shopping_product_list_1"><a href="#" class="blue">PHP和MySQL Web开发 （原书第4版）</a></td><td class="shopping_product_list_2"><label>712</label></td><td class="shopping_product_list_3">￥<label>95.00</label></td><td class="shopping_product_list_4">￥<label>71.20</label> (75折)</td><td class="shopping_product_list_5"><input type="text" value="1"/></td><td class="shopping_product_list_6"><a href="javascript:void(0)" class="blue">删除</a></td></tr><tr class="shopping_product_list" id="shoppingProduct_06"><td class="shopping_product_list_1"><a href="#" class="blue">法布尔昆虫记</a>（再买￥68.30即可参加“满199元减10元现金”活动）</td><td class="shopping_product_list_2"><label>10</label></td><td class="shopping_product_list_3">￥<label>198.00</label></td><td class="shopping_product_list_4">￥<label>130.70</label> (66折)</td><td class="shopping_product_list_5"><input type="text" value="1"/></td><td class="shopping_product_list_6"><a href="javascript:void(0)" class="blue">删除</a></td></tr></table><div class="shopping_list_end"><div><a id="removeAllProduct" href="javascript:void(0);">清空购物车</a></div><ul><li class="shopping_list_end_1"><input name="" type="image" src="images/shopping_balance.gif"/></li><li class="shopping_list_end_2">￥<label id="product_total"></label></li><li class="shopping_list_end_3">商品金额总计：</li><li  class="shopping_list_end_4">您共节省金额：￥<label class="shopping_list_end_yellow" id="product_save"></label><br/>可获商品积分：<label class="shopping_list_end_yellow" id="product_integral"></label></li></ul></div></div>
</div><!--网站版权部分开始-->
<footer id="footer"><div class="footer_top"><a href="#" target="_parent" class="footer_dull_red">正版保障</a> | <a href="#" target="_parent" class="footer_dull_red">满额免运</a> | <a href="#" target="_parent" class="footer_dull_red">货到付款</a> | <a href="#" target="_parent" class="footer_dull_red">品种最全</a> | <a href="#" target="_parent" class="footer_dull_red">免费退换</a></div><div class="footer_end">Copyright (C) 蔚蓝网 2006-2016, All Rights Reserved  <img src="images/validate.gif"  alt="版权" style="vertical-align:middle;" /> 京ICP证100488号 出版物经营许可证 京批100160号</div>
</footer>
<script src="js/jquery-1.12.4.js"></script>
<script  src="js/shopping.js"></script>
<script src="js/header.js"></script>
</body>
</html>

JS代码

header.js

index.js

// 主页JS脚本$(document).ready(function () {//window.open ('open.html', 'newwindow', 'height=400, width=500');//书讯快递var marginTop = 0;var interval = setInterval(function () {$("#express").children("li").first().animate({"margin-top": marginTop--}, 0, function () {var $first = $(this);if (!$first.is(":animated")) {if ((-marginTop) > $first.height()) {$first.css({"margin-top": 0}).appendTo($("#express"));marginTop = 0;}}});}, 100);//广告图关闭$("#dd_close").click(function () {$("#right").hide();});//方法1//var adverTop =parseInt($("#right").css("top"));//广告图// var adverleft =parseInt($("#right").css("left"));// $(window).scroll(function(){//     var scrollTop =parseInt($(this).scrollTop());//获取滚动条滚下去的距离//     var scrollLeft =parseInt($(this).scrollLeft());//获取滚动条滚向右的距离//     $("#right").offset({top:scrollTop+adverTop});//     $("#right").offset({left:scrollLeft+adverleft});// });$("#right").css("position", "fixed");//方法2：广告图$("#menu").hover(function () {//新手入门$("#dd_menu_top_down").slideDown();}).mouseleave(function () {$("#dd_menu_top_down").slideUp();});var i = 0;//当前广告图下标var bool = 1;//轮播图setInterval(function () {//siblings除它以外$("#scroll_number li").eq(i).css("background", "red").siblings().css("background", "#a9a9a9");$("#scroll_img li ").eq(i).fadeIn("slow").siblings().fadeOut("slow");//3.把要显示的广告图淡入//if(i==4)i=0; 顺序1-4   1-4if (i == 4) {bool = 2;} else if (i == 0) {bool = 1}//1 前进//2 后退if (bool == 1) {i++;//广告图索引+1} else if (bool == 2) {i--;}//顺序1-4  4-1  1-4}, 1000);//1.设置定时//电子书$(".book ul li img").mouseenter(function () {$(this).animate({width: "240px"});}).mouseleave(function () {$(this).animate({width: "80%"});});
//图书
// 图书畅销榜$(".tab ol li:first").click(function () {$(this).css({background: "#ffffff", "border": "none"});$(".tab ol li:last").css({background: "#efefef","border-left": "1px solid #cccccc","border-bottom": "1px solid #ccc"});$(".tab ul:first").show();//显示$(".tab ul:last").hide();//隐藏});
//图书上新书榜$(".tab ol li:last").click(function () {$(this).css({background: "#ffffff", "border": "none"});$(".tab ol li:first").css({background: "#efefef","border-right": "1px solid #cccccc","border-bottom": "1px solid #ccc"});$(".tab ul:first").hide();//隐藏$(".tab ul:last").show();//显示});//畅销榜和新书榜：鼠标悬浮在书名上时的事件$(".tab ul li").mouseenter(function () {//1.把当前li所有的兄弟li的dl隐藏、p显示$(this).parent().children("li").children("dl").hide();$(this).parent().children("li").children("p").show();//2.把当前的li的dl显示，p隐藏$(this).children("dl").show();$(this).children("p").hide();});});

login.js

// 登录
$(document).ready(function () {$("#email").focus(function () {//得到光标$(this).css("background", "#f1ffde");}).blur(function () {//失去光标$(this).css("background", "#FFFFFF");});$("#pwd").focus(function () {//得到光标$(this).css("background", "#f1ffde");}).blur(function () {//失去光标$(this).css("background", "#FFFFFF");});$(".login_btn_out").hover(function () {$("#btn").css("background", "url('images/login_icon_bg_01.gif')-78px -29px no-repeat");}).mouseleave(function () {$("#btn").css("background", "url('images/login_icon_bg_01.gif')0px -30px no-repeat")});$(".login_btn_out").click(function () {var email = $("#email").val();var pwd = $("#pwd").val();if (email == "") {alert("请输入email地址或昵称");return false;}if (pwd == "") {alert("密码不能为空");return false;}})$(".login_register_out").mouseenter(function () {$("#quick_register").css("background", "url('images/login_icon_bg_01.gif')-144px -3px no-repeat");}).mouseleave(function () {$("#quick_register").css("background", "url('images/login_icon_bg_01.gif') 0px -3px no-repeat");});});

product.js

// 产品展示
$(document).ready(function () {var boxkSort = new Array("科幻(513)", "武侠(574)", "中国当代小说(13880)", "中国进现代小说(640)", "中国古典小说(1547)", "科幻(513)", "武侠(574)", "中国当代小说(13880)", "中国进现代小说(640)", "中国古典小说(1547)", "科幻(513)", "武侠(574)", "中国当代小说(13880)", "中国进现代小说(640)", "中国古典小说(1547)","科幻(513)", "武侠(574)", "中国当代小说(13880)", "中国进现代小说(640)", "中国古典小说(1547)", "科幻(513)", "武侠(574)", "中国当代小说(13880)", "中国进现代小说(640)", "中国古典小说(1547)", "科幻(513)", "武侠(574)", "中国当代小说(13880)", "中国进现代小说(640)", "中国古典小说(1547)", "科幻(513)", "武侠(574)", "中国当代小说(13880)", "中国进现代小说(640)", "中国古典小说(1547)","科幻(513)", "武侠(574)", "中国当代小说(13880)", "中国进现代小说(640)", "中国古典小说(1547)");var html = [];$.each(boxkSort, function (i, n) {html.push("<li>.<a href='#' class='blue'>" + n + "</a> </li>")});$("#product_catList_class").html(html.join(""));/*  // **列表模式和大图模式切换**var $getBookList = $('#product_storyList_content').html();//大图模式(从列表的DOM中获取信息)function getBigBookList() {var $listBookImg = $("#product_storyList_content .product_storyList_content_left");var $contents = "";$(".product_storyList_content_right").find("ul").each(function(i, e) {var $content = ["<div class='big_img_list'><ul><li class='bookImg'>" + $listBookImg.eq(i).html() + "</li>"];var $print = $(e).children("li").eq(6).find('span');$content.push("<li><dl><dd>" + $print.eq(1).text() + "</dd><dd  class='product_content_delete'>" + $print.eq(2).text() + "</dd><dd>" + $print.eq(0).text() + "</dd></dl></li>")$content.push("<li class='detail'>" + $(e).children("li").eq(5).text() + "</li>")$content.push("<li class='detail'>" + $(e).children("li").eq(2).text() + "</li>")$content.push("<li class='detail'>" + $(e).children("li").eq(1).text() + "</li>")$content.push("<li class='detail'>" + $(e).children("li").eq(3).text() + "</li>")$content.push("<li class='detail'>" + $(e).children("li").eq(4).text() + "</li></ul></div>")$contents += $content.join("");});return $contents;}var $bigBookList = getBigBookList();$("#product_array").children().click(function () {$(this).addClass("click").siblings().removeClass("click");//使用attr判断this是列表还是大图if($(this).attr("name") == "array"){$("#product_storyList_content").html($getBookList);}else if($(this).attr("name") == "bigImg"){$("#product_storyList_content").html($bigBookList);// 鼠标悬浮到大图模式图片上的时候 显示隐藏的信息$("#product_storyList_content").children().find("ul").hover(function() {$(this).addClass("over");$(this).parent().addClass("over");}, function() {$(this).removeClass("over");$(this).parent().removeClass("over");})}})
*/});

register.js

// 注册
$(document).ready(function () {var city = new Array("请选择省/城市", "广州市", "湛江市", "深圳市");//省份var city1 = [["天河区", "海珠区", "越秀区"], ["霞山区", "麻章区", "赤坎区"],["南山区", "福田区", "龙岗区"]];//地区//初始化省份下拉列表var str = [];var i = 1;//下拉框的的下标$.each(city, function (i, n) {str.push("<option value='" + i + "'>" + n + "</option>");i++;$("#province").html(str.join(""));});//为省份下拉列表绑定change事件$("#province").change(function () {var index = $(this).val() - 1;//获取当前省的下标$("#city").prop("length", 1);//清空原有的数据for (var i = 0; i < city1[index].length; i++) {//重新为市赋值$("#city").append($("<option>").val(i + 1).html(city1[index][i]));//添加}});
});$(document).ready(function () {//提交按钮事件$("#registerBtn").click(function () {var user1 = document.getElementById("nickName");//昵称var pwd = document.getElementById("pwd");//密码var repwd = document.getElementById("repwd");//确认密码var email = document.getElementById("email");//邮箱if (email.validity.valueMissing) {email.setCustomValidity("昵称不能为空");} else {email.setCustomValidity("");}if (user1.validity.valueMissing) {user1.setCustomValidity("昵称不能为空");} else if (user1.validity.patternMismatch) {user1.setCustomValidity("昵称必须大于4位或等于4位");} else {user1.setCustomValidity("");}if (pwd.validity.valueMissing) {pwd.setCustomValidity("密码不能为空");} else if (pwd.validity.patternMismatch) {pwd.setCustomValidity("密码必须大于6位或等于6位");} else {pwd.setCustomValidity("");}if (repwd.validity.valueMissing) {repwd.setCustomValidity("密码不能为空");} else {repwd.setCustomValidity("");}if (pwd.value != repwd.value) {repwd.setCustomValidity("两次密码不一致");}var province = $("#province").val();var city = $("#city").val();if (province == "请选择省/城市") {alert("请选择省/城市");return false;}if (city == "请选择城市/地区") {alert("请选择城市/地区");return false;}});
});

shopping.js

// 购物车
$(document).ready(function () {
//根据您挑选的商品，蔚蓝为您推荐var index = 1;$(".shopping_commend_left").click(function () {$("#shopping_commend_sort").toggle();if (index % 2 != 0) {$("#shopping_commend_arrow").attr("src", "images/shopping_arrow_down.gif");} else {$("#shopping_commend_arrow").attr("src", "images/shopping_arrow_up.gif");}index++;});//删除按钮$(".blue").bind("click", function () {var del = confirm("您确认要删除商品么?");if (del) {//父级parent()    同辈元素siblings()$(this).parent().siblings().parent().remove();}if($(".shopping_product_list").length==0){//判断是否dell(); //清空}Count();//计算价钱})//清空function dell() {$(".shopping_list_border").children(".shopping_list_end", "#myTableProduct").empty();//清空var $img = ("<img src='images/emptyShopping.jpg'>");$("#myTableProduct").replaceWith($img, "你还没有挑选商品.去挑选看看>>>");//替换节点$(".shopping_list_end").css("background", "#FFFFFF");}//清空所有按钮$("#removeAllProduct").click(function () {dell(); //清空});$(".shopping_product_list_5 input").focus(function () {//数量得到光标Count();$(this).blur(function () {//数量失去光标Count();//计算价钱});});Count();//计算价钱//增加或者减少商品的数量时各数值的变化function Count() {var $table = $("#myTableProduct tr");var integral = 0;//商品总积分var total = 0.0;//金额总计var save = 0.0;//节省金额$table.each(function () {//获取当前数量；找到当前的元素的所有的子元素var count = parseInt($(this).children(".shopping_product_list_5").find("input").val());//获取当前价格var money = parseFloat($(this).children(".shopping_product_list_3").find("label").html());//获取折扣价var discount = parseFloat($(this).children(".shopping_product_list_4").find("label").html());//获得当前积分var integralScore = parseInt($(this).children(".shopping_product_list_2").find("label").html());//总价 = 数量 * 价格total += count * money;//总共节省的金额 = 当前价格 - 折扣价save += money - discount;//商品总积分 = 数量 * 当前所购买商品的所得积分integral += count * integralScore;});$("#product_total").html(total.toFixed(2));//商品金额总计$("#product_save").html(save.toFixed(2));//您共节省金额$("#product_integral").html(integral.toFixed(2));//积分}});