<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>当当图书榜</title>
<style type="text/css">
a{
text-decoration: none;
}
ul li{
list-style: none;
}
#header li{
text-decoration: none;
display: inline-block;
border: 1px white solid;
}
#header li a{
width: 50px;
height: 20px;
background-color: lightcyan;
position: relative;
top: -40px;
left: 670px;
line-height: 20px;
text-align: center;
}
#header li:last-of-type{
position: relative;
top: -55px;
left: 410px;
}
#menu{
display: block;
width: 960px;
height: 80px;
font-size: 20px;
text-align: center;
line-height: 80px;
position: relative;
top: -55px;
background-color: orange;
}
#menu a{
color: aliceblue;
padding-left: 15px;
}
#pit{
position: relative;
top: -45px;
}
#bookTop{
display: inline-block;
width: 960px;
height: 400px;
border: 3px greenyellow solid;
position: absolute;
top: 290px;
}
#footer{
position: relative;
top: 1600px;
}
.first{
position: relative;
top:-280px;
left: 20px;
}
.bookLeft{
display: inline-block;
width: 410px;
height: 300px;
}
#w1{
position: relative;
left: 200px;
top: -300px;
}
#s1{
position: relative;
left: 200px;
top: -300px;
}
.second{
position: relative;
top: -690px;
left: 630px;
}
#s2{
display: inline-block;
width: 250px;
position: relative;
top: -720px;
left: 680px;
}
#p2{
position: relative;
top: -570px;
left: 630px;
}
#w2{
position: relative;
top: -720px;
left: 680px;
}
#p3{
position: relative;
top: -740px;
left: 630px;
}
.third{
position: relative;
top: -865px;
left: 620px;
}
#s3{
position: relative;
top: -885px;
left: 685px;
}
#w3{
position: relative;
top: -885px;
left: 685px;
}
#footer{
position: relative;
top: 380px;
left: 50px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<div class="logo"><img src="image/logo.jpg" alt="logo"/></div>
<ul>
<li><a href="#">尾品汇</a></li>
<li><a href="#">当当优品</a></li>
<li><a href="#">数字馆</a></li>
<li><a href="#">都看阅器</a></li>
<li class="tip"><img src="image/icon_count.png" alt="tip"/></li>
</ul>
</div>
<div id="menu">
<a href="#">首页</a>
<a href="#">图书</a>
<a href="#">音像</a>
<a href="#">童装</a>
<a href="#">服装</a>
<a href="#">鞋靴</a>
<a href="#">运动</a>
<a href="#">箱包</a>
<a href="#">美妆</a>
<a href="#">珠宝</a>
<a href="#">家居</a>
<a href="#">食品</a>
<a href="#">酒</a>
<a href="#">手机</a>
<a href="#">数码</a>
<a href="#">电脑</a>
<a href="#">家电</a>
</div>
<div class="clear10"></div>
<div><span id="pit"><img src="image/banner.png" alt="当当图书榜"/></span></div>
<div class="clear10"></div>
<div id="bookTop">
<div class="title"><img src="image/bg_bang.gif" alt="title"/></div>
<div class="bookLeft">
<dl>
<dt>
<img src="image/book-01.jpg" alt="偷影子的人"/>
<div class="first">
<img src="image/bookNo1.gif" alt="No1"/>
</div>
</dt>
<dd><span id="s1"><a href="#">偷影子的人</a></span>
<span id="w1"><p>作 者:[法] 马克・李维(Marc Levy)著,段韵灵 译</p>
<p>出版社:湖南文艺出版社</p>
<p>当当价:<strong>¥ 17.90</strong></p>
<p>
不知道姓氏的克蕾儿。这就是你在我生命里的角色,我童年时的小女孩,今日蜕变成了女人,一段青梅竹马的回忆,一个时间之神没有应允的愿望。
一个老是受班上同学欺负的瘦弱小男孩,因为拥有一种特殊能力而强大:他能“偷别人的影子”,因而能看见他</p></dd>
</span>
</dl>
</div>
<div class="bookRight">
<dl>
<dt><span id="p2"><img src="image/book-02.jpg" alt="看见"/></span>
<div class="second"><img src="image/bookNo2.gif" alt="NO2"/></div>
</dt>
<dd>
<span id="s2"><a href="#">看见(央视知名记者、主持人柴静:十年个人成长的告白,中国社会变迁的备忘</a></span>
<span id="w2"><p>作 者:柴静 著</p>
<p>出版社:广西师范大学出版社
<p><strong>¥ 29.40</strong> <span>7.4折</span></p></span></dd>
</dl>
<dl>
<dt><span id="p3"><img src="image/book-03.jpg" alt="改变孩子先改变自己"/></span>
<div class="third"><img src="image/bookNo3.gif" alt="NO3"/></div>
</dt>
<dd><span id="s3"><a href="#">改变孩子先改变自己</a></span>
<span id="w3"><p>作 者:贾容韬 贾毅 著</p>
<p>出版社:作家出版社</p>
<p><strong>¥ 22.20</strong> <span>7.4折</span></p></dd>
</dl>
</div>
<div class="clear10"></div>
</div>
<div id="footer">Copyright (C) 当当网 2004-2017, All Rights Reserved<img src="image/validate.gif" alt="版权标志"/>京ICP证041189号出版物经营许可证
新出发京批字第直0673号
</div>
</div>
</body>
</html>
12.20作业:当当图书馆
最新推荐文章于 2024-09-24 11:22:03 发布
本文介绍了当当图书榜上的三本书:《偷影子的人》、《看见》和《改变孩子先改变自己》,包括作者、出版社和定价等信息。
摘要由CSDN通过智能技术生成