样式

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;
}
.two{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: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;
}

代码

index.htm

l

<!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 onload="open_adv()">
<!--随滚动条滚动可关闭广告-->
<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" id="lun"/></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" class="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> | <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.8.3.min.js"></script>
<script src="../Chap11/js/header.js"></script>
<script src="../Chap11/js/index.js"></script><script type="text/javascript">
</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.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">$(document).ready(function(){//输入框背景颜色变换$(".login_content_input").focus(function(){$(this).css("background-color","#f1ffde");}).blur( function(){$(this).css("background-color","white");});$("#email").blur(checkEmail);$("#pwd").blur(checkPwd);//登录按钮背景图片$("#btn").hover(function () {$(this).attr("class", "login_btn_over").siblings().attr("class", "login_btn_over");}, function () {$(this).attr("class", "login_btn_out").siblings().attr("class", "login_btn_out");})$("#quick_register").hover(function () {$(this).attr("class", "login_register_over").siblings().attr("class", "login_register_over");}, function () {$(this).attr("class", "login_register_out").siblings().attr("class", "login_register_out");})})//邮箱function checkEmail(){var email=$("#email").val();var regemail=/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;if(email==""){alert("请输入Email地址或昵称")return false;}else if(regemail.test(email)==false){alert("Email地址或昵称格式不正确，请重新输入！");return false;}return true;}//密码function checkPwd(){var pwd=$("#pwd").val();var regPwd=/[a-zA-Z0-9]{6,20}/;if(pwd==""){alert("请输入密码")return false;}else if(regPwd.test(pwd)==false){alert("密码必须使用大小写英文字母、数字,长度为6~20个字符");return false;}return true;}</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" type="text/javascript"></script>
<script type="text/javascript">$(document).ready(function(){//浏览同级分类var bookSort=new Array("中国当代小说(1380)","中国近代小说(640)","中古典小说(1547)","四大名著(1547)","港澳小说(1547)","外国小说(1547)","侦探/悬疑小说(1547)","惊悚恐怖(1547)","魔幻(1547)","科幻(1547)","武侠(1547)","军事(1547)","情感(1547)","社会(1547)","都市(1547)","乡士(1547)","职场(1547)","财经(1547)","官场(1547)","历史(1547)","影视小说(1547)","作品集(1547)","世界名著(1547)")var html=[];$.each(bookSort,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).html() + "</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");})}})})
</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" required pattern="^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$"/></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"/></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="../Chap11/js/register.js"></script>
<script type="text/javascript">$(document).ready(function(){var cityList = new Array();cityList['北京市'] = ['朝阳区','东城区','西城区', '海淀区','宣武区','丰台区','怀柔','延庆','房山'];cityList['上海市'] = ['宝山区','长宁区','丰贤区', '虹口区','黄浦区','青浦区','南汇区','徐汇区','卢湾区'];cityList['广州省'] = ['广州市','惠州市','汕头市','珠海市','佛山市','中山市','东莞市'];cityList['深圳市'] = ['福田区', '罗湖区', '盐田区', '宝安区', '龙岗区', '南山区', '深圳周边'];cityList['重庆市'] = ['俞中区', '南岸区', '江北区', '沙坪坝区', '九龙坡区', '渝北区', '大渡口区', '北碚区'];cityList['天津市'] = ['和平区', '河西区', '南开区', '河北区', '河东区', '红桥区', '塘古区', '开发区'];cityList['江苏省'] = ['南京市','苏州市','无锡市'];cityList['其他'] = ['其他'];for (var i in cityList) {$("#province").append("<option value='" + i + "'>" + i + "</option>");}$("#province").change(function () {$("#city").children("option:not(:first)").remove();for (var i = 0; i < cityList[$(this).val()].length; i++) {$("#city").append("<option value='" + cityList[$(this).val()][i] + "'>" + cityList[$(this).val()][i] + "</option>");}});$("#registerBtn").click(function(){var email=document.getElementById("email");if(email.validity.valueMissing==true){email.setCustomValidity("Email不能为空");}else if(email.validity.typeMismatch==true  ){email.setCustomValidity("邮箱格式错误");}else{email.setCustomValidity("");}var nick=document.getElementById("nickName");if(nick.validity.valueMissing==true){nick.setCustomValidity("昵称不能为空");}else if(nick.validity.patternMismatch==true  ){nick.setCustomValidity("昵称格式错误");}else{nick.setCustomValidity("");}var pwd=document.getElementById("pwd");if(pwd.validity.valueMissing==true){pwd.setCustomValidity("密码不能为空");}else if(pwd.validity.patternMismatch==true  ){pwd.setCustomValidity("密码格式错误");}else{pwd.setCustomValidity("");}var repwd=document.getElementById("repwd");if(pwd.value != repwd.value){repwd.setCustomValidity("两次密码格式错误");}else{repwd.setCustomValidity("");}});});
</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.8.3.min.js"></script>
<script type="text/javascript">$(document).ready(function(){//箭头改变和内容的隐藏和显示$(".shopping_commend_right").toggle(function(){$("#shopping_commend_sort").hide();$("#shopping_commend_arrow").attr("src", "images/shopping_arrow_down.gif");},function(){$("#shopping_commend_sort").show();$("#shopping_commend_arrow").attr("src", "images/shopping_arrow_up.gif");});//删除商品$(".blue").click(function(){var del=confirm("确定要删除吗?");if(del==true){$(this).parent().parent().remove();Count();}else{alert("删除取消");};})//清空购物车$("#removeAllProduct").click(function(){$(".shopping_product_list td").remove();$("#myTableProduct").addClass("empty_product");$("#myTableProduct").html("<a href='#'>您还没有挑选商品,去挑选看看 <a/>").css("padding-top","60px")Count();});Count();//计算金额function Count(){var sum=0;//商品金额总计var score=0;//积分var money=0;//节省金额$("#myTableProduct tr").each(function (i, dom) {//数量var num = parseInt($(dom).find(".shopping_product_list_5 input").val());var price = parseFloat(num * $(dom).find(".shopping_product_list_4 label").text());sum+=price;var jiFen=num*parseInt($(dom).find(".shopping_product_list_2 label").text());score+=jiFen;var jie=num*parseFloat($(dom).find(".shopping_product_list_3 label").text())-price;money+=jie;})$("#product_total").html(sum.toFixed(2));$("#product_integral").html(score);$("#product_save").html(money.toFixed(2));}$(".shopping_product_list_5 input").blur(function(){Count();})})
</script>
</body>
</html>

js

header.js

/*** Created by Administrator on 2019/7/6.*///鼠标停在或移除"新手入门"时，显示菜单
$("#menu a").mouseenter(function () {$("#dd_menu_top_down").slideDown("slow");
}).mouseleave(function () {$("#dd_menu_top_down").slideUp("slow");
});//滚动广告
var adverTop = parseInt($("#right").css("top"));
var adverLef = parseInt($("#right").css("left"));
$(window).scroll(function () {var scrollTop = parseInt($(this).scrollTop());//获取滚动条滚下去的距离var scrollLef = parseInt($(this).scrollLeft());//获取滚动条滚向右的距离$("#right").offset({top: scrollTop + adverTop});$("#right").offset({left: scrollLef + adverLef});
});//关闭滚动广告
$("#dd_close a").click(function () {$("#right ").hide();
})//图书畅销榜
$(".tab ol li :first").mouseover(function () {$(this).css({background: "#ffffff", "border": "none"});$(".tab ol li:last").css({background: "#efefef","border-left": "1px solid #cccccc","border-bottom": "1px solid #ccc","width": "118px"})$(".tab ul:first").show();//隐藏$(".tab ul:last").hide();//显示
})
$(".tab ol li :last").mouseover(function () {$(this).css({background: "#ffffff", "border": "none"});$(".tab ol li:first").css({background: "#efefef","border-right": "1px solid #cccccc","border-bottom": "1px solid #ccc","width": "118px"})$(".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();
});//书讯快递
var marginTop = 0;
var book = setInterval(interval, 100);
function interval() {$("#express").children("li").first().animate({"margin-top": marginTop--}, 0, function () {var $first = $(this);if ($first.is(":animated") == false) {if ((-marginTop) > $first.height()) {$first.css({"margin-top": 0}).appendTo($("#express"));marginTop = 0;}}});
}
$("#express li").hover(function () {clearInterval(book);
}, function () {book = setInterval(interval, 100);
});//广告轮播图
var num = 0;
setInterval(function () {//判断图片是否已经全部切换完，切换完重新开始$("#scroll_number li").mouseover(function () {num = $(this).index();$("#scroll_img li").eq(num).fadeIn("slow").siblings().fadeOut("slow");$("#scroll_number li:eq(" + num + ")").css("background", "red").siblings().css("background", "#a9a9a9");})$("#scroll_img li").eq(num).fadeIn("slow").siblings().fadeOut("slow");$("#scroll_number li").eq(num).css("background", "red").siblings().css("background", "#a9a9a9");if (num == 3) {num = 0;} else {num++;}
}, 2000);

index.js

/*** Created by Administrator on 2019/7/6.*/
//广告页面弹窗
function open_adv() {window.open("open.html", "", "height=350,width=520,left=50,top=100");
}
//电子书特效
$(".book ul li img ").mouseover(function(){$(this).animate({"width":"240px"});
}).mouseout(function(){$(this).animate({"width":"60%"});
});

register.js

/*** Created by Administrator on 2019/7/9.*/