<!DOCTYPE html>
<html>
<head>
<title>index.html</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/jquery-migrate-1.2.0.js"></script>
<link rel="stylesheet" href="js/global.css" type="text/css"></link>
<link rel="stylesheet" href="js/layout.css" type="text/css"></link>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
$(function() {
// window.open('open.html');
//随滚动条滚动的可关闭广告窗口
$(window).scroll(function() {
var st = $(this).scrollTop() + 50;
$("#right").css("top", st);
});
$("#right").find("a").click(function() {
$("#right").hide();
});
//01.当鼠标移入页码框的时候触发的事件
$("#scroll_number li").mouseover(
function() {
var index = 0; //页码框的索引
var stop = false;
//scroll_number是承载页码框的容器
$("#scroll_number li").eq(index).addClass(
"scroll_number_over").siblings().removeClass(
"scroll_number_over");
$("#scroll_number li").mouseover(
function() {
stop = true;
//scroll_img是承载图片的容器
$(this).addClass("scroll_number_over")
.siblings().removeClass(
"scroll_number_over");
index = $(this).index();
$("#scroll_img li").eq(index).show().siblings()
.hide();
}).mouseout(function() {
$(this).removeClass("scroll_number_over");
});
//通过定时器每隔3秒钟自动切到下一张图片
setInterval(function() {
if (stop) {
return;
}
index++; //让索引加1
if (index >= $("#scroll_img li").length) {
index = 0;
}
$("#scroll_number li").eq(index).addClass(
"scroll_number_over").siblings().removeClass(
"scroll_number_over");
$("#scroll_img li").eq(index).show().siblings().hide();
}, 3000);
});
//----------------------------------------------------
$(".book_new").on(
"mouseover",
".book_type",
function() {
//内容鼠标经过效果
$("#bookTab").children(".book_class").find("dd").mouseover(
function() {
$(this).css("border", "2px solid #F96");
}).mouseout(function() {
$(this).css("border", "2px solid #fff");
});
var index = $(this).index() - 1;
// 点击添加样式利用siblings清除其他兄弟节点样式
$(this).addClass("book_type_out").siblings().removeClass(
"book_type_out");
// 同理显示与隐藏
$(this).parents("#bookTab").find(".book_class dl")
.eq(index).show().siblings().hide();
});
//---------------------------------------------------------
//书讯快递循环垂直向上滚动
function movedome() {
var marginTop = 0;
var stop = false;
var interval = setInterval(function() {
if (stop)
return;
$("#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);
$("#express").mouseover(function() {
stop = true;
}).mouseout(function() {
stop = false;
});
}
movedome();
});
</script>
</head>
<body>
<!--随滚动条滚动可关闭广告-->
<div id="right" class="right">
<div class="dd_close" id="dd_close"><a href="javascript:void(0);">关闭</a></div>
<img src="images/dd_scroll.jpg" id="right1" />
</div>
<!--头部iframe引入-->
<div id="header">
<iframe src="header.html" height="155px" width="960px" frameborder="0"></iframe>
</div>
<!--网站中间内容开始-->
<div id="main">
<div class="dd_index_top_adver"><img src="images/dd_index_top_adver.jpg" alt="通栏广告图片" /></div>
<!--左侧菜单开始-->
<div id="catList">
<!--推荐分类-->
<div class="book_sort">
<div class="book_sort_bg">推荐分类</div>
<div class="book_sort_bottom" style="border-bottom:0px;">外语 | 中小学教辅 |</div>
</div>
<!--图书商品分类开始-->
<div class="book_sort">
<div class="book_sort_bg"><img src="images/dd_book_cate_icon.gif" alt="图书" /> 图书商品分类</div>
<div class="book_cate">[小说]</div>
<div class="book_sort_bottom">悬疑 | 言情 | 职场 | 财经</div>
<div class="book_cate">[文艺]</div>
<div class="book_sort_bottom">文学 | 传记 | 艺术 | 摄影</div>
<div class="book_cate">[青春]</div>
<div class="book_sort_bottom">青春文学 | 动漫 | 幽默</div>
<div class="book_cate">[励志/成功]</div>
<div class="book_sort_bottom">修养 | 成功 | 职场 | 沟通</div>
<div class="book_cate">[少儿]</div>
<div class="book_sort_bottom">0-2 | 3-6 | 7-10 | 11-14<br />文学 | 科普 | 图画书</div>
<div class="book_cate">[生活]</div>
<div class="book_sort_bottom">保健 | 家教 | 美丽装扮 | 育儿 | 美食 | 旅游 | 收藏 | 生活 | 体育 | 地图 | 个人理财</div>
<div class="book_cate">[个人社科]</div>
<div class="book_sort_bottom">文化 | 历史 | 哲学/宗教 | 古籍 | 政治/历史 | 法律 | 经济 | 社会科学 | 心理学</div>
<div class="book_cate">[管理]</div>
<div class="book_sort_bottom">管理 | 金融 | 营销 | 会计</div>
<div class="book_cate">[科技]</div>
<div class="book_sort_bottom">科普 | 建筑 | 医学 | 计算机 | 农林 | 自然科学 | 工业 | 通信</div>
<div class="book_cate">[教育]</div>
<div class="book_sort_bottom">教材 | 中小学教辅 | 外语</div>
<div class="book_cate">[工具书]</div>
<div class="book_cate">[图外原版书]</div>
<div class="book_cate">[期刊]</div>
</div>
<!--图书商品分类结束-->
</div>
<!--左侧菜单结束-->
<!--中间部分开始-->
<div id="content">
<!--轮换显示的横幅广告图片-->
<div class="scroll_top"></div>
<div class="scroll_mid">
<ul id="scroll_img">
<li><img src="images/dd_scroll_1.jpg"/></li>
<li><img src="images/dd_scroll_2.jpg"/></li>
<li><img src="images/dd_scroll_3.jpg"/></li>
<li><img src="images/dd_scroll_4.jpg"/></li>
<li><img src="images/dd_scroll_5.jpg"/></li>
<li><img src="images/dd_scroll_6.jpg"/></li>
</ul>
<ul id="scroll_number">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
<div class="scroll_end"></div>
<!--最新上架开始-->
<div id="bookTab" class="book_sort">
<div class="book_new">
<div class="book_left">最新上架</div>
<div class="book_type book_type_out" id="history">历史</div>
<div class="book_type" id="family">家教</div>
<div class="book_type" id="culture">文化</div>
<div class="book_type" id="novel">小说</div>
<div class="book_right"><a href="#">更多>></a></div>
</div>
<div class="book_class" style="height:250px;">
<!--历史-->
<dl id="book_history">
<dt><img src="images/dd_history_1.jpg" alt="history"/></dt>
<dd>
<font class="book_title">《中国时代》（上）</font><br />
作者：师永刚，邹明 主编 <br />
出版社：作家出版社 <br />
<font class="book_publish">出版时间：2009年10月</font><br />
定价：￥39.00<br />
当当价：￥27.00
</dd>
<dt><img src="images/dd_history_2.jpg" alt="history"/></dt>
<dd>
<font class="book_title">中国历史的屈辱</font><br />
作者：王重旭 著 <br />
出版社：华夏出版社 <br />
<font class="book_publish">出版时间：2009年11月</font><br />
定价：￥26.00<br />
当当价：￥18.20
</dd>
<dt><img src="images/dd_history_3.jpg" alt="history"/></dt>
<dd>
<font class="book_title">《中国时代》（下）</font><br />
作者：师永刚，邹明 主编 <br />
出版社：作家出版社 <br />
<font class="book_publish"> 出版时间：2009年10月</font><br />
定价：￥38.00<br />
当当价：￥26.30
</dd>
<dt><img src="images/dd_history_4.jpg" alt="history"/></dt>
<dd>
<font class="book_title">大家国学十六讲</font><br />
作者：张荫麟，吕思勉 著 <br />
出版社：中国友谊出版公司 <br />
<font class="book_publish">出版时间：2009年10月</font><br />
定价：￥19.80<br />
当当价：￥13.70
</dd>
</dl>
<!--家教-->
<dl id="book_family" class="book_none">
<dt><img src="images/dd_family_1.jpg" alt="history"/></dt>
<dd>
<font class="book_title">家教</font><br />
作者：兰海 著 <br />
出版社：中国妇女出版社 <br />
<font class="book_publish">出版时间：2009年10月</font><br />
定价：￥28.80<br />
当当价：￥17.90
</dd>
<dt><img src="images/dd_family_2.jpg" alt="history"/></dt>
<dd>
<font class="book_title">择业要趁早</font><br />
作者：（美）列文<br />
出版社：海天出版社 <br />
<font class="book_publish">出版时间：2009年10月</font><br />
定价：￥28.00<br />
当当价：￥19.30
</dd>
<dt><img src="images/dd_family_3.jpg" alt="history"/></dt>
<dd>
<font class="book_title">爷爷奶奶的“孙子兵法”</font><br />
作者：伏建全 编著 <br />
出版社：地震出版社 <br />
<font class="book_publish"> 出版时间：2009年8月</font><br />
定价：￥28.00<br />
当当价：￥17.40
</dd>
<dt><img src="images/dd_family_4.jpg" alt="history"/></dt>
<dd>
<font class="book_title">1分钟读懂孩子心理</font><br />
作者：海韵 著 <br />
出版社：朝华出版社 <br />
<font class="book_publish">出版时间：2009年10月</font><br />
定价：￥28.00<br />
当当价：￥17.40
</dd>
</dl>
<!--文化-->
<dl id="book_culture" class="book_none">
<dt><img src="images/dd_culture_1.jpg" alt="history"/></dt>
<dd>
<font class="book_title">文化</font><br />
作者：兰海 著 <br />
出版社：中国妇女出版社 <br />
<font class="book_publish">出版时间：2009年10月</font><br />
定价：￥28.80<br />
当当价：￥17.90
</dd>
<dt><img src="images/dd_culture_2.jpg" alt="history"/></dt>
<dd>
<font class="book_title">择业要趁早</font><br />
作者：（美）列文 <br />
出版社：海天出版社 <br />
<font class="book_publish">出版时间：2009年10月</font><br />
定价：￥28.00<br />
当当价：￥19.30
</dd>
<dt><img src="images/dd_culture_3.jpg" alt="history"/></dt>
<dd>
<font class="book_title">爷爷奶奶的“孙子兵法”</font><br />
作者：伏建全 编著 <br />
出版社：地震出版社 <br />
<font class="book_publish"> 出版时间：2009年8月</font><br />
定价：￥28.00<br />
当当价：￥17.40
</dd>
<dt><img src="images/dd_culture_4.jpg" alt="history"/></dt>
<dd>
<font class="book_title">1分钟读懂孩子心理</font><br />
作者：海韵 著 <br />
出版社：朝华出版社 <br />
<font class="book_publish">出版时间：2009年10月</font><br />
定价：￥28.00<br />
当当价：￥17.40
</dd>
</dl>
<!--小说-->
<dl id="book_novel" class="book_none">
<dt><img src="images/dd_novel_1.jpg" alt="history"/></dt>
<dd>
<font class="book_title">小说</font><br />
作者：兰海 著 <br />
出版社：中国妇女出版社 <br />
<font class="book_publish">出版时间：2009年10月</font><br />
定价：￥28.80<br />
当当价：￥17.90
</dd>
<dt><img src="images/dd_novel_2.jpg" alt="history"/></dt>
<dd>
<font class="book_title">择业要趁早</font><br />
作者：（美）列文 <br />
出版社：海天出版社 <br />
<font class="book_publish">出版时间：2009年10月</font><br />
定价：￥28.00<br />
当当价：￥19.30
</dd>
<dt><img src="images/dd_novel_3.jpg" alt="history"/></dt>
<dd>
<font class="book_title">爷爷奶奶的“孙子兵法”</font><br />
作者：伏建全 编著 <br />
出版社：地震出版社 <br />
<font class="book_publish"> 出版时间：2009年8月</font><br />
定价：￥28.00<br />
当当价：￥17.40
</dd>
<dt><img src="images/dd_novel_4.jpg" alt="history"/></dt>
<dd>
<font class="book_title">1分钟读懂孩子心理</font><br />
作者：海韵 著 <br />
出版社：朝华出版社 <br />
<font class="book_publish">出版时间：2009年10月</font><br />
定价：￥28.00<br />
当当价：￥17.40
</dd>
</dl>
</div>
</div>
<!--重点关注-->
<div class="book_sort">
<div class="book_new">
<div class="book_left">重点关注</div>
</div>
<div class="book_class" style="height:380px;">
<dl id="book_focus">
<dt><img src="images/dd_focus_1.jpg" alt="focus"/></dt>
<dt><img src="images/dd_focus_2.jpg" alt="focus"/></dt>
<dt><img src="images/dd_focus_3.jpg" alt="focus"/></dt>
<dt><img src="images/dd_focus_4.jpg" alt="focus"/></dt>
<dd><a href="#" class="blue">郑玉巧育儿经·幼儿卷</a></dd>
<dd><a href="#" class="blue">蹦蹦和跳跳的故事(全10册)</a></dd>
<dd><a href="#" class="blue">人体自有大药(让每一个人都能变成...</a></dd>
<dd><a href="#" class="blue">特效穴位使用手册</a></dd>
<dd>定价：￥49.80<br />
当当价：￥32.00</dd>
<dd>定价：￥50.00<br />
当当价：￥33.00</dd>
<dd>定价：￥29.00<br />
当当价：￥19.40</dd>
<dd>定价：￥29.00<br />
当当价：￥19.40</dd>
<dt><img src="images/dd_focus_5.jpg" alt="focus"/></dt>
<dt><img src="images/dd_focus_6.jpg" alt="focus"/></dt>
<dt><img src="images/dd_focus_7.jpg" alt="focus"/></dt>
<dt><img src="images/dd_focus_8.jpg" alt="focus"/></dt>
<dd><a href="#" class="blue">《猫武士系列》（全6册）</a></dd>
<dd><a href="#" class="blue">求医不如求己养生救命大宝典</a></dd>
<dd><a href="#" class="blue">雅思词汇词根+联想记忆法</a></dd>
<dd><a href="#" class="blue">等待Nemo的日子</a></dd>
<dd>定价：￥120.00<br />
当当价：￥79.20</dd>
<dd>定价：￥198.00<br />
当当价：￥116.90</dd>
<dd>定价：￥28.00<br />
当当价：￥18.70</dd>
<dd>定价：￥26.00<br />
当当价：￥17.90</dd>
</dl>
</div>
</div>
</div>
<!--中间部分结束-->
<!--右侧部分开始-->
<div 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 class="book_express_avder"> <img src="images/dd_book_right_adver1.jpg" alt="adver" style="margin-bottom:5px;" /> <img src="images/dd_book_right_adver2.gif" alt="adver" /> </div>
</div>
<!--近7日畅销榜-->
<div class="book_sort">
<div class="book_seven_title">近7日畅销榜 <img src="images/dd_bang.gif" alt="bang" style="vertical-align:top;"/></div>
<div class="book_seven_border">
<div class="book_seven_top">
<ul id="book_seven_cate">
<li>动漫</li>
<li>小说</li>
<li>外语</li>
<li>旅游</li>
<li>励志</li>
</ul>
</div>
<div class="book_seven_content">
<div class="book_seven_content_left">
<dl id="book_seven_number">
<dt><img src="images/dd_book_no_01.gif" alt="book"/></dt>
<dt><img src="images/dd_book_no_02.gif" alt="book"/></dt>
<dt><img src="images/dd_book_no_03.gif" alt="book"/></dt>
<dd><img src="images/dd_book_no_04.gif" alt="book"/></dd>
<dd><img src="images/dd_book_no_05.gif" alt="book"/></dd>
<dd><img src="images/dd_book_no_06.gif" alt="book"/></dd>
<dd><img src="images/dd_book_no_07.gif" alt="book"/></dd>
<dd><img src="images/dd_book_no_08.gif" alt="book"/></dd>
</dl>
</div>
<div class="book_seven_content_right">
<!--励志开始-->
<div id="book_seven_hearten">
<dl>
<dt><img src="images/dd_seven_hearten_01.jpg" alt="hearten" /></dt>
<dd>
<a href="#" class="blue">不抱怨的世界</a><br />
作者：（美）鲍温<br />
出版社：陕西师范<br />
出版时间：2009年4月
</dd>
<dt><img src="images/dd_seven_hearten_02.jpg" alt="hearten" /></dt>
<dd>
<a href="#" class="blue">遇见未知的自己</a><br />
作者：张德芬 <br />
出版社：华夏出版<br />
出版时间：2008年1月
</dd>
<dt><img src="images/dd_seven_hearten_03.jpg" alt="hearten" /></dt>
<dd>
<a href="#" class="blue">活法</a><br />
作者：（日）稻盛<br />
出版社：东方出版<br />
出版时间：2005年3月
</dd>
</dl>
<ul>
<li><a href="#" class="blue">高效能人士的七个习惯</a></li>
<li><a href="#" class="blue">被迫强大</a></li>
<li><a href="#" class="blue">遇见心想事成的自己</a></li>
<li><a href="#" class="blue">世界上最伟大的推销员</a></li>
<li><a href="#" class="blue">我的成功可以复制</a></li>
</ul>
</div>
<!--励志结束-->
</div>
</div>
</div>
</div>
</div>
<!--右侧部分结束-->
</div>
<!--网站版权部分开始-->
<div 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>
<iframe src="footer.html" height="50px" width="900px" frameborder="0"></iframe>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>footer.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link href="css/global.css" rel="stylesheet" type="text/css" />
<link href="css/template.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="footer_end">Copyright (C) 当当网 2004-2009, All Rights Reserved <img src="images/validate.gif" alt="版权" style="vertical-align:middle;" /> 京ICP证041189号 音像制品经营许可证 京音网8号</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>header.html</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/jquery-migrate-1.2.0.js"></script>
<link rel="stylesheet" href="js/template.css" type="text/css"></link>
<link rel="stylesheet" href="js/global.css" type="text/css"></link>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
$(function(){
$("#menu a").mouseenter(function(){
$("#dd_menu_top_down").slideDown("slow");
});
$("#menu #dd_menu_top_down").mouseleave(function(){
$("#dd_menu_top_down").slideUp("slow");
});
});
</script>
</head>
<body>
<!--顶部开始-->
<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/dd_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/dd_header_shop.gif" alt="shopping"/></li>
</ul>
</div>
</div>
<!--导航开始-->
<div class="header_middle">
<div class="logo"><img src="images/dd_logo.gif" alt="logo"/></div>
<div class="menu_left">
<dl>
<dd class="menu_left_first"></dd>
</dl>
<ul id="menu_left_bold">
<li><a href="index.html" target="_parent" class="bold">首页</a></li>
<li>|</li>
<li><a href="product.html" target="_parent" class="bold">图书</a></li>
<li>|</li>
<li><a href="#" target="_self" class="bold">音乐</a></li>
<li>|</li>
<li><a href="#" target="_self" class="bold">影视</a></li>
<li>|</li>
<li><a href="#" target="_self" class="bold">运动</a></li>
<li>|</li>
<li><a href="#" target="_self" class="bold">服饰</a></li>
<li>|</li>
<li><a href="#" target="_self" class="bold">家居</a></li>
<li>|</li>
<li><a href="#" target="_self" class="bold">美妆</a></li>
<li>|</li>
<li><a href="#" target="_self" class="bold">母婴</a></li>
<li>|</li>
<li><a href="#" target="_self" class="bold">食品</a></li>
<li>|</li>
<li><a href="#" target="_self" class="bold">数码家电</a></li>
</ul>
<dl>
<dd class="menu_left_end"></dd>
</dl>
</div>
<div class="menu_right" id="menu_dull_red">
<ul>
<li class="menu_right_1"><a href="#" target="_self">商店街</a></li>
<li class="menu_right_2"><a href="#" target="_self">促销</a></li>
<li class="menu_right_3"><a href="#" target="_self">当当<img src="images/dd_header_top.png" alt="榜" /></a>
</li>
<li class="menu_right_2"><a href="#" target="_self">社区</a></li>
<li class="menu_right_3"><a href="#" target="_self">在线读书</a></li>
</ul>
</div>
<div class="menu">
<div class="menu_first"></div>
<div id="menu_white">
<a href="#" target="_self" class="menu_mid_white">小说</a>|
<a href="#" target="_self" class="menu_mid_white">青春</a>|
<a href="#" target="_self" class="menu_mid_white">历史</a>|
<a href="#" target="_self" class="menu_mid_white">保健</a>|
<a href="#" target="_self" class="menu_mid_white">少儿</a>|
<a href="#" target="_self" class="menu_mid_white">旅游</a>|
<a href="#" target="_self" class="menu_mid_white">期刊</a>|
<a href="#" target="_self" class="menu_mid_white">图书畅销榜</a>|
<a href="#" target="_self" class="menu_mid_white">新书热卖榜</a>|
<a href="#" target="_self" class="menu_mid_white">特价书</a>|
<a href="#" target="_self" class="menu_mid_white">图书促销</a>|
<a href="#" target="_self" class="menu_mid_white">所有图书分类</a>
</div>
<div class="menu_end"></div>
</div>
</div>
<!--搜索开始-->
<div class="header_search">
<div class="header_serach_left"></div>
<div class="header_serach_mid">
<ul id="header_serach_mid_menu">
<li><input id="header_serach" type="text" class="header_input_search" /></li>
<li><input type="image" class="header_secrch_btn" src="images/dd_header_search_btn.jpg" /></li>
<li><img src="images/dd_arrow_right.gif" alt="arrow"/> <a href="#" target="_self">高级搜索</a></li>
<li>|</li>
<li><img src="images/dd_header_search_top.jpg" alt="搜索风云榜"/></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="#" target="_self">注会</a></li>
<li>|</li>
<li><a href="#" target="_self">新概念英语</a></li>
<li>|</li>
<li><a href="#" target="_self">更多>></a></li>
</ul>
</div>
<div class="header_serach_right"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>login.html</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/jquery-migrate-1.2.0.js"></script>
<link rel="stylesheet" href="js/global.css" type="text/css"></link>
<link rel="stylesheet" href="js/layout.css" type="text/css"></link>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
$(function() {
$("#btn").click(function() {
var values = $("input").val();
if (values == "") {
alert('请输入Email地址或昵称');
}
});
$("#quick_register").mouseover(function(){
$(this).removeClass().addClass("login_register_over");
}).mouseout(function(){
$(this).removeClass().addClass("login_register_out");
}).click(function(){
window.location.href="register.html";
});
});
</script>
</head>
<body>
<div id="header">
<div class="login_header_left"><img src="images/logo.gif" alt="logo"/></div>
<div class="login_header_mid"><img src="images/login_header.gif" alt="header"/></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>
</div>
<div id="main">
<div class="login_main_left">
<div>
<img src="images/login_main_01.jpg" alt="中间图片"/>
<img src="images/login_main_02.jpg" alt="中间图片"/>
<img src="images/login_main_03.jpg" alt="中间图片"/>
</div>
<div class="login_main_end">
<dl class="login_green">
<dt>更多选择、更低价格</dt>
<dd>100万种商品包含图书、数码、美妆、运动健康等，价格低于地面店20%以上</dd>
</dl>
<div class="login_main_dotted"></div>
<dl class="login_green">
<dt>全场免运费、货到付款</dt>
<dd>免费送货上门、360个城市货到付款。另有网上支付、邮局汇款等多种支付方式</dd>
</dl>
<div class="login_main_dotted"></div>
<dl class="login_green">
<dt>真实、优质的商品评论</dt>
<dd>千万用户真实、优质的商品评论，给您多角度、全方位的购物参考</dd>
</dl>
</div>
</div>
<div class="login_main_mid">
<div class="login_content_top">请登录当当网</div>
<div class="login_content_line"></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_dotted"></div>
<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" src="register.html" class="login_register_out" value="" type="button"/>
</div>
</div>
</div>
<div class="login_main_right"><img src="images/login_main_04.jpg" alt="右侧图片"/></div>
</div>
<div id="footer">
<iframe src="footer.html" height="50px" width="900px" frameborder="0"></iframe>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>register.html</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/jquery-migrate-1.2.0.js"></script>
<link rel="stylesheet" href="js/global.css" type="text/css"></link>
<link rel="stylesheet" href="js/layout.css" type="text/css"></link>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
//检查邮箱
function validate(dom){
var id=$(dom).attr("id");
var v=$(dom).val();
var flag=true;
switch(id){
case "email":
var $emailId=$("#email_prompt");
var reg=/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
if(v==""){
$("#email").removeClass().addClass("register_prompt_error");
$emailId.html("Email是必填项");
flag=false;
}else if(reg.test(v)==false){
$("#email").removeClass().addClass("register_prompt_error");
$emailId.html("Email的格式，如master@aptech.com<br/>或master@aptech.com.cn");
flag=false;
}else{
$("#email").css("background-color","#ffffff");
$emailId.removeClass().addClass("register_prompt_ok").html("");
}
break;
case "nickName":
var $nameId=$("#nickName_prompt");
var reg=/^[A-Za-z0-9]{4,20}$/;
if(v==""){
$("#nickName").removeClass().addClass("register_prompt_error");
$nameId.html("昵称是必填项，请输入你的昵称");
flag=false;
}else if(reg.test(v)==false){
$("#nickName").removeClass().addClass("register_prompt_error");
$nameId.html("昵称必须使用大小写英文字母，数字，<br/>长度为4~20个字符");
flag=false;
}else{
$("#nickName").css("background-color","#ffffff");
$nameId.removeClass().addClass("register_prompt_ok").html("");
}
break;
case "pwd":
var $pwdId=$("#pwd_prompt");
var reg=/^[A-Za-z0-9]{6,20}$/;
if(v==""){
$("#pwd").removeClass().addClass("register_prompt_error");
$pwdId.html("密码是必填项，请设置您的密码");
flag=false;
}else if(reg.test(v)==false){
$("#pwd").removeClass().addClass("register_prompt_error");
$pwdId.html("密码必须使用大小写英文字母，数字，<br/>长度为6~20个字符");
flag=false;
}else{
$("#pwd").css("background-color","#ffffff");
$pwdId.removeClass().addClass("register_prompt_ok").html("");
}
break;
case "repwd":
var $repwdId=$("#repwd_prompt");
var reg=$("#pwd").val();
if(v==""){
$("#repwd").removeClass().addClass("register_prompt_error");
$repwdId.html("密码是必填项，请重新输入您的密码");
flag=false;
}else if(v!=reg){
$("#repwd").removeClass().addClass("register_prompt_error");
$repwdId.html("两词的密码不一致，请重新输入");
flag=false;
}else{
$("#repwd").css("background-color","#ffffff");
$repwdId.removeClass().addClass("register_prompt_ok").html("");
}
break;
};
};
$(function() {
//-------------------------------------=====
//省市级联
var cityList = new Array();
cityList['北京市'] = [ '朝阳区', '东城区', '西城区', '海淀区', '宣武区', '丰台区', '怀柔',
'延庆', '房山' ];
cityList['上海市'] = [ '宝山区', '长宁区', '丰贤区', '虹口区', '黄浦区', '青浦区', '南汇区',
'徐汇区', '卢湾区' ];
cityList['广州省'] = [ '广州市', '惠州市', '汕头市', '珠海市', '佛山市', '中山市', '东莞市' ];
cityList['深圳市'] = [ '福田区', '罗湖区', '盐田区', '宝安区', '龙岗区', '南山区', '深圳周边' ];
cityList['重庆市'] = [ '俞中区', '南岸区', '江北区', '沙坪坝区', '九龙坡区', '渝北区', '大渡口区',
'北碚区' ];
cityList['天津市'] = [ '和平区', '河西区', '南开区', '河北区', '河东区', '红桥区', '塘古区',
'开发区' ];
cityList['江苏省'] = [ '南京市', '苏州市', '无锡市' ];
cityList['浙江省'] = [ '杭州市', '宁波市', '温州市' ];
cityList['四川省'] = [ '四川省', '成都市' ];
cityList['海南省'] = [ '海口市' ];
cityList['福建省'] = [ '福州市', '厦门市', '泉州市', '漳州市' ];
cityList['山东省'] = [ '济南市', '青岛市', '烟台市' ];
cityList['江西省'] = [ '江西省', '南昌市' ];
cityList['广西省'] = [ '柳州市', '南宁市' ];
cityList['安徽省'] = [ '安徽省', '合肥市' ];
cityList['河北省'] = [ '邯郸市', '石家庄市' ];
cityList['河南省'] = [ '郑州市', '洛阳市' ];
cityList['湖北省'] = [ '武汉市', '宜昌市' ];
cityList['湖南省'] = [ '湖南省', '长沙市' ];
cityList['陕西省'] = [ '陕西省', '西安市' ];
cityList['山西省'] = [ '山西省', '太原市' ];
cityList['黑龙江省'] = [ '黑龙江省', '哈尔滨市' ];
cityList['辽宁省'] = [ '辽宁省', '辽阳市' ];
cityList['其他'] = [ '其他' ];
$("#province").append(function() {
var html = "";
for ( var i in cityList) {
html += "<option value="+i+">" + i + "</option>";
}
return $(html);
});
$("#province").change(function() {
var v = $(this).val();
var html = "";
if (v == "请选择省/城市") {
html = "<option>请选择城市/地区</option>";
$("#city").html(html);
return;
}
var citys = cityList[v];
$.each(citys, function(i, n) {
html += "<option value="+n+">" + n + "</option>";
});
$("#city").html(html);
});
//=============================================================================
//绑定Email地址的事件
$("#email").focus(function(){
$(this).removeClass().addClass("register_input_Focus");
$("#email_prompt").removeClass().addClass("register_prompt").html("Email的格式，如master@aptech.com<br/>或master@aptech.com.cn");
}).blur(function(){
$(this).removeClass().addClass("register_input_Blur");
validate($(this));
});
//绑定昵称的事件
$("#nickName").focus(function(){
$(this).removeClass().addClass("register_input_Focus");
$("#nickName_prompt").removeClass().addClass("register_prompt").html("昵称必须使用大小写英文字母，数字，<br/>长度为4~20个字符");
}).blur(function(){
$(this).removeClass().addClass("register_input_Blur");
validate($(this));
});
//绑定密码的事件
$("#pwd").focus(function(){
$(this).removeClass().addClass("register_input_Focus");
$("#pwd_prompt").removeClass().addClass("register_prompt").html("密码必须使用大小写英文字母，数字，<br/>长度为6~20个字符");
}).blur(function(){
$(this).removeClass().addClass("register_input_Blur");
validate($(this));
});
//绑定再输 密码的事件
$("#repwd").focus(function(){
$(this).removeClass().addClass("register_input_Focus");
$("#repwd_prompt").removeClass().addClass("register_prompt").html("密码必须同上一致");
}).blur(function(){
$(this).removeClass().addClass("register_input_Blur");
validate($(this));
});
});
</script>
</head>
<body>
<div id="header">
<div id="register_header">
<div class="register_header_left"><img src="images/logo.gif" 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>
</div>
<div id="main">
<div class="register_content">
<div class="register_top_bg"></div>
<div class="register_mid_bg">
<ul>
<li class="register_mid_left">填写注册信息</li>
<li class="register_mid_mid">2. 邮箱验证</li>
<li class="register_mid_right">3. 完成注册</li>
</ul>
</div>
<div class="register_top_bg_mid">
<div class="register_top_bg_two_left"></div>
<div class="register_top_bg_two_right"></div>
<div class="register_title_bg"><img src="images/register_pic_02.gif" alt="欢迎注册"/><br/>您所提供的资料不会做其他用途，敬请安心填写。</div>
</div>
<div class="register_dotted_bg"></div>
<div class="register_message">
<form action="" method="post" id="myform">
<dl class="register_row">
<dt>Email地址：</dt>
<dd><input id="email" type="text" class="register_input"/></dd>
<dd><div id="email_prompt"></div></dd>
</dl>
<dl class="register_row">
<dt>设置昵称：</dt>
<dd><input id="nickName" type="text" class="register_input"/></dd>
<dd><div id="nickName_prompt"></div></dd>
</dl>
<dl class="register_row">
<dt>设定密码：</dt>
<dd><input id="pwd" type="password" class="register_input"/></dd>
<dd><div id="pwd_prompt"></div></dd>
</dl>
<dl class="register_row">
<dt>再输入一次密码：</dt>
<dd><input id="repwd" type="password" class="register_input"/></dd>
<dd><div id="repwd_prompt"></div></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>
</div>
<!--网站版权部分开始-->
<div id="footer">
<iframe src="footer.html" height="50px" width="900px" frameborder="0"></iframe>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>product.html</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/jquery-migrate-1.2.0.js"></script>
<link rel="stylesheet" href="js/global.css" type="text/css"></link>
<link rel="stylesheet" href="js/layout.css" type="text/css"></link>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
$(function() {
// arrlist();
//左侧显示具体分类
//window.onload = function() {
// classs();
// };
function arrlist() {
var list = new Array("中国现代小说（1111901）...", "言情小说(3332233)......",
"中国历史（1234453）...", "中国古典名著（45678）...",
"中国历史文学（67890）.....", "校园小说", "穿越架空", "女生专属", "男生专利");
var html = [];
$.each(list, function() {
html
.push("<li>.<a href='#' class='blue'>" + this
+ "</a></li>");
});
$("#product_catList_class").html(html.join(""));
}
;
arrlist();
var arrayBookList = $("#product_storyList_content").html();
function getBigBookList() {
var $initContent = $("#product_storyList_content");
var $bookImg = $initContent.find(".product_storyList_content_left");
var contents = "";
$initContent
.find(".product_storyList_content_right")
.find("ul")
.each(
function(i, ele) {
var div = "";
var content = [
div,
"<div class='big_img_list'><ul><li class='bookImg'>"
+ $($bookImg[i]).html()
+ "</li>" ];
var $li = $(ele).children("li");
var $price = $($li[6]).find("span");
content
.push("<li><dl><dd class='footer_dull_red'>"
+ $($price[1]).text()
+ "</dd><dd class='product_content_delete'>"
+ $($price[2]).text()
+ "</dd><dd class='footer_dull_red'>"
+ $($price[0]).text()
+ "</dd></dl></li>");//价格
content.push("<li class='detail'>"
+ $($li[5]).html() + "</li>");//简介
content.push("<li class='detail'>"
+ $($li[2]).html() + "</li>");//作 者
content.push("<li class='detail'>"
+ $($li[1]).html() + "</li>");//顾客评分
content.push("<li class='detail'>"
+ $($li[3]).html() + "</li>");//出版社
content
.push("<li class='detail'>"
+ $($li[4]).html()
+ "</li></ul></div>");//出版时间
contents += content.join("");
});
return contents;
}
var bigBookList = getBigBookList();//获取大图形式List
//大图列表切换
$("#product_array").children("a").click(
function() {
if ($(this).is("[class='click']"))
return;//如果已经点击那么返回，用class来判断
$(this).siblings().removeClass("click");
$(this).addClass("click");
//用元素的name来判断
if ($(this).attr("name") == "array") {//列表
$("#product_storyList_content").empty().html(
arrayBookList);
} else {//大图
$("#product_storyList_content").empty().html(
bigBookList);
$("#product_storyList_content").children(
".big_img_list").find("ul").mouseover(
function() {
$(this).addClass("over");
$(this).parent().addClass("over");
}).mouseout(function() {
$(this).removeClass("over");
$(this).parent().removeClass("over");
});
}
});
});
</script>
</head>
<body>
<div id="header">
<iframe src="header.html" height="155px" width="960px" frameborder="0"></iframe>
</div>
<!--中间部分开始-->
<div id="main">
<div class="dd_index_top_adver">
<img src="images/dd_index_top_adver.jpg" alt="通栏广告图片" />
</div>
<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>
<!--右侧内容结束-->
</div>
<!--网站版权部分开始-->
<div 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>
<iframe src="footer.html" height="50px" width="900px" frameborder="0"></iframe>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>shopping.html</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/jquery-migrate-1.2.0.js"></script>
<link rel="stylesheet" href="js/global.css" type="text/css"></link>
<link rel="stylesheet" href="js/layout.css" type="text/css"></link>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
$(function() {
var values = $(".shopping_product_list_5 input").val();
//alert(values);
//------------------------
$("#shopping_commend_arrow").toggle(function() {
//隐藏
$("#shopping_commend_sort").fadeOut("1800");
$("#shopping_commend_arrow").attr({
src : "images/dd_arrow_down.gif"
});
}, function() {
//显示
$("#shopping_commend_sort").fadeIn("1800");
$("#shopping_commend_arrow").attr({
src : "images/dd_arrow_right.gif"
});
});
//---------------------------
//-----------------------删除+清空购物车
$(".blue").click(function() {
//删除单个商品
var flag = confirm('你确定要删除吗？？？');
if (flag == true) {
$(this).parent().parent().remove();
price();
} else {
alert('你取消了删除');
}
});
$("#removeAllProduct").click(
function() {
//清空购物车
$(this).parent().parent().prev(
"#myTableProduct").remove();
price();
});
//-------------------------------------------------------
//获取数量
//--------计算商品金额
function price() {
var $tr = $("#myTableProduct").find("tr[id]");
var integral = 0;//积分
var jies = 0;//节省
var prices = 0;
var shiji = 0;
$tr.each(function(i, dom) {
var num = $(dom).children(
".shopping_product_list_5").find("input")
.val();//商品数量
prices += num
* $(dom).children(
".shopping_product_list_3").find(
"label").text();//商品总原价
shiji += num
* $(dom).children(
".shopping_product_list_4").find(
"label").text(); //商品实际花销
jies = prices - shiji; //节省
integral += $(dom).children(
".shopping_product_list_2").text()
* num;//积分
});
//显示商品总计，积分以及节省的钱数
$("#product_total").text(shiji);//商品钱数
$("#product_integral").text(integral);//积分
$("#product_save").text(Math.floor(jies));//节省的钱数
}
price();
//---------------------商品的增加和减少 进而计算价格----------------------------
var inn = $("#myTableProduct").find("input");
inn.bind({
fouse : function() {
price();
},
blur : function() {
price();
}
});
});
</script>
</head>
<body>
<div id="header"><iframe src="header.html" height="155px" width="960px" frameborder="0"></iframe></div>
<!--中间部分开始-->
<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>
<!--网站版权部分开始-->
<div id="footer">
<iframe src="footer.html" height="50px" width="900px" frameborder="0"></iframe></div>
</body>
</html>
