<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>当当网</title>
<html>
<head>
<meta charset="utf-8">
<title>当当网</title>
<style>
#body{ width:990px; margin:0px auto; position:relative; }
div#flag{ position:absolute; top:250px; z-index:2;}
#dangdang{ width:960px; margin-left:20px;}
*{ padding:0px; margin:0px;}
#logo{ width:960px; overflow:hidden;}
#logo div#left img{ float:left;}
ul#right { float:right; background-color:#CFC; height:40px; position:relative; top:10px;}
ul#right li{ float:left; padding:10px}
ul,li{ list-style-type:none;}
ul#ulmenu{ float:right; background-color:#F63; width:960px;}
ul#ulmenu li{ float:left; padding:14px;}
ul#ulmenu li a{ color:white; font-weight:bolder; text-decoration:none;}
div#flagimg img{ margin-top:5px;}
#books{ border:#9CF solid 1px; overflow:hidden; padding-top:80px;
z-index:1}
#books div{ float:left;}
/*此处代码1和代码2改变先后顺序仍然有相同的结果*/
/*此处有三个图书信息，注意浮动技巧，通过设置合适的宽度信息，
将三个图书信息浮动在合适的位置*/
#books dt { width:110px; float:left; margin-left:15px;} /*1*/
#books dd { width:230px; float:left;}/*1*/
#books dt#left_one { width:250px; float:left; margin-left:2px;}/*2*/
#books dd#right_one { width:300px; float:left;}/*2*/
#books p span{ color:#603;}
div#tail{text-align:center; height:60px;}
div#tail img{ vertical-align:middle;}
p{ line-height:30px;}
</style>
#body{ width:990px; margin:0px auto; position:relative; }
div#flag{ position:absolute; top:250px; z-index:2;}
#dangdang{ width:960px; margin-left:20px;}
*{ padding:0px; margin:0px;}
#logo{ width:960px; overflow:hidden;}
#logo div#left img{ float:left;}
ul#right { float:right; background-color:#CFC; height:40px; position:relative; top:10px;}
ul#right li{ float:left; padding:10px}
ul,li{ list-style-type:none;}
ul#ulmenu{ float:right; background-color:#F63; width:960px;}
ul#ulmenu li{ float:left; padding:14px;}
ul#ulmenu li a{ color:white; font-weight:bolder; text-decoration:none;}
div#flagimg img{ margin-top:5px;}
#books{ border:#9CF solid 1px; overflow:hidden; padding-top:80px;
z-index:1}
#books div{ float:left;}
/*此处代码1和代码2改变先后顺序仍然有相同的结果*/
/*此处有三个图书信息，注意浮动技巧，通过设置合适的宽度信息，
将三个图书信息浮动在合适的位置*/
#books dt { width:110px; float:left; margin-left:15px;} /*1*/
#books dd { width:230px; float:left;}/*1*/
#books dt#left_one { width:250px; float:left; margin-left:2px;}/*2*/
#books dd#right_one { width:300px; float:left;}/*2*/
#books p span{ color:#603;}
div#tail{text-align:center; height:60px;}
div#tail img{ vertical-align:middle;}
p{ line-height:30px;}
</style>
</head>
<body>
<div id="body">
<!--当当网主页面开始-->
<div id="flag"><img src="image/bg_bang.gif"/></div>
<div id="dangdang">
<div id="body">
<!--当当网主页面开始-->
<div id="flag"><img src="image/bg_bang.gif"/></div>
<div id="dangdang">
<!--首行logo开始-->
<div id="logo">
<div id="left"><img src="image/logo.jpg"/></div>
<ul id="right">
<li>唯品会</li>
<li>当当优品</li>
<li>数字馆</li>
<li>都看阅器</li>
<li><img src="image/icon_count.png"/></li>
</ul>
</div>
<!--首行logo结束-->
<!--第二行菜单栏开始-->
<div id="menu">
<ul id="ulmenu">
<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>
<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>
<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>
<li><a href="#">电脑</a></li>
</ul>
</div>
<!--第二行菜单栏开始-->
<div id="logo">
<div id="left"><img src="image/logo.jpg"/></div>
<ul id="right">
<li>唯品会</li>
<li>当当优品</li>
<li>数字馆</li>
<li>都看阅器</li>
<li><img src="image/icon_count.png"/></li>
</ul>
</div>
<!--首行logo结束-->
<!--第二行菜单栏开始-->
<div id="menu">
<ul id="ulmenu">
<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>
<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>
<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>
<li><a href="#">电脑</a></li>
</ul>
</div>
<!--第二行菜单栏开始-->
<!--第三行图片标志开始-->
<div id="nav">
<div id="flagimg"><img src="image/banner.png"/></div>
</div>
<!--第三行图片标志结束-->
<!--图书信息板块开始-->
<div id="books">
<div >
<dl>
<dt id="left_one"><img src="image/book-01.jpg"/></dt>
<dd id="right_one"><p><a href="#">偷影子的人</a></p>
<p>作者：[法]马克·李维（Marc Levy）著，段韵灵译</p>
<p>出版社：湖南文艺出版社</p>
<p>当当价：<span>￥17.90</span></p>
<p>不知道姓氏的克雷儿。这就是你在我生命里的角色，我童年时的小女孩，今日蜕变成了女人，一段青梅竹马的回忆，一个时间之神没有应允的愿望。一个是受班上同学欺负的瘦弱小男孩，因为拥有一种特殊能力而强大：他能“偷别人的影子”，因而能看见他</p>
</dd>
</dl>
</div>
<div>
<dl>
<dt id="left_two"><img src="image/book-02.jpg"/></dt>
<dd id="right_two"><p><a href="#">看见（央视知名记者、主持人柴静：十年个人成长的告白，中国社会变迁的备忘</a></p>
<p>作者：柴静 著</p>
<p>出版社：广西师范大学出版社</p>
<p><span>￥29.40</span> 7.4折</p>
</dd>
</dl>
</div>
<div>
<dl>
<dt><img src="image/book-03.jpg"/></dt>
<dd>
<p><a href="#">改变孩子先改变自己</a></p>
<p>作者：贾容韬 贾毅 著</p>
<p>出版社：作家出版社</p>
<p><span>￥22.20</span> 7.4折</span></p>
</dd>
</dl>
</div>
</div>
</div>
<!--图书信息板块结束-->
<!--尾部声明板块开始-->
<div id="tail">Copyright(C)当当网2004-2013，All Rights Reaerved<img src="image/validate.gif"/>京ICP证041189号出版物经营许可证 新出发京批字第直0673号</div>
<!--尾部声明板块结束-->
</div>
<!--当当网主页面结束-->
</div>
</body>
</html>
</body>
</html>