<head>
<meta charset="UTF-8">
<title>蔚蓝网首页</title>
<link href="css/global.css" rel="stylesheet"/>
<link href="css/layout.css" rel="stylesheet"/>
<link href="css/template.css" rel="stylesheet"/>
</head>
<body>
<!--随滚动条滚动可关闭广告-->
<div id="right" class="right">
<div class="dd_close" id="dd_close"><a href="javascript:void(0);">关闭</a></div>
<img src="images/scroll.jpg" id="right1"/>
</div>
<!--头部-->
<header id="header">
<div class="header_top">
<div class="header_top_left">您好！欢迎光临蔚蓝网 [<a href="login.html" target="_parent">登录</a> | <a href="register.html"
target="_parent">免费注册</a>]
</div>
<div class="header_top_right">
<ul>
<li><a href="#" target="_self">客户服务</a></li>
<li>|</li>
<li id="menu"><a href="#" target="_self">新手入门</a><img src="images/arrow_down.gif" alt="arrow"/>
<div id="dd_menu_top_down">
<a href="#" target="_self">购物保障</a><br/>
<a href="#" target="_self">购物流程</a><br/>
<a href="#" target="_self">会员介绍</a><br/>
<a href="#" target="_self">常见问题</a><br/>
</div>
</li>
<li>|</li>
<li><a href="#" target="_self">礼品卡</a></li>
<li>|</li>
<li><a href="#" target="_self">我的订单</a></li>
<li>|</li>
<li><a href="#" target="_self">我的账户</a></li>
<li>|</li>
<li><a href="shopping.html" target="_parent">购物车</a></li>
<li><img src="images/header_shop.gif" alt="shopping"/></li>
</ul>
</div>
</div>
</header>
<div class="header_middle">
<div class="logo"><img src="images/logo.png" alt="logo"/></div>
<div class="search"><input type="text" placeholder="请输入搜索关键字"><input type="button"></div>
</div>
<nav id="nav">
<ul>
<li><a href="#"> 全部商品分类</a></li>
<li><a href="#"> 首页</a></li>
<li><a href="#"> 图书</a></li>
<li><a href="#"> 特价</a></li>
<li><a href="#"> 团购</a></li>
</ul>
</nav>
<!--网站中间内容开始-->
<section id="main">
<!--左侧菜单开始-->
<div id="catList">
<!--图书商品分类开始-->
<div class="book_sort">
<div class="book_sort_bg"><img src="images/dd_book_cate_icon.gif" alt="图书"/> 图书商品分类</div>
<div class="book_sort_bottom">悬疑 | 言情 | 职场 | 财经</div>
<div class="book_sort_bottom">文学 | 传记 | 艺术 | 摄影</div>
<div class="book_sort_bottom">青春文学 | 动漫 | 幽默</div>
<div class="book_sort_bottom">修养 | 成功 | 职场 | 沟通</div>
<div class="book_sort_bottom">0-2 | 3-6 | 7-10 | 11-14<br/>文学 | 科普 | 图画书</div>
<div class="book_sort_bottom">教材 | 中小学教辅 | 外语</div>
</div>
<!--图书商品分类结束-->
</div>
<!--左侧菜单结束-->
<!--中间部分开始-->
<div id="content">
<!--轮换显示的横幅广告图片-->
<div class="scroll">
<ul id="scroll_img">
<li><img src="images/scroll-01.jpg"/></li>
<li><img src="images/scroll-02.jpg"/></li>
<li><img src="images/scroll-03.jpg"/></li>
<li><img src="images/scroll-04.jpg"/></li>
</ul>
<ul id="scroll_number">
<li class="a">1</li>
<li class="a">2</li>
<li class="a">3</li>
<li class="a">4</li>
</ul>
</div>
</div>
<!--中间部分结束-->
<!--右侧部分开始-->
<section id="silder">
<!--书讯快递-->
<div class="book_sort">
<div class="book_sort_bg"><img src="images/dd_book_mess.gif" alt="mess"
style=" vertical-align:text-bottom;"/>书讯快递
</div>
<div class="book_class">
<div id="dome">
<div id="dome1">
<ul id="express">
<li>・2010考研英语大纲到货75折...</li>
<li>・权威定本四大名著（人民文...</li>
<li>・口述历史权威唐德刚先生国...</li>
<li>・袁伟民与体坛风云：实话实...</li>
<li>・我们台湾这些年：轰动两岸...</li>
<li>・畅销教辅推荐：精品套书50...</li>
<li>・2010版法律硕士联考大纲75...</li>
<li>・计算机新书畅销书75折抢购</li>
<li>・2009年孩子最喜欢的书>></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年孩子最喜欢的书>></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年孩子最喜欢的书>></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年孩子最喜欢的书>></li>
<li>・弗洛伊德作品精选集59折</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!--右侧部分结束-->
<section class="book">
<h1>电子书</h1>
<ul>
<li><img src="images/dianzi01.jpg"></li>
<li><img src="images/dianzi02.jpg"></li>
<li><img src="images/dianzi03.jpg"></li>
<li><img src="images/dianzi04.jpg"></li>
<li><img src="images/dianzi05.jpg"></li>
<li><img src="images/dianzi06.jpg"></li>
</ul>
</section>
<section class="tab">
<ol>
<li>图书畅销榜</li>
<li>图书上新书榜</li>
</ol>
<ul>
<li><span>1</span>
<p>追风筝的人</p>
<dl>
<dt><img src="images/selling01.jpg"></dt>
<dd><h1>追风筝的人</h1>中文版，快乐大本营高圆圆感动推荐，奥巴马送给女儿的新年礼物</dd>
</dl>
</li>
<li><span>2</span>
<p>解忧杂货店</p>
<dl>
<dt><img src="images/selling02.jpg"></dt>
<dd><h1>解忧杂货店</h1>《白夜行》后东野圭吾备受欢迎作品：不是推理小说，却更扣人心弦</dd>
</dl>
</li>
<li><span>3</span>
<p>天才在左疯子在右</p>
<dl>
<dt><img src="images/selling03.jpg"></dt>
<dd><h1>天才在左疯子在右</h1>新增10个被封杀篇章！看高智商疯子如何调戏和羞辱正常人！继高圆圆后，女神陈乔恩芒果台盛情推荐！</dd>
</dl>
</li>
<li><span>4</span>
<p>白夜行</p>
<dl>
<dt><img src="images/selling04.jpg"></dt>
<dd><h1>白夜行</h1>东野圭吾推理小说无冕之王。全新精装典藏版</dd>
</dl>
</li>
<li><span>5</span>
<p>阮/陈恩静 吕亦涵 著</p>
<dl>
<dt><img src="images/selling05.jpg"></dt>
<dd><h1>阮/陈恩静 吕亦涵 著</h1>商战风云诡谲X情场暗潮汹涌。这一生幸运的是—— 以你之名，冠我之姓</dd>
</dl>
</li>
<li><span>6</span>
<p>摆渡人</p>
<dl>
<dt><img src="images/selling06.jpg"></dt>
<dd><h1>摆渡人</h1>畅销欧美33个国家，荣获多项图书大奖。如果命运是一条孤独的河流，谁会是你灵魂的摆渡人？如果我真的存在，也是因为你需要我。</dd>
</dl>
</li>
<li><span>7</span>
<p>岛上书店</p>
<dl>
<dt><img src="images/selling07.jpg"></dt>
<dd><h1>岛上书店</h1>每个人的生命中，都有无比艰难的那一年，将人生变得美好而辽阔</dd>
</dl>
</li>
<li><span>8</span>
<p>百年孤独</p>
<dl>
<dt><img src="images/selling08.jpg"></dt>
<dd><h1>百年孤独</h1>加西亚马尔克斯代表作，中文版首次授权！</dd>
</dl>
</li>
<li><span>9</span>
<p>我们仨</p>
<dl>
<dt><img src="images/selling09.jpg"></dt>
<dd><h1>我们仨</h1>《我们仨》是杨绛先生撰写的家庭生活回忆录，三联书店出版，影响几代人的作品，杨绛先生经典散文！</dd>
</dl>
</li>
<li><span>10</span>
<p>从你的全世界路过</p>
<dl>
<dt><img src="images/selling10.jpg"></dt>
<dd><h1>从你的全世界路过</h1>从你的全世界路过 2014中国好书榜获奖图书</dd>
</dl>
</li>
</ul>
<ul>
<li><span>1</span>
<p>好吗好的</p>
<dl>
<dt><img src="images/newBook01.jpg"></dt>
<dd><h1>好吗好的</h1>凡8月12日20:00前下单顾客，100%有大冰亲笔签名，之后下单顾客先到先得签名。各仓到货时间不一致，请各位耐心等待。</dd>
</dl>
</li>
<li><span>2</span>
<p>永无止尽的约会</p>
<dl>
<dt><img src="images/newBook02.jpg"></dt>
<dd><h1>永无止尽的约会</h1>永无止尽的约会</dd>
</dl>
</li>
<li><span>3</span>
<p>你的坚持，终将美好</p>
<dl>
<dt><img src="images/newBook03.jpg"></dt>
<dd><h1>你的坚持，终将美好</h1>无论正在经历什么，都请你不要轻言放弃，因为从来没有一种坚持会被辜负</dd>
</dl>
</li>
<li><span>4</span>
<p>茧</p>
<dl>
<dt><img src="images/newBook04.jpg"></dt>
<dd><h1>茧</h1>阔别十年，张悦然与我们再度重逢。真正的爱，是知道爱你有多困难还选择爱你；真正的长大，是知道生活的真相还热爱生活</dd>
</dl>
</li>
<li><span>5</span>
<p>就喜欢你看不惯我 </p>
<dl>
<dt><img src="images/newBook05.jpg"></dt>
<dd><h1>就喜欢你看不惯我 </h1>霸气吾皇率蠢萌巴扎黑、伪深邃的牛能强势归来！</dd>
</dl>
</li>
<li><span>6</span>
<p>遇见美好系列</p>
<dl>
<dt><img src="images/newBook06.jpg"></dt>
<dd><h1>遇见美好系列</h1>全8册，3-7岁心灵成长绘本。</dd>
</dl>
</li>
<li><span>7</span>
<p>八万四千问</p>
<dl>
<dt><img src="images/newBook07.jpg"></dt>
<dd><h1>八万四千问</h1>宗萨蒋扬钦哲仁波切四年来首部作品：“佛法能够解决你们的所有问题。</dd>
</dl>
</li>
<li><span>8</span>
<p>极简生活：简而美地活</p>
<dl>
<dt><img src="images/newBook08.jpg"></dt>
<dd><h1>极简生活：简而美地活</h1>极简是风靡全球的一种生活态度与理念。告别繁杂，拥有简而美的生活。</dd>
</dl>
</li>
<li><span>9</span>
<p>好妈妈胜过好老师</p>
<dl>
<dt><img src="images/newBook09.jpg"></dt>
<dd><h1>好妈妈胜过好老师</h1>好妈妈胜过好老师2：自由的孩子最自觉</dd>
</dl>
</li>
<li><span>10</span>
<p>我们始终独自行走在这个世界</p>
<dl>
<dt><img src="images/newBook10.jpg"></dt>
<dd><h1>我们始终独自行走在这个世界</h1>十点读书、二更食堂、清华南都等各大微信阅读平台，简书、豆瓣千万读者口碑相传作品。</dd>
</dl>
</li>
</ul>
</section>
</section>
<!--网站版权部分开始-->
<footer id="footer">
<div class="footer_top"><a href="#" target="_parent" class="footer_dull_red">正版保障</a> | <a href="#" target="_parent"
class="footer_dull_red">满额免运</a>
| <a href="#" target="_parent" class="footer_dull_red">货到付款</a> | <a href="#" target="_parent"
class="footer_dull_red">品种最全</a> | <a
href="#" target="_parent" class="footer_dull_red">免费退换</a></div>
<div class="footer_end">Copyright (C) 蔚蓝网 2006-2016, All Rights Reserved <img src="images/validate.gif" alt="版权"
style="vertical-align:middle;"/>
京ICP证100488号 出版物经营许可证 京批100160号
</div>
</footer>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(document).ready(function () {
open_plan();
$("#menu a").mouseenter(function () {
$("#dd_menu_top_down").slideDown("slow");
});
$("#menu a").mouseleave(function () {
$("#dd_menu_top_down").slideUp("slow");
});
//点击关闭图片
$("#dd_close a").click(function () {
$("#right").hide();
});
//书讯快递的内容
marginTop = 0;
var interval = setInterval(function () {
/*children() 方法返回返回被选元素的所有直接子元素。
语法.children(selector)*/
$("#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;
}
}
});
}, 50);
//移到电子图片变大
$(".book li img ").mouseenter(function () {
$(this).animate({"width": "250px", "cursor": "pointer"});
});
$(".book li img").mouseleave(function () {
$(this).animate({"width": "223px"});
});
//我自己的图片的轮播图
// var index=0;
// setInterval(function (){
// // $("#scroll_number li").mouseenter(function () { //数字
// $("#scroll_number li").eq(index).css("background","red").siblings().css("background-color","gainsboro");
// $("#scroll_img li").eq(index).fadeIn("slow").siblings().fadeOut("slow");//图片
// index++;
// if(index==4) index=0;
})
// },1000);
//波波的代码
// function changeImg(){
// var index=0;//默认显示第一张
// var $li=$("#scroll_img li");//图片的 最大框框
// var $num=$("#scroll_number li");//数字的 最大框框
// var stop=false;
// //默认让第一个数字亮 stop() 方法为被选元素停止当前正在运行的动画。
// $num.eq(index).addClass("scroll_number_over").stop(true,true).siblings().removeClass("scroll_number_over");
// //鼠标放到数字上 removeClass删除类的样式
// $num.hover(function(){
// stop=true;
// index=$num.index($(this));
// $li.eq(index).stop(true,true).fadeIn().siblings().fadeOut();
// //addClass() 方法向被选元素添加一个或多个类。
// // 该方法不会移除已存在的 class 属性，仅仅添加一个或多个 class 属性。
// $(this).addClass("scroll_number_over").stop(true,true).siblings().removeClass("scroll_number_over");
// //siblings( )查找 Li中的所有
// },function(){
// stop=false;
// });
// //定时播放图片
// setInterval(function(){
// if(stop==true){
return;
// }
// index++;
// if(index>=$li.length){
// index=0;
// }
// $li.eq(index).stop(true,true).fadeIn().siblings().fadeOut();
// $num.eq(index).addClass("scroll_number_over").stop(true,true).siblings().removeClass("scroll_number_over");
// },3000);
// }
// changeImg();
//组长代码
var s = 0;//下标
$("#scroll_number li").mouseover(function () {
s=$(this).index();
$(this).nextAll().css("background","#a9a9a9");//nextAll() 获得匹配元素集合中每个元素的所有跟随的同胞元素，由选择器筛选是可选的。
$(this).prevAll().css("background","#a9a9a9");//prevAll() 获得当前匹配元素集合中每个元素的前面的同胞元素，使用选择器进行筛选是可选的。
$(this).css({"background-color":"red"});
$("#scroll_img li img").attr("src","images/scroll-0"+(s+1)+".jpg")
});
$("#scroll_number li:eq(0)").css("background-color","red");
setInterval(function(){
if(s<3){
s++;
}
$("#scroll_img li img").attr("src","images/scroll-0"+(s+1)+".jpg");
$("#scroll_number li").css("background","#a9a9a9");
$("#scroll_number li:eq("+s+")").css("background-color","red");
if(s>=3){
s=-1;
}
},2000);
//图书畅销榜 图书新书榜
$(".tab ol li:eq(1)").click(function () {
$(".tab ul:eq(1)").css("cursor", "pointer").show();
$(".tab ul:eq(0)").css("cursor", "pointer").hide();
$(".tab ol li:eq(1)").css("background", "#FFFFFF");
$(".tab ol li:eq(0)").css("background", "gainsboro");
})
$(".tab ol li:eq(0)").click(function () {
$(".tab ul:eq(0)").css("cursor", "pointer").show();
$(".tab ul:eq(1)").css("cursor", "pointer").hide();
$(".tab ol li:eq(0)").css("background", "#FFFFFF");
$(".tab ol li:eq(1)").css("background", "gainsboro");
})
$(".tab ul li").hover(function () {
$(".tab ul li:eq(0) dl").hide();
$(".tab ul li:eq(0) p").show();
$(this).children("dl").show();
$(this).children("p").hide();
}, function () {
$(this).children("p").show();//获取当前的 遍历标签
$(this).children("dl").hide();
}
);
function open_plan() {
window.open("open.html","广告页面","width=500px height=350px");
}
});
</script>
</body>//index.html
2.login.html
head>
<meta charset="UTF-8">
<title>蔚蓝网登录页面</title>
<link href="css/global.css" rel="stylesheet" />
<link href="css/layout.css" rel="stylesheet" />
<link href="css/template.css" rel="stylesheet" />
</head>
<body>
<header class="header_middle">
<div class="login_header_left"><img src="images/logo.png" alt="logo"/></div>
<div class="login_header_right"><a href="index.html" class="blue">首页</a> | <a href="product.html" class="blue">商品展示页</a> | <a href="shopping.html" class="blue">购物车</a> | <a href="register.html" class="blue">注册</a></div>
</header>
<div id="main">
<div class="login_main_left"><img src="images/book.jpg"> </div>
<div class="login_main_mid">
<div class="login_content_top">请登录蔚蓝网</div>
<form id="loginForm" action="" method="post">
<dl class="login_content">
<dt>Email地址或昵称：</dt>
<dd><input id="email" type="text" class="login_content_input"/></dd>
</dl>
<dl class="login_content">
<dt>密码：</dt>
<dd><input id="pwd" type="password" class="login_content_input"/></dd>
</dl>
<dl class="login_content">
<dt></dt>
<dd><input id="btn" value=" " type="submit" class="login_btn_out"/></dd>
</dl>
</form>
<div class="login_content_end_bg">
<div class="login_content_end_bg_top">
<label class="login_content_bold">还不是蔚蓝网用户？</label>快捷方便的免费注册，让你立刻尽享蔚蓝网提供的条项优惠服务......
</div>
<div class="login_content_end_bg_end">
<input id="quick_register" class="login_register_out" value=" " type="button"/>
</div>
</div>
</div>
</div>
<footer id="footer">
<div class="footer_top"><a href="#" target="_parent" class="footer_dull_red">正版保障</a> | <a href="#" target="_parent" class="footer_dull_red">满额免运</a> | <a href="#" target="_parent" class="footer_dull_red">货到付款</a> | <a href="#" target="_parent" class="footer_dull_red">品种最全</a> | <a href="#" target="_parent" class="footer_dull_red">免费退换</a></div>
<div class="footer_end">Copyright (C) 蔚蓝网 2006-2016, All Rights Reserved <img src="images/validate.gif" alt="版权" style="vertical-align:middle;" /> 京ICP证100488号 出版物经营许可证 京批100160号</div>
</footer>
<script src="js/jquery-1.12.4.js"></script>
<script>
// .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;
// }
$(document).ready(function () {
//登录图片的变化
$("#btn").hover(function () {
$("#btn").css("background","url('images/login_icon_bg_01.gif')no-repeat -78px -29px");
},function () {
$("#btn").css("background","url('images/login_icon_bg_01.gif')no-repeat 0px -29px");
});
$("#quick_register").hover(function () {
$("#quick_register").css("background","url('images/login_icon_bg_01.gif')no-repeat -144px -3px");
},function () {
$("#quick_register").css("background","url('images/login_icon_bg_01.gif')no-repeat");
});
$("#btn").click(function () {
var email1=document.getElementById("email");
if(email1.value==""){
alert("请输入Emali地址或昵称")
}
var pwd1=document.getElementById("pwd");
if(pwd1.value==""){
alert("请输入密码")
}
})
})
</script>
</body>
//3.product.html
<head>
<meta charset="UTF-8">
<title>蔚蓝网商品展示页面</title>
<link href="css/global.css" rel="stylesheet"/>
<link href="css/layout.css" rel="stylesheet"/>
<link href="css/template.css" rel="stylesheet" />
</head>
<body>
<header id="header">
<div class="header_top">
<div class="header_top_left">您好！欢迎光临蔚蓝网 [<a href="login.html" target="_parent">登录</a> | <a href="register.html" target="_parent">免费注册</a>]</div>
<div class="header_top_right">
<ul>
<li><a href="#" target="_self">客户服务</a></li>
<li>|</li>
<li id="menu"><a href="#" target="_self">新手入门</a> <img src="images/arrow_down.gif" alt="arrow" />
<div id="dd_menu_top_down">
<a href="#" target="_self">购物保障</a><br />
<a href="#" target="_self">购物流程</a><br />
<a href="#" target="_self">会员介绍</a><br />
<a href="#" target="_self">常见问题</a><br />
</div>
</li>
<li>|</li>
<li><a href="#" target="_self">礼品卡</a></li>
<li>|</li>
<li><a href="#" target="_self">我的订单</a></li>
<li>|</li>
<li><a href="#" target="_self">我的账户</a></li>
<li>|</li>
<li><a href="shopping.html" target="_parent">购物车</a></li>
<li><img src="images/header_shop.gif" alt="shopping"/></li>
</ul>
</div>
</div>
</header>
<div class="header_middle">
<div class="logo"><img src="images/logo.png" alt="logo"/></div>
<div class="search"><input type="text" placeholder="请输入搜索关键字"><input type="button"></div>
</div>
<nav id="nav">
<ul>
<li><a href="#"> 全部商品分类</a></li>
<li><a href="#"> 首页</a></li>
<li><a href="#"> 图书</a></li>
<li><a href="#"> 特价</a></li>
<li><a href="#"> 团购</a></li>
</ul>
</nav>
<!--中间部分开始-->
<section id="main">
<div class="current_place">您现在的位置：<a href="index.html">蔚蓝图书</a> >> 小说 >> 财经</div>
<!--左侧菜单开始-->
<div id="product_left">
<div id="product_catList">
<div class="product_catList_top">浏览同级分类</div>
<div id="product_catList_class"><!--使用javaScript显示图书分类--></div>
</div>
<div class="product_catList_end">
<img src="images/product_01.gif" alt="shopping"/>
<img src="images/product_02.gif" alt="shopping"/>
</div>
</div>
<!--右侧内容开始-->
<div id="product_storyList">
<div id="product_storyList_top">
<ul>
<li>排序方式</li>
<li><img src="images/dd_arrow_right.gif" alt="arrow"/></li>
<li>
<select id="compositor">
<option>按销量 降序</option>
<option>按价格 升序</option>
<option>按价格 降序</option>
<option>按折扣 升序</option>
<option>按折扣 降序</option>
<option>按出版时间 升序</option>
<option>按出版时间 降序</option>
<option>按上架时间 升序</option>
<option>按上架时间 降序</option>
</select>
</li>
<li><img src="images/product_icon_01.gif" alt="icon"/></li>
<li><img src="images/product_icon_02.gif" alt="icon"/></li>
<li><img src="images/product_icon_03.gif" alt="icon"/></li>
<li><img src="images/product_icon_04.gif" alt="icon"/></li>
<li>每页显示的数量</li>
<li><img src="images/dd_arrow_right.gif" alt="arrow"/></li>
<li><img src="images/product_icon_20.gif" alt="icon"/></li>
<li><img src="images/product_icon_40.gif" alt="icon"/></li>
<li style="float:right; padding-right:10px;"><img src="images/product_page_down.gif" alt="icon"/></li>
<li style="float:right;">第1页</li>
<li style="float:right;"><img src="images/product_page_up.gif" alt="icon"/></li>
</ul>
</div>
<div id="product_array">
<a class="click" name="array" href="javascript:void(0)">列表</a>
<a name="bigImg" href="javascript:void(0)">大图</a>
</div>
<!--图书排列开始-->
<div id="product_storyList_content" class="product_storyList_content">
<div id="storyBooksssss"><!--使用javaScript显示图书列表--></div>
<!--列表开始-->
<div class="product_storyList_content_left"><img src="images/product_list_01.jpg" alt="图书列表"/></div>
<div class="product_storyList_content_right">
<ul>
<li class="product_storyList_content_dash"><a href="#" class="blue_14">私募（首部披露资本博弈秘密的金融小说）</a></li>
<li>顾客评分：<img src="images/star_red.gif" alt="star"/><img src="images/star_red.gif" alt="star"/><img src="images/star_red.gif" alt="star"/><img src="images/star_red.gif" alt="star"/><img src="images/star_gray.gif" alt="star"/></li>
<li>作 者：<a href="#" class="blue_14">郭现杰</a> 著</li>
<li>出版社：<a href="#" class="blue_14">花山文艺出版社</a></li>
<li>出版时间：2009年08月</li>
<li>数年前，在一次股市的多、空之战中，以赵云狄、林康为首的私募基金―金鼎投资，和以王雨龙为首的私募基金，达成锁仓协议分食利益。殊料，以王雨龙为首的私募基金―鑫利投资背信弃义，导致金鼎投资惨败。以至...</li>
<li>
<dl class="product_content_dd">
<dd><img src="images/product_buy_02.gif" alt="shopping"/></dd>
<dd><img src="images/product_buy_01.gif" alt="shopping"/></dd>
<dd>节省：￥13.10</dd>
<dd>折扣：<span>59折</span></dd>
<dd class="footer_dull_red"><span>￥18.90</span></dd>
<dd class="product_content_delete"><span>￥32.00</span></dd>
</dl>
</li>
</ul>
</div>
<div class="product_storyList_content_bottom"></div>
<!--列表开始-->
<div class="product_storyList_content_left"><img src="images/product_list_02.jpg" alt="图书列表"/></div>
<div class="product_storyList_content_right">
<ul>
<li class="product_storyList_content_dash"><a href="#" class="blue_14">圈子圈套.1.战局篇 </a></li>
<li>顾客评分：<img src="images/star_red.gif" alt="star"/><img src="images/star_red.gif" alt="star"/><img src="images/star_red.gif" alt="star"/><img src="images/star_red.gif" alt="star"/><img src="images/star_red2.gif" alt="star"/></li>
<li>作 者：<a href="#" class="blue_14">王强 </a> 著</li>
<li>出版社：<a href="#" class="blue_14">清华大学出版社</a></li>
<li>出版时间：2006年01月</li>
<li>虽然没有硝烟，却比战场更血腥；虽然并未战死，却比死亡更痛苦。 洪钧从一个底层的销售人员，成为一家著名的跨国公司的中国区代理首席代表，在即将被扶正，事业情感都志得意满的时候，掉入俞威设计的圈套，...</li>
<li>
<dl class="product_content_dd">
<dd><img src="images/product_buy_02.gif" alt="shopping"/></dd>
<dd><img src="images/product_buy_01.gif" alt="shopping"/></dd>
<dd>节省：￥8.90</dd>
<dd>折扣：<span>68折</span></dd>
<dd class="footer_dull_red"><span>￥19.10</span></dd>
<dd class="product_content_delete"><span>￥28.00</span></dd>
</dl>
</li>
</ul>
</div>
<div class="product_storyList_content_bottom"></div>
<!--列表开始-->
<div class="product_storyList_content_left"><img src="images/product_list_03.jpg" alt="图书列表"/></div>
<div class="product_storyList_content_right">
<ul>
<li class="product_storyList_content_dash"><a href="#" class="blue_14">饕餮（最真实的商场高端博弈小说） </a></li>
<li>顾客评分：<img src="images/star_red.gif" alt="star"/><img src="images/star_red.gif" alt="star"/><img src="images/star_red.gif" alt="star"/><img src="images/star_red.gif" alt="star"/><img src="images/star_red.gif" alt="star"/></li>
<li>作 者：<a href="#" class="blue_14">韦帕 </a> 著</li>
<li>出版社：<a href="#" class="blue_14">国际文化出版公司</a></li>
<li>出版时间：2009年07月</li>
<li>北京，六百公里处，有宝地，233亩，土地价值2.5亿，总投资额近八亿，利润近三亿。 项目吸引了众多北京房地产商目光，其中最贪婪的一道目光，来自顾忱。但顾忱，总资产不过千万！想拿项目，无异于“空手套...</li>
<li>
<dl class="product_content_dd">
<dd><img src="images/product_buy_02.gif" alt="shopping"/></dd>
<dd><img src="images/product_buy_01.gif" alt="shopping"/></dd>
<dd>节省：￥8.40</dd>
<dd>折扣：<span>74折</span></dd>
<dd class="footer_dull_red"><span>￥23.60</span></dd>
<dd class="product_content_delete"><span>￥32.00</span></dd>
</dl>
</li>
</ul>
</div>
<div class="product_storyList_content_bottom"></div>
<!--列表开始-->
<div class="product_storyList_content_left"><img src="images/product_list_04.jpg" alt="图书列表"/></div>
<div class="product_storyList_content_right">
<ul>
<li class="product_storyList_content_dash"><a href="#" class="blue_14">圈子圈套 迷局篇2：职场商战三部曲 </a></li>
<li>顾客评分：<img src="images/star_red.gif" alt="star"/><img src="images/star_red.gif" alt="star"/><img src="images/star_red.gif" alt="star"/><img src="images/star_red.gif" alt="star"/><img src="images/star_red.gif" alt="star"/></li>
<li>作 者：<a href="#" class="blue_14">王强 </a> 著</li>
<li>出版社：<a href="#" class="blue_14">长江文艺出版社</a></li>
<li>出版时间：2006年08月</li>
<li>《圈子圈套2・迷局篇》是“圈子圈套三部曲”的第二部。 职场风云再起。洪钧出任维西尔中国区总经理，他和俞威之间的较量又或明或暗地展开来，面对内部的纷争和商场上的尔虞我诈，他该如何出招……俞威依...</li>
<li>
<dl class="product_content_dd">
<dd><img src="images/product_buy_02.gif" alt="shopping"/></dd>
<dd><img src="images/product_buy_01.gif" alt="shopping"/></dd>
<dd>节省：￥11.4</dd>
<dd>折扣：<span>59折</span></dd>
<dd class="footer_dull_red"><span>￥16.60</span></dd>
<dd class="product_content_delete"><span>￥28.00</span></dd>
</dl>
</li>
</ul>
</div>
<div class="product_storyList_content_bottom"></div>
<!--列表开始-->
<div class="product_storyList_content_left"><img src="images/product_list_05.jpg" alt="图书列表"/></div>
<div class="product_storyList_content_right">
<ul>
<li class="product_storyList_content_dash"><a href="#" class="blue_14">圈子圈套3.终局篇（附赠王强演讲光盘） </a></li>
<li>顾客评分：<img src="images/star_red.gif" alt="star"/><img src="images/star_red.gif" alt="star"/><img src="images/star_red.gif" alt="star"/><img src="images/star_red.gif" alt="star"/><img src="images/star_gray.gif" alt="star"/></li>
<li>作 者：<a href="#" class="blue_14">王强 </a> 著</li>
<li>出版社：<a href="#" class="blue_14">长江文艺出版社</a></li>
<li>出版时间：2007年10月</li>
<li>本书全景展示了商场和职场的生死厮杀、巅峰对决。主人公的命运、项目结局、所有的爱恨情仇都在本书中揭开谜底。 再次陷入低谷的洪钧在内忧外患中不甘消沉，在职场上和自己的上司明争暗斗，在商场上则和夙...</li>
<li>
<dl class="product_content_dd">
<dd><img src="images/product_buy_02.gif" alt="shopping"/></dd>
<dd><img src="images/product_buy_01.gif" alt="shopping"/></dd>
<dd>节省：￥13.10</dd>
<dd>折扣：<span>59折</span></dd>
<dd class="footer_dull_red"><span>￥18.9</span></dd>
<dd class="product_content_delete"><span>￥32.00</span></dd>
</dl>
</li>
</ul>
</div>
<div class="product_storyList_content_bottom"></div>
<div>
<dl class="product_content_dd">
<dd><img src="images/OK.gif" alt="ok"/></dd>
<dd>页</dd>
<dd><input name="page" type="text" value="1" style="width:20px;"/></dd>
<dd>跳转到第</dd>
<dd><img src="images/next.gif" alt="ok"/></dd>
<dd>
<ul id="product_page">
<li><a href="#" class="product_page">1</a></li>
<li><a href="#" class="product_page">2</a></li>
<li> <a href="#" class="product_page">3</a></li>
<li> ...</li>
<li><a href="#" class="product_page">14</a></li>
<li><a href="#" class="product_page">15</a></li>
<li><a href="#" class="product_page">16</a></li>
</ul>
</dd>
<dd><img src="images/product_page_up.gif" alt="ok"/></dd>
</dl>
</div>
</div>
</div>
<!--右侧内容结束-->
</section>
<!--网站版权部分开始-->
<footer id="footer">
<div class="footer_top"><a href="#" target="_parent" class="footer_dull_red">正版保障</a> | <a href="#" target="_parent" class="footer_dull_red">满额免运</a> | <a href="#" target="_parent" class="footer_dull_red">货到付款</a> | <a href="#" target="_parent" class="footer_dull_red">品种最全</a> | <a href="#" target="_parent" class="footer_dull_red">免费退换</a></div>
<div class="footer_end">Copyright (C) 蔚蓝网 2006-2016, All Rights Reserved <img src="images/validate.gif" alt="版权" style="vertical-align:middle;" /> 京ICP证100488号 出版物经营许可证 京批100160号</div>
</footer>
<script src="js/jquery-1.12.4.js"></script>
<script >
$(document).ready(function () {
var bookSort=new Array("中国当代小说(1380)","中国近代小说(640)","中古典小说(1547)",
"四大名著(1547)","港澳小说(1547)","外国小说(1547)","侦探/悬疑小说(1547)","惊悚恐怖(1547)"
,"魔幻(1547)","科幻(1547)","武侠(1547)","军事(1547)","情感(1547)"
,"社会(1547)","都市(1547)","乡士(1547)","职场(1547)","财经(1547)"
,"官场(1547)","历史(1547)","影视小说(1547)","作品集(1547)","世界名著(1547)"
);
var html=[];
$.each(bookSort,function (i,n) {//each() 方法规定为每个匹配元素规定运行的函数。
html.push("<li>.<a href='#'class='blue'>"+n+"</a></li>")//push()方法可向数组的末尾添加一个或多个元素，并返回新的长度。
});
/*join() 方法用于把数组中的所有元素放入一个字符串。
元素是通过指定的分隔符进行分隔的。*/
$("#product_catList_class").html(html.join(""));
});
$(document).ready(function () {
//点集大图类表事件
$("#product_array a").click(function () {
$(this).css("background","#F96");
$("#product_array a:eq(0)").css("background","#FFFFFF");
})
//0是列表 1是大图
$("#product_array a:eq(0)").click(function () {
$(this).css("background","#F96");
$("#product_array a:eq(1)").css("background","#FFFFFF");
})
// **列表模式和大图模式切换**
var $getBookList = $('#product_storyList_content').html();
//大图模式(从列表的DOM中获取信息)
function getBigBookList() {
var $listBookImg = $('#product_storyList_content .product_storyList_content_left');
var $contents = "";
$(".product_storyList_content_right").find("ul").each(function(i, e) {
var $content = ["<div class='big_img_list'><ul><li class='bookImg'>" + $listBookImg.eq(i).html() + "<>"];
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><><>")
$content.push("<li class='detail'>" + $(e).children("li").eq(5).text() + "<>")
$content.push("<li class='detail'>" + $(e).children("li").eq(2).text() + "<>")
$content.push("<li class='detail'>" + $(e).children("li").eq(1).text() + "<>")
$content.push("<li class='detail'>" + $(e).children("li").eq(3).text() + "<>")
$content.push("<li class='detail'>" + $(e).children("li").eq(4).text() + "<></ul></div>")
$contents += $content.join("");
});
return $contents;
}
var $bigBookList = getBigBookList();
$("#product_array").children().click(function () {
$(this).addClass("click").siblings().removeClass("click");
//使用attr判断this是列表还是大图
if($(this).attr("name") == "array"){
$("#product_storyList_content").html($getBookList);
}else if($(this).attr("name") == "bigImg"){
$("#product_storyList_content").html($bigBookList);
// 鼠标悬浮到大图模式图片上的时候 显示隐藏的信息
$("#product_storyList_content").children().find("ul").hover(function() {
$(this).addClass("over");
$(this).parent().addClass("over");
}, function() {
$(this).removeClass("over");
$(this).parent().removeClass("over");
})
}
})
// **列表模式和大图模式切换**
var $getBookList = $('#product_storyList_content').html();
//大图模式(从列表的DOM中获取信息)
function getBigBookList() {
var $listBookImg = $('#product_storyList_content .product_storyList_content_left');
var $contents = "";
$(".product_storyList_content_right").find("ul").each(function(i, e) {
var $content = ["<div class='big_img_list'><ul><li class='bookImg'>" + $listBookImg.eq(i).html() + "<>"];
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><><>")
$content.push("<li class='detail'>" + $(e).children("li").eq(5).text() + "<>")
$content.push("<li class='detail'>" + $(e).children("li").eq(2).text() + "<>")
$content.push("<li class='detail'>" + $(e).children("li").eq(1).text() + "<>")
$content.push("<li class='detail'>" + $(e).children("li").eq(3).text() + "<>")
$content.push("<li class='detail'>" + $(e).children("li").eq(4).text() + "<></ul></div>")
$contents += $content.join("");
});
return $contents;
}
var $bigBookList = getBigBookList();
$("#product_array").children().click(function () {
$(this).addClass("click").siblings().removeClass("click");
//使用attr判断this是列表还是大图
if($(this).attr("name") == "array"){
$("#product_storyList_content").html($getBookList);
}else if($(this).attr("name") == "bigImg"){
$("#product_storyList_content").html($bigBookList);
// 鼠标悬浮到大图模式图片上的时候 显示隐藏的信息
$("#product_storyList_content").children().find("ul").hover(function() {
$(this).addClass("over");
$(this).parent().addClass("over");
}, function() {
$(this).removeClass("over");
$(this).parent().removeClass("over");
})
}
})
})
</script>
<!--<script src="js/product.js"></script>-->
<!--<script src="js/header.js"></script>-->
</body>
//4.register.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>蔚蓝网注册页面</title>
<link href="css/global.css" rel="stylesheet" />
<link href="css/layout.css" rel="stylesheet" />
<link href="css/template.css" rel="stylesheet" />
</head>
<body>
<header class="header_middle">
<div id="register_header">
<div class="register_header_left"><img src="images/logo.png" alt="logo"/></div>
<div class="register_header_right"><a href="index.html" class="blue">首页</a> | <a href="product.html" class="blue">商品展示页</a> | <a href="shopping.html" class="blue">购物车</a> | <a href="login.html" class="blue">登录</a></div>
</div>
</header>
<section id="main">
<div class="register_content">
<div class="register_mid_bg">用户注册</div>
<div class="register_message">
<form action="" method="post" id="myform">
<dl class="register_row">
<dt>Email地址：</dt>
<dd><input id="email" type="email" required="required" class="register_input"/></dd>
</dl>
<dl class="register_row">
<dt>设置昵称：</dt>
<dd><input id="nickName" type="text" class="register_input" required="required" pattern="[a-zA-Z0-9]{4,20}"/></dd>
</dl>
<dl class="register_row">
<dt>设定密码：</dt>
<dd><input id="pwd" type="password" class="register_input"required="required" pattern="[a-zA-Z0-9]{6,20}"/></dd>
</dl>
<dl class="register_row">
<dt>再输入一次密码：</dt>
<dd><input id="repwd" type="password" class="register_input"/></dd>
</dl>
<dl class="register_row">
<dt>性别：</dt>
<dd><input name="sex" id="man" type="radio" value="男" checked="checked"/> <label for="man">男</label></dd>
<dd> <input name="sex" id="woman" type="radio" value="女"/> <label for="woman">女</label></dd>
</dl>
<dl class="register_row">
<dt>所在地区：</dt>
<dd>
<select id="province" style="width:120px;">
<option>请选择省/城市</option>
</select>
</dd>
<dd>
<select id="city" style="width:130px;">
<option>请选择城市/地区</option>
</select>
</dd>
</dl>
<div class="registerBtn"><input id="registerBtn" type="image" src="images/register_btn_out.gif"/></div>
</form>
</div>
</div>
</section>
<!--网站版权部分开始-->
<footer id="footer">
<div class="footer_top"><a href="#" target="_parent" class="footer_dull_red">正版保障</a> | <a href="#" target="_parent" class="footer_dull_red">满额免运</a> | <a href="#" target="_parent" class="footer_dull_red">货到付款</a> | <a href="#" target="_parent" class="footer_dull_red">品种最全</a> | <a href="#" target="_parent" class="footer_dull_red">免费退换</a></div>
<div class="footer_end">Copyright (C) 蔚蓝网 2006-2016, All Rights Reserved <img src="images/validate.gif" alt="版权" style="vertical-align:middle;" /> 京ICP证100488号 出版物经营许可证 京批100160号</div>
</footer>
<script src="js/jquery-1.12.4.js"></script>
<!--<script src="js/register.js"></script>-->
<script>
$(document).ready(function () {
$("#registerBtn").click(function () {
var u=document.getElementById("nickName");
if(u.validity.valueMissing==true){
u.setCustomValidity("昵称不能为空");
}else
if(u.validity.patternMismatch==true){
u.setCustomValidity("昵称必须是4-20位的英文和数字")
}
var pwd1=document.getElementById("pwd");
if(pwd1.validity.patternMismatch==true){
pwd1.setCustomValidity("密码必须是6-20位的英文和数字")
}
var repw=document.getElementById("repwd");
var pwd=$("#pwd");
var repwd=$("#repwd");
if(pwd.val()!=repwd.val()){
repw.setCustomValidity("两次密码输入不一致");
}
});
//所在地区的下拉框
var province = document.getElementById('province');
var city = document.getElementById('city');
//省份
var provinceArr = [];//定义数组
provinceArr[0] = ['北京市'];
provinceArr[1] = ['天津市'];
provinceArr[2] = ['上海市'];
provinceArr[3] = ['重庆市'];
provinceArr[4] = ['河北省'];
provinceArr[5] = ['河南省'];
provinceArr[6] = ['云南省'];
provinceArr[7] = ['辽宁省'];
provinceArr[8] = ['黑龙江省'];
provinceArr[9] = ['湖南省'];
provinceArr[10] = ['安徽省'];
provinceArr[11] = ['山东省'];
provinceArr[12] = ['新疆维吾尔自治区'];
provinceArr[13] = ['江苏省'];
provinceArr[14] = ['浙江省'];
provinceArr[15] = ['江西省'];
provinceArr[16] = ['湖北省'];
provinceArr[17] = ['广西壮族'];
provinceArr[18] = ['甘肃省'];
provinceArr[19] = ['山西省'];
provinceArr[20] = ['内蒙古自治区'];
provinceArr[21] = ['陕西省'];
provinceArr[22] = ['吉林省'];
provinceArr[23] = ['福建省'];
provinceArr[24] = ['贵州省'];
provinceArr[25] = ['广东省'];
provinceArr[26] = ['青海省'];
provinceArr[27] = ['西藏'];
provinceArr[28] = ['四川省'];
provinceArr[29] = ['宁夏回族'];
provinceArr[30] = ['海南省'];
provinceArr[31] = ['台湾省'];
provinceArr[32] = ['香港特别行政区'];
provinceArr[33] = ['澳门特别行政区'];
//市县,每个数组第一个元素为省份,其他的为这个省份下的市县
var cityArr = [];
cityArr[0] = ['北京市','东城区', '西城区','崇文区','宣武区','朝阳区','丰台区','石景山区', '海淀区','门头沟区', '房山区','通州区','顺义区','昌平区','大兴 区','怀柔区','平谷区','密云县','延庆县'];
cityArr[1] = ['天津市','和平区','河东区', '河西区', '南开区', '河北区', '红桥区', '塘沽区', '汉沽区', '大港区', '东丽区', '西青区', '津南区', '北辰区', '武清区', '宝坻区', '宁河县', '静海县', '蓟县'];
cityArr[2] = ['上海市','黄浦区','卢湾区', '徐汇区','长宁区','静安区','普陀区','闸北区','虹口区', '杨浦区', '闵行区', '宝山区', '嘉定区', '浦东新区', '金山区', '松江区', '青浦区', '南汇区', '奉贤区', '崇明县'];
cityArr[3] = ['重庆市','万州区','涪陵区','渝中区','大渡口区','江北区','沙坪坝区','九龙坡区','南岸区','北碚区','万盛区','双桥区','渝北区','巴南区','黔江区','长寿区','江津区','合川区','永川区','南川区','綦江县','潼南县','铜梁县','大足县','荣昌县','璧山县','梁平县','城口县','丰都县','垫江县','武隆县','忠县','开县','云阳县','奉节县','巫山县','巫溪县','石柱土家族自治县','秀山土家族苗族自治县','酉阳土家族苗族自治县','彭水苗族土家族自治县'];
cityArr[4] = ['河北省','石家庄市', '唐山市', '秦皇岛市', '邯郸市', '邢台市', '保定市', '张家口市', '承德市', '沧州市', '廊坊市', '衡水市'];
cityArr[5] = ['河南省','郑州市','开封市','洛阳市', '平顶山市', '安阳市', '鹤壁市', '新乡市', '焦作市', '济源市', '濮阳市', '许昌市', '漯河市', '三门峡市', '南阳市', '商丘市', '信阳市', '周口市', '驻马店市'];
cityArr[6] = ['云南省','昆明市',' 曲靖市','玉溪市','保山市','昭通市','丽江市','思茅市','临沧市','楚雄彝族自治州','红河哈尼族彝族自治州','文山壮族苗族自治州','西双版纳傣族自治州','大理白族自治州','德宏傣族景颇族自治州','怒江傈僳族自治州','迪庆藏族自治州'];
cityArr[7] = ['辽宁省','沈阳市' ,'大连市' ,'鞍山市' ,'抚顺市' ,'本溪市' ,'丹东市' ,'锦州市' ,'营口市' ,'阜新市' ,'辽阳市' ,'盘锦市' ,'铁岭市' ,'朝阳市' ,'葫芦岛市'];
cityArr[8] = ['黑龙江省','哈尔滨市','齐齐哈尔市','鸡西市','鹤岗市','双鸭山市', '大庆市', '伊春市', '佳木斯市', '七台河市', '牡丹江市', '黑河市', '绥化市', '大兴安岭地区'];
cityArr[9] = ['湖南省','长沙市', '株洲市','湘潭市', '衡阳市', '邵阳市', '岳阳市', '常德市', '张家界市', '益阳市', '郴州市', '永州市', '怀化市', '娄底市', '湘西土家族苗族自治州'];
cityArr[10] = ['安徽省','合肥市', '芜湖市', '蚌埠市', '淮南市', '马鞍山市', '淮北市', '铜陵市', '安庆市', '黄山市', '滁州市','阜阳市','宿州市', '巢湖市', '六安市', '亳州市', '池州', '宣城市'];
cityArr[11] = ['山东省','济南市','青岛市','淄博市','枣庄市','东营市','烟台市','潍坊市','济宁市','泰安市','威海市','日照市','莱芜市','临沂市','德州市','聊城市','滨州市','菏泽市'];
cityArr[12] = ['新疆维吾尔自治区','乌鲁木齐市', '克拉玛依市', '吐鲁番地区', '哈密地区', '昌吉回族自治州 ', '博尔塔拉蒙古自治州 ', '巴音郭楞蒙古自治州 ', '阿克苏地区', '克孜勒苏柯尔克孜自治州 ', '喀什地区', '和田地区', '伊犁哈萨克自治州', '塔城地区', '阿勒泰地区', '石河子市', '阿拉尔市', '图木舒克市', '五家渠市' ];
cityArr[13] = ['江苏省','南京市', '无锡市', '徐州市', '常州市', '苏州市', '南通市', '连云港市', '淮安市', '盐城市', '扬州市', '镇江市', '泰州市', '宿迁市' ];
cityArr[14] = ['浙江省','杭州市', '宁波市', '温州市', '嘉兴市', '湖州市', '绍兴市', '金华市', '衢州市', '舟山市', '台州市', '丽水市'];
cityArr[15] = ['江西省','南昌市','景德镇市','萍乡市','九江市','新余市','鹰潭市','赣州市','吉安市','宜春市','抚州市','上饶市'];
cityArr[16] = ['湖北省','武汉市','黄石市','十堰市', '宜昌市', '襄樊市', '鄂州市', '荆门市', '孝感市', '荆州市', '黄冈市', '咸宁市', '随州市', '恩施土家族苗族自治州','仙桃市', '潜江市', '天门市', '神农架林区'];
cityArr[17] = ['广西壮族','南宁市','柳州市','桂林市','梧州市','北海市','防城港市','钦州市','贵港市','玉林市','百色市','贺州市','河池市','来宾市','崇左市'];
cityArr[18] = ['甘肃省','兰州市','嘉峪关市', '金昌市', '白银市', '天水市', '武威市', '张掖市', '平凉市', '酒泉市', '庆阳市', '定西市', '陇南市', '临夏回族自治州', '甘南藏族自治州'];
cityArr[19] = ['山西省','太原市','大同市', '阳泉市', '长治市', '晋城市', '朔州市', '晋中市', '运城市', '忻州市', '临汾市', '吕梁市' ];
cityArr[20] = ['内蒙古自治区','呼和浩特市', '包头市', '乌海市', '赤峰市', '通辽市', '鄂尔多斯市', '呼伦贝尔市', '巴彦淖尔市', '乌兰察布市', '兴安盟', '锡林郭勒盟', '阿拉善盟' ];
cityArr[21] = ['陕西省','西安市','铜川市','宝鸡市', '咸阳市', '渭南市', '延安市', '汉中市', '榆林市', '安康市', '商洛市' ];
cityArr[22] = ['吉林省','长春市', '吉林市', '四平市', '辽源市', '通化市', '白山市', '松原市', '白城市', '延边朝鲜族自治州'];
cityArr[23] = ['福建省','福州市', '厦门市', '莆田市', '三明市', '泉州市', '漳州市', '南平市', '龙岩市', '宁德市' ];
cityArr[24] = ['贵州省','贵阳市','六盘水市', '遵义市', '安顺市', '铜仁地区', '黔西南布依族苗族自治州', '毕节地区', '黔东南苗族侗族自治州', '黔南布依族苗族自治州'];
cityArr[25] = ['广东省','广州市','韶关市','深圳市','珠海市','汕头市','佛山市','江门市','湛江市','茂名市','肇庆市','惠州市','梅州市','汕尾市','河源市','阳江市','清远市','东莞市','中山市','潮州市','揭阳市','云浮市'];
cityArr[26] = ['青海省','西宁市' ,'海东地区', '海北藏族自治州', '黄南藏族自治州', '海南藏族自治州', '果洛藏族自治州', '玉树藏族自治州', '海西蒙古族藏族自治州'];
cityArr[27] = ['西藏','拉萨市','昌都地区', '山南地区', '日喀则地市', '那曲地区', '阿里地区', '林芝地区' ];
cityArr[28] = ['四川省','成都市','自贡市', '攀枝花市', '泸州市', '德阳市', '绵阳市', '广元市', '遂宁市', '内江市', '乐山市', '南充市', '眉山市', '宜宾市', '广安市', '达州市', '雅安市', '巴中市', '资阳市', '阿坝藏族羌族自治州', '甘孜藏族自治州', '凉山彝族自治州'];
cityArr[29] = ['宁夏回族','银川市','石嘴山市','吴忠市','固原市','中卫市'];
cityArr[30] = ['海南省','海口市','三亚市','五指山市', '琼海市', '儋州市', '文昌市', '万宁市', '东方市', '定安县', '屯昌县', '澄迈县', '临高县', '白沙黎族自治县', '昌江黎族自治县', '乐东黎族自治县', '陵水黎族自治县', '保亭黎族苗族自治县', '琼中黎族苗族自治县' ];
cityArr[31] = ['台湾省','台北市', '高雄市', '基隆市', '台中市', '台南市', '新竹市', '嘉义市'];
cityArr[32] = ['香港特别行政区','中西区', '湾仔区', '东区', '南区', '油尖旺区', '深水埗区', '九龙城区', '黄大仙区', '观塘区', '荃湾区', '葵青区', '沙田区', '西贡区', '大埔区', '北区', '元朗区', '屯门区', '离岛区' ];
cityArr[33] = ['澳门特别行政区','澳门'];
//生成省份
for(var key in provinceArr) {
var provinceOption = document.createElement('option');//获取 省/城市 的option
provinceOption.value = provinceOption.text = provinceArr[key];
//province 省/城市
province.options.add(provinceOption);//把provinceOption添加到province
}
//生成市县、区市'
//@current为当前选择的select节点，即父类节点
//@child为子类点
//@childArr为子节点数组
function showChild(current, child, childArr) {
var currentValue = current.value;
var count = childArr.length;
//每次切换市'把城市的子option长度设置市',即清除城市的选择,DOM对象select元素是长度是子option的个市'
child.length = 1;//@child为子类点
for(var i = 0; i < count; i++) {
//判断所选的值即父类，与当前节点第一个数组元素是否相市'
if(currentValue == childArr[i][0]) {//@childArr为子节点数组
//不取第一个数组元市'因为第一个是父类，所以j市'开始，而不市'
for(var j = 1; j < childArr[i].length; j++) {
var childOption = document.createElement('option');
//ie不支持option对象的value,所以加childOption.text
childOption.value = childOption.text = childArr[i][j];
child.options.add(childOption);
}
}
}
}
//省份改变市'
province.onchange = function() {
showChild(province, city, cityArr);
}
})
</script>
</body>
</html>
//5.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>蔚蓝网购物车页面</title>
<link href="css/global.css" rel="stylesheet"/>
<link href="css/layout.css" rel="stylesheet"/>
<link href="css/template.css" rel="stylesheet"/>
</head>
<body>
<header id="header">
<div class="header_top">
<div class="header_top_left">您好！欢迎光临蔚蓝网 [<a href="login.html" target="_parent">登录</a> | <a href="register.html"
target="_parent">免费注册</a>]
</div>
<div class="header_top_right">
<ul>
<li><a href="#" target="_self">客户服务</a></li>
<li>|</li>
<li id="menu"><a href="#" target="_self">新手入门</a> <img src="images/arrow_down.gif" alt="arrow"/>
<div id="dd_menu_top_down">
<a href="#" target="_self">购物保障</a><br/>
<a href="#" target="_self">购物流程</a><br/>
<a href="#" target="_self">会员介绍</a><br/>
<a href="#" target="_self">常见问题</a><br/>
</div>
</li>
<li>|</li>
<li><a href="#" target="_self">礼品卡</a></li>
<li>|</li>
<li><a href="#" target="_self">我的订单</a></li>
<li>|</li>
<li><a href="#" target="_self">我的账户</a></li>
<li>|</li>
<li><a href="shopping.html" target="_parent">购物车</a></li>
<li><img src="images/header_shop.gif" alt="shopping"/></li>
</ul>
</div>
</div>
</header>
<div class="header_middle">
<div class="logo"><img src="images/logo.png" alt="logo"/></div>
<div class="search"><input type="text" placeholder="请输入搜索关键字"><input type="button"></div>
</div>
<nav id="nav">
<ul>
<li><a href="#"> 全部商品分类</a></li>
<li><a href="#"> 首页</a></li>
<li><a href="#"> 图书</a></li>
<li><a href="#"> 特价</a></li>
<li><a href="#"> 团购</a></li>
</ul>
</nav>
<!--中间部分开始-->
<div id="main">
<div> <img src="images/shopping_myshopping.gif" alt="shopping"/> <a href="#">全场免运费活动中</a></div>
<!--为您推荐商品开始-->
<div class="shopping_commend">
<div class="shopping_commend_left">根据您挑选的商品，蔚蓝为您推荐</div>
<div class="shopping_commend_right"><img src="images/shopping_arrow_up.gif" alt="shopping"
id="shopping_commend_arrow"/></div>
</div>
<div id="shopping_commend_sort">
<div class="shopping_commend_sort_left">
<ul>
<li class="shopping_commend_list_1">·<a href="#" class="blue">JavaScript DOM编程艺术</a></li>
<li class="shopping_commend_list_2">￥39.00</li>
<li class="shopping_commend_list_3">￥29.30</li>
<li class="shopping_commend_list_4"><a href="#" class="shopping_yellow">购买</a></li>
</ul>
<ul>
<li class="shopping_commend_list_1">·<a href="#" class="blue">解禁（蔚蓝网独家首发）</a></li>
<li class="shopping_commend_list_2">￥28.00</li>
<li class="shopping_commend_list_3">￥19.40</li>
<li class="shopping_commend_list_4"><a href="#" class="shopping_yellow">购买</a></li>
</ul>
<ul>
<li class="shopping_commend_list_1">·<a href="#" class="blue">地王之王（金融危机下房地产行...</a></li>
<li class="shopping_commend_list_2">￥32.80</li>
<li class="shopping_commend_list_3">￥25.10</li>
<li class="shopping_commend_list_4"><a href="#" class="shopping_yellow">购买</a></li>
</ul>
<ul>
<li class="shopping_commend_list_1">·<a href="#" class="blue">逃庄</a></li>
<li class="shopping_commend_list_2">￥36.00</li>
<li class="shopping_commend_list_3">￥27.70</li>
<li class="shopping_commend_list_4"><a href="#" class="shopping_yellow">购买</a></li>
</ul>
</div>
<div class="shopping_commend_sort_mid"></div>
<div class="shopping_commend_sort_left">
<ul>
<li class="shopping_commend_list_1">·<a href="#" class="blue">深入浅出MySQL数据库开发、优...</a></li>
<li class="shopping_commend_list_2">￥59.00</li>
<li class="shopping_commend_list_3">￥47.20</li>
<li class="shopping_commend_list_4"><a href="#" class="shopping_yellow">购买</a></li>
</ul>
<ul>
<li class="shopping_commend_list_1">·<a href="#" class="blue">大玩家（马未都、王刚推荐!央...</a></li>
<li class="shopping_commend_list_2">￥34.80</li>
<li class="shopping_commend_list_3">￥20.60</li>
<li class="shopping_commend_list_4"><a href="#" class="shopping_yellow">购买</a></li>
</ul>
<ul>
<li class="shopping_commend_list_1">·<a href="#" class="blue">都市风水师--官场风水小说：一...</a></li>
<li class="shopping_commend_list_2">￥39.80</li>
<li class="shopping_commend_list_3">￥30.50</li>
<li class="shopping_commend_list_4"><a href="#" class="shopping_yellow">购买</a></li>
</ul>
<ul>
<li class="shopping_commend_list_1">·<a href="#" class="blue">国戏（以麻将术语解读宦海沉浮...</a></li>
<li class="shopping_commend_list_2">￥25.00</li>
<li class="shopping_commend_list_3">￥17.30</li>
<li class="shopping_commend_list_4"><a href="#" class="shopping_yellow">购买</a></li>
</ul>
</div>
</div>
<div class="shopping_list_top">您已选购以下商品</div>
<div class="shopping_list_border">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="shopping_list_title">
<td class="shopping_list_title_1">商品名</td>
<td class="shopping_list_title_2">单品积分</td>
<td class="shopping_list_title_3">市场价</td>
<td class="shopping_list_title_4">蔚蓝价</td>
<td class="shopping_list_title_5">数量</td>
<td class="shopping_list_title_6">删除</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="myTableProduct">
<tr class="shopping_product_list" id="shoppingProduct_01">
<td class="shopping_product_list_1"><a href="#" class="blue">私募（首部披露资本博弈秘密的金融...</a></td>
<td class="shopping_product_list_2"><label>189</label></td>
<!-积分->
<td class="shopping_product_list_3">￥<label>32.00</label></td>
<!-市场价->
<td class="shopping_product_list_4">￥<label>18.90 </label>(59折)</td>
<!-蔚蓝价->
<td class="shopping_product_list_5"><input type="text" value="1"/></td>
<td class="shopping_product_list_6"><a href="javascript:void(0)" class="blue">删除</a></td>
</tr>
<tr class="shopping_product_list" id="shoppingProduct_02">
<td class="shopping_product_list_1"><a href="#" class="blue"> 小团圆（张爱玲最神秘小说遗稿）</a></td>
<td class="shopping_product_list_2"><label>173</label></td>
<td class="shopping_product_list_3">￥<label>28.00</label></td>
<td class="shopping_product_list_4">￥<label>17.30</label>(62折)</td>
<td class="shopping_product_list_5"><input type="text" value="1"/></td>
<td class="shopping_product_list_6"><a href="javascript:void(0)" class="blue">删除</a></td>
</tr>
<tr class="shopping_product_list" id="shoppingProduct_03">
<td class="shopping_product_list_1"><a href="#" class="blue">不抱怨的世界(畅销全球80国的世界...</a></td>
<td class="shopping_product_list_2"><label>154</label></td>
<td class="shopping_product_list_3">￥<label>24.80</label></td>
<td class="shopping_product_list_4">￥<label>15.40</label> (62折)</td>
<td class="shopping_product_list_5"><input type="text" value="2"/></td>
<td class="shopping_product_list_6"><a href="javascript:void(0)" class="blue">删除</a></td>
</tr>
<tr class="shopping_product_list" id="shoppingProduct_04">
<td class="shopping_product_list_1"><a href="#" class="blue">福玛特双桶洗衣机XPB20-07S</a></td>
<td class="shopping_product_list_2"><label>358</label></td>
<td class="shopping_product_list_3">￥<label>458.00</label></td>
<td class="shopping_product_list_4">￥<label>358.00</label> (78折)</td>
<td class="shopping_product_list_5"><input type="text" value="1"/></td>
<td class="shopping_product_list_6"><a href="javascript:void(0)" class="blue">删除</a></td>
</tr>
<tr class="shopping_product_list" id="shoppingProduct_05">
<td class="shopping_product_list_1"><a href="#" class="blue">PHP和MySQL Web开发 （原书第4版）</a></td>
<td class="shopping_product_list_2"><label>712</label></td>
<td class="shopping_product_list_3">￥<label>95.00</label></td>
<td class="shopping_product_list_4">￥<label>71.20</label> (75折)</td>
<td class="shopping_product_list_5"><input type="text" value="1"/></td>
<td class="shopping_product_list_6"><a href="javascript:void(0)" class="blue">删除</a></td>
</tr>
<tr class="shopping_product_list" id="shoppingProduct_06">
<td class="shopping_product_list_1"><a href="#" class="blue">法布尔昆虫记</a>（再买￥68.30即可参加“满199元减10元现金”活动）
</td>
<td class="shopping_product_list_2"><label>10</label></td>
<td class="shopping_product_list_3">￥<label>198.00</label></td>
<td class="shopping_product_list_4">￥<label>130.70</label> (66折)</td>
<td class="shopping_product_list_5"><input type="text" value="1"/></td>
<td class="shopping_product_list_6"><a href="javascript:void(0)" class="blue">删除</a></td>
</tr>
</table>
<div class="shopping_list_end">
<div><a id="removeAllProduct" href="javascript:void(0);">清空购物车</a></div>
<ul>
<li class="shopping_list_end_1"><input name="" type="image" src="images/shopping_balance.gif"/></li>
<li class="shopping_list_end_2"><label id="product_total"></label></li>
<li class="shopping_list_end_3">商品金额总计:￥<span></span></li>
<li class="shopping_list_end_4">您共节省金额：￥<label class="shopping_list_end_yellow"
id="product_save"></label><br/>
可获商品积分：<label class="shopping_list_end_yellow" id="product_integral"></label>
</li>
</ul>
</div>
</div>
</div>
<!--网站版权部分开始-->
<footer id="footer">
<div class="footer_top"><a href="#" target="_parent" class="footer_dull_red">正版保障</a> | <a href="#" target="_parent"
class="footer_dull_red">满额免运</a>
| <a href="#" target="_parent" class="footer_dull_red">货到付款</a> | <a href="#" target="_parent"
class="footer_dull_red">品种最全</a> | <a
href="#" target="_parent" class="footer_dull_red">免费退换</a></div>
<div class="footer_end">Copyright (C) 蔚蓝网 2006-2016, All Rights Reserved <img src="images/validate.gif" alt="版权"
style="vertical-align:middle;"/>
京ICP证100488号 出版物经营许可证 京批100160号
</div>
</footer>
<script src="js/jquery-1.12.4.js"></script>
<script>
//点击图片的显示隐藏
$(document).ready(function () {
$("#shopping_commend_arrow").click(function () {
$("#shopping_commend_arrow").attr("src", "images/shopping_arrow_down.gif");
$("#shopping_commend_sort").toggle();
});
$(".blue").click(function () {
var flag = confirm("确定删除此商品吗？")
if (flag == true) {
alert("删除成功");
$(this).parent().parent().remove();
Count();
} else {
alert("您已经取消删除成功");
}
});
//清空购物车 得的背景图片
var x = true;
$("#removeAllProduct").click(function () {
$(".shopping_product_list").remove();
var $img = ("<img src='images/emptyShopping.jpg'>" + "<span>你还没有挑选商品.去挑选看看>>></span>");
if (x) {
$("#myTableProduct").append($img);//一定要添加 不能用替换
x = false;
}
});
Count();
function Count() {
var $sum = $("#myTableProduct tr");
var total = 0;//总金额
var score = 0;//总积分
var jiesheng = 0;//总节省
$sum.each(function () {
//找数量 find() 方法获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选。
var count = parseInt($(this).children(".shopping_product_list_5").find("input").val());
//找市场价格
var price = parseFloat($(this).children(".shopping_product_list_3").find("label").html());
//找折扣价
var zkPrice = parseFloat($(this).children(".shopping_product_list_4").find("label").html());
//找单品积分
var InterScore = parseInt($(this).children(".shopping_product_list_2").find("label").html());
//总金额 = 数量*市场价
total += count * price;
//节省金额 = 数量*折扣价
jiesheng += count * zkPrice;
//总积分 = 数量 * 单积分
score += count * InterScore;
});
$("#product_integral").html(score); //总积分
$(".shopping_list_end_3 span").html(jiesheng.toFixed(2)); //市场总金额
$(" #product_save").html((total - jiesheng).toFixed(2)); //节省总金额
}
//鼠标的获取事件
$("input").focus(function () {
Count();
}).blur(function () {//离开鼠标事件
Count();
})
});
</script>
<!--<script src="js/shopping.js"></script>-->
<!--<script src="js/header.js"></script>-->
</body>
</html>
6.css 1.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;}
2.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 -20px;
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:first-of-type dl{display: block;}
3.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;
}
.book li{
cursor: pointer;
}
//以上是我个人写的 写的不好欢迎大家来吐槽
1049
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
