(JS)蔚蓝网上书店(课本案例)

　

蔚蓝书店

有一点不完善，有点bug等待修改

CSS部分

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 p {
    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>
<!--随滚动条滚动可关闭广告-->
<p id="right" class="right">
    <p class="dd_close" id="dd_close"><a href="javascript:void(0);">关闭</a></p>
    <img src="images/scroll.jpg" id="right1"/>
</p>
<!--头部-->
<header id="header">
    <p class="header_top">
        <p class="header_top_left">您好！欢迎光临蔚蓝网 [<a href="login.html" target="_parent">登录</a> | <a href="register.html"
                                                                                                   target="_parent">免费注册</a>]
        </p>
        <p 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"/>
                    <p 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/>
                    </p>
                </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>
        </p>
    </p>
</header>
<p class="header_middle">
    <p class="logo"><img src="images/logo.png" alt="logo"/></p>
    <p class="search"><input type="text" placeholder="请输入搜索关键字"><input type="button"></p>
</p>
<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">
    <!--左侧菜单开始-->
    <p id="catList">
        <!--图书商品分类开始-->
        <p class="book_sort">
            <p class="book_sort_bg"><img src="images/dd_book_cate_icon.gif" alt="图书"/> 图书商品分类</p>
            <p class="book_sort_bottom">悬疑 | 言情 | 职场 | 财经</p>
            <p class="book_sort_bottom">文学 | 传记 | 艺术 | 摄影</p>
            <p class="book_sort_bottom">青春文学 | 动漫 | 幽默</p>
            <p class="book_sort_bottom">修养 | 成功 | 职场 | 沟通</p>
            <p class="book_sort_bottom">0-2 | 3-6 | 7-10 | 11-14<br/>文学 | 科普 | 图画书</p>
            <p class="book_sort_bottom">教材 | 中小学教辅 | 外语</p>
            <!--<p class="book_sort_bottom">保健 | 家教 | 美丽装扮 | 育儿 | 美食 | 旅游 | 收藏 | 生活 | 体育 | 地图 | 个人理财</p>
            <p class="book_cate">[个人社科]</p>
            <p class="book_sort_bottom">文化 | 历史 | 哲学/宗教 | 古籍 | 政治/历史 | 法律 | 经济 | 社会科学 | 心理学</p>
            <p class="book_cate">[管理]</p>
            <p class="book_sort_bottom">管理 | 金融 | 营销 | 会计</p>
            <p class="book_cate">[科技]</p>
            <p class="book_sort_bottom">科普 | 建筑 | 医学 | 计算机 | 农林 | 自然科学 | 工业 | 通信</p>
            <p class="book_cate">[教育]</p>

            <p class="book_cate">[工具书]</p>
           <p class="book_cate">[图外原版书]</p>
             <p class="book_cate">[期刊]</p> -->
        </p>
        <!--图书商品分类结束-->
    </p>
    <!--左侧菜单结束-->
    <!--中间部分开始-->
    <p id="content">
        <!--轮换显示的横幅广告图片-->
        <p 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>
        </p>
    </p>
    <!--中间部分结束-->
    <!--右侧部分开始-->
    <section id="silder">
        <!--书讯快递-->
        <p class="book_sort">
            <p class="book_sort_bg"><img src="images/dd_book_mess.gif" alt="mess"
                                           style=" vertical-align:text-bottom;"/>书讯快递
            </p>
            <p class="book_class">
                <p id="dome">
                    <p 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>
                    </p>
                </p>
            </p>
        </p>
    </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">
    <p 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></p>
    <p class="footer_end">Copyright (C) 蔚蓝网 2006-2016, All Rights Reserved <img src="images/validate.gif" alt="版权"
                                                                                  style="vertical-align:middle;"/>
        京ICP证100488号 出版物经营许可证 京批100160号
    </p>
</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">
    <p class="login_header_left"><img src="images/logo.png" alt="logo"/></p>
    <p 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></p>
</header>

<p id="main">
    <p class="login_main_left"><img src="images/book.jpg"> </p>
    <p class="login_main_mid">
        <p class="login_content_top">请登录蔚蓝网</p>
        <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>
        <p class="login_content_end_bg">
            <p class="login_content_end_bg_top">
                <label class="login_content_bold">还不是蔚蓝网用户？</label>快捷方便的免费注册，让你立刻尽享蔚蓝网提供的条项优惠服务......
            </p>
            <p class="login_content_end_bg_end">
                <input id="quick_register" class="login_register_out" value=" " type="button"/>
            </p>
        </p>
    </p>
</p>

<footer id="footer">
    <p 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></p>
    <p class="footer_end">Copyright (C) 蔚蓝网 2006-2016, All Rights Reserved  <img src="images/validate.gif"  alt="版权" style="vertical-align:middle;" /> 京ICP证100488号 出版物经营许可证 京批100160号</p>
</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">
    <p class="header_top">
        <p class="header_top_left">您好！欢迎光临蔚蓝网 [<a href="login.html" target="_parent">登录</a> | <a href="register.html" target="_parent">免费注册</a>]</p>
        <p 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" />
                    <p 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 />
                    </p>
                </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>
        </p>
    </p>
</header>
<p class="header_middle">
    <p class="logo"><img src="images/logo.png" alt="logo"/></p>
    <p class="search"><input type="text" placeholder="请输入搜索关键字"><input type="button"></p>
</p>
<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">
    <p class="current_place">您现在的位置：<a href="index.html">蔚蓝图书</a> &gt;&gt; 小说 &gt;&gt; 财经</p>
    <!--左侧菜单开始-->
    <p id="product_left">
        <p id="product_catList">
            <p class="product_catList_top">浏览同级分类</p>
            <p id="product_catList_class"><!--使用JavaScript显示图书分类--></p>
        </p>
        <p class="product_catList_end">
            <img src="images/product_01.gif" alt="shopping"/>
            <img src="images/product_02.gif" alt="shopping"/>
        </p>
    </p>
    <!--右侧内容开始-->
    <p id="product_storyList">
        <p 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>
        </p>
        <p id="product_array">
            <a class="click" name="array"  href="javascript:void(0)">列表</a>
            <a name="bigImg" href="javascript:void(0)">大图</a>
        </p>
        <!--图书排列开始-->
        <p id="product_storyList_content" class="product_storyList_content">
            <p id="storyBooksssss"><!--使用javaScript显示图书列表--></p>
            <!--列表开始-->
            <p class="product_storyList_content_left"><img src="images/product_list_01.jpg" alt="图书列表"/></p>
            <p 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>
            </p>
            <p class="product_storyList_content_bottom"></p>
            <!--列表开始-->
            <p class="product_storyList_content_left"><img src="images/product_list_02.jpg" alt="图书列表"/></p>
            <p 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>
            </p>
            <p class="product_storyList_content_bottom"></p>
            <!--列表开始-->
            <p class="product_storyList_content_left"><img src="images/product_list_03.jpg" alt="图书列表"/></p>
            <p 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>
            </p>
            <p class="product_storyList_content_bottom"></p>
            <!--列表开始-->
            <p class="product_storyList_content_left"><img src="images/product_list_04.jpg" alt="图书列表"/></p>
            <p 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>
            </p>
            <p class="product_storyList_content_bottom"></p>
            <!--列表开始-->
            <p class="product_storyList_content_left"><img src="images/product_list_05.jpg" alt="图书列表"/></p>
            <p 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>
            </p>
            <p class="product_storyList_content_bottom"></p>

            <p>
                <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>
            </p>
        </p>
    </p>
    <!--右侧内容结束-->
</section>
<!--网站版权部分开始-->
<footer id="footer">
    <p 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></p>
    <p class="footer_end">Copyright (C) 蔚蓝网 2006-2016, All Rights Reserved  <img src="images/validate.gif"  alt="版权" style="vertical-align:middle;" /> 京ICP证100488号 出版物经营许可证 京批100160号</p>
</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">
    <p id="register_header">
        <p class="register_header_left"><img src="images/logo.png" alt="logo"/></p>
        <p 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></p>
    </p>
</header>
<section id="main">
    <p class="register_content">
        <p class="register_mid_bg">用户注册</p>
        <p 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>
                <p class="registerBtn"><input id="registerBtn" type="image" src="images/register_btn_out.gif"/></p>
            </form>
        </p>
    </p>
</section>
<!--网站版权部分开始-->
<footer id="footer">
    <p 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></p>
    <p class="footer_end">Copyright (C) 蔚蓝网 2006-2016, All Rights Reserved  <img src="images/validate.gif"  alt="版权" style="vertical-align:middle;" /> 京ICP证100488号 出版物经营许可证 京批100160号</p>
</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">
    <p class="header_top">
        <p class="header_top_left">您好！欢迎光临蔚蓝网 [<a href="login.html" target="_parent">登录</a> | <a href="register.html" target="_parent">免费注册</a>]</p>
        <p 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" />
                    <p 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 />
                    </p>
                </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>
        </p>
    </p>
</header>
<p class="header_middle">
    <p class="logo"><img src="images/logo.png" alt="logo"/></p>
    <p class="search"><input type="text" placeholder="请输入搜索关键字"><input type="button"></p>
</p>
<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>
<!--中间部分开始-->
<p id="main">
    <p>&nbsp;&nbsp;<img src="images/shopping_myshopping.gif" alt="shopping"/> <a href="#">全场免运费活动中</a></p>
    <!--为您推荐商品开始-->
    <p class="shopping_commend">
        <p class="shopping_commend_left">根据您挑选的商品，蔚蓝为您推荐</p>
        <p class="shopping_commend_right"><img src="images/shopping_arrow_up.gif" alt="shopping" id="shopping_commend_arrow"/></p>
    </p>
    <p id="shopping_commend_sort">
        <p 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>
        </p>
        <p class="shopping_commend_sort_mid"></p>
        <p 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>
        </p>
    </p>
    <p class="shopping_list_top">您已选购以下商品</p>
    <p 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>
        <p class="shopping_list_end">
            <p><a id="removeAllProduct" href="javascript:void(0);">清空购物车</a></p>
            <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>
        </p>
    </p>
</p>

<!--网站版权部分开始-->
<footer id="footer">
    <p 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></p>
    <p class="footer_end">Copyright (C) 蔚蓝网 2006-2016, All Rights Reserved  <img src="images/validate.gif"  alt="版权" style="vertical-align:middle;" /> 京ICP证100488号 出版物经营许可证 京批100160号</p>
</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-4
        if (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 = ["<p 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></p>")
            $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));//积分
    }

});

相关阅读