(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 div {padding-top: 60px;
}.empty_product a {color: #1965B3;
}/*注册页面样式*/
#register_header {height: 48px;
}.register_header_left {float: left;margin: 7px 0px 0px 40px;display: inline;
}.register_header_right {float: right;margin: 25px 20px 0px 0px;display: inline;
}.register_content {width: 950px;margin: 15px auto 15px auto;border-radius: 5px;border: 1px solid #a3a3a3;
}.register_mid_bg {border-bottom: dashed 1px #a3a3a3;border-top: 0px;height: 50px;padding-left: 20px;font-size: 18px;font-weight: bold;line-height: 50px;}.register_message {width: 900px;padding-top: 15px;
}.register_row {clear: both;
}.register_row dt {float: left;width: 200px;height: 30px;text-align: right;font-size: 14px;
}.register_row dd {float: left;margin-right: 5px;display: inline;
}.register_input {width: 200px;height: 18px;border: solid 1px #999;margin: 0px 0px 8px 0px;
}.registerBtn {height: 35px;margin: 10px 0px 10px 200px;clear: both;
}/*登录页面样式*/
.login_header_left {float: left;margin: 30px 10px 0px 100px;
}.login_header_right {float: right;margin: 50px 60px 0px 0px;
}.login_main_left {float: left;padding: 15px 0 0 120px;
}.login_main_left img {float: left;border: 0px;
}.login_main_dotted {float: left;background-image: url(../images/shopping_dotted.gif);width: 1px;height: 90px;margin: 20px 15px 20px 15px;
}.login_main_mid {border: solid 1px #666;float: right;width: 320px;padding: 10px 5px 10px 5px;margin: 15px 100px 0 0;
}.login_main_right {float: left;width: 74px;
}.login_main_right img {border: 0px;
}.login_content_top {background-image: url(../images/login_icon_bg_01.gif);background-position: -300px -30px;background-repeat: no-repeat;padding: 10px 0px 0px 35px;font-weight: bold;font-size: 14px;color: #069dd5;border-bottom: 1px dashed #a9a9a9;margin-bottom: 30px;
}.login_content {clear: both;margin: 10px 0px 0px 0px;
}.login_content dt {font-size: 14px;height: 30px;text-align: right;width: 150px;float: left;
}.login_content dd {float: left;
}.login_content_input {width: 120px;height: 16px;border: solid 1px #999;
}.login_content_input_Focus {background-color: #f1ffde;width: 120px;height: 16px;border: solid 1px #999;
}.login_btn_out {background-image: url(../images/login_icon_bg_01.gif);background-position: 0px -30px;background-repeat: no-repeat;width: 77px;height: 26px;border: 0px;cursor: pointer;
}.login_btn_over {background-image: url(../images/login_icon_bg_01.gif);background-position: -78px -30px;background-repeat: no-repeat;width: 77px;height: 26px;border: 0px;cursor: pointer;
}.login_content_end_bg {padding: 20px 20px 20px 20px;
}.login_content_end_bg_top {clear: both;padding: 20px 0;line-height: 28px;
}.login_content_bold {font-weight: bold;color: #333;
}.login_content_end_bg_end {clear: both;text-align: right;padding: 10px;}.login_register_out {background-image: url(../images/login_icon_bg_01.gif);background-position: 0px -3px;background-repeat: no-repeat;width: 144px;height: 26px;border: 0px;cursor: pointer;}.login_register_over {background-image: url(../images/login_icon_bg_01.gif);background-position: -144px -3px;background-repeat: no-repeat;width: 144px;height: 26px;border: 0px;cursor: pointer;
}.book {width: 710px;clear: left;margin-bottom: 10px;float: left;
}.book h1 {height: 40px;font-size: 16px;clear: both;line-height: 50px;overflow: hidden;border-bottom: 2px #000000 solid;margin-bottom: 10px;
}.book ul {width: 100%;overflow: hidden;border-top: 1px #cccccc solid;border-right: 1px #cccccc solid;
}.book ul li {float: left;width: 235px;height: 220px;overflow: hidden;text-align: center;border-left: 1px #cccccc solid;border-bottom: 1px #cccccc solid;}.book ul li img {width: 80%;
}.tab {width: 238px;border: 1px #ccc solid;float: right;height: 495px;overflow: hidden;
}.tab ol li {float: left;background: #ffffff;width: 119px;height: 35px;line-height: 35px;overflow: hidden;text-align: center;
}.tab ol li:last-of-type {background: #efefef;border-left: 1px solid #cccccc;border-bottom: 1px solid #ccc;width: 118px;
}.tab ul {clear: both;width: 100%;
}.tab ul li {clear: both;
}.tab ul li span {display: block;width: 25px;color: #999999;float: left;text-align: center;font-weight: bold;line-height: 35px;
}.tab ul li p {height: 35px;overflow: hidden;border-bottom: 1px #ccc solid;float: left;width: 213px;line-height: 35px;
}.tab ul li dl {border-bottom: 1px #ccc solid;float: left;width: 213px;height: 130px;overflow: hidden;display: none;padding-top: 5px;
}.tab ul li dl dt {float: left;width: 90px;
}.tab ul li dl dt img {width: 90px;
}.tab ul li dl dd {float: left;width: 120px;
}
/*图书新书榜*/
.tab ul:last-of-type {display: none;
}
/*去掉下边框*/
.tab ul li:last-of-type p, .tab ul li:last-of-type dl {border-bottom: none;
}.tab ul li:first-of-type p {display: none;
}
/*.tab ul li p {*//*display: none;*/
/*}*/.tab ul li:first-of-type dl {display: block;
}template.css
@charset "utf-8";
/* CSS Document *//*网页头部导航样式开始*/
.header_top,.header_middle,.header_search{margin-left:auto;margin-right:auto;width:955px;clear:both;
}
.header_top_left{float:left;width:260px;padding-left:10px;line-height:28px;
}
.header_top_right{float:right;padding-right:10px;width:400px;text-align:right;
}
.header_top_right li{float:right;margin-left:5px;margin-top:5px;
}
.logo,.menu_left,.menu_right{float:left;
}
.logo{width:155px;padding-top:13px;height:47px;
}
.menu_left{height:28px;margin-top:32px;line-height:35px;width:510px;border: 1px #a1a1a1 solid;border-bottom: none;border-top-left-radius: 5px;border-top-right-radius: 5px;background: #fbfbfb;
}.menu_left ul li{float:left;height:28px;padding:0px 3px 0px 3px;
}
.bold,.bold:hover{font-weight:bold;
}.menu_right{margin-top:32px;height:28px;
}
#menu_dull_red li{float:left;margin-left:5px;text-align:center;line-height:35px;height:28px;background: #d5edf6;border: 1px solid #3abbeb;border-bottom: none;border-top-left-radius: 5px;border-top-right-radius: 5px;padding: 0 4px;
}
#menu_dull_red a,#menu_dull_red:hover{color:#127da5;text-decoration:none;font-weight:bold;
}
.menu{clear:both;background:#1eb2e9;height:27px;line-height:28px;text-align:center;color:#FFF;border-radius: 5px;
}
#menu_white{float:left;}
.menu_mid_white,.menu_mid_white:hover{color:#FFF;padding:0px 4px 0px 4px;
}.header_search{margin-top:0px;height:35px;border: 1px #a1a1a1 solid;border-radius: 5px;;background: #fbfbfb;
}#header_serach_mid_menu li{float:left;margin-top:6px;padding:0px 5px 0px 5px;line-height:25px;
}
.header_input_search{margin-left:15px;width:200px;height:18px;
}
/*网页头部导航样式结束*/
/*网页版权部分样式开始*/
.footer_end{width:800px;margin:0px auto 0px auto;clear:both;text-align:center;
}/*网页版权部分样式结束*//*导航部分下拉菜单样式*/
#dd_menu_top_down{position:absolute;width:80px;text-align:left;border:solid 1px #999;border-top:0px;display:none;background-color:#FFF;padding-left:10px;
}#dd_menu_top_down li{float:none;
}HTML代码
index.html
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>蔚蓝网首页</title><link href="css/global.css" rel="stylesheet"/><link href="css/layout.css" rel="stylesheet"/><link href="css/template.css" rel="stylesheet"/>
</head>
<body>
<!--随滚动条滚动可关闭广告-->
<div id="right" class="right"><div class="dd_close" id="dd_close"><a href="javascript:void(0);">关闭</a></div><img src="images/scroll.jpg" id="right1"/>
</div>
<!--头部-->
<header id="header"><div class="header_top"><div class="header_top_left">您好！欢迎光临蔚蓝网 [<a href="login.html" target="_parent">登录<