1。当当网
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>当当图书馆</title>
<style>
.l{
width: 800px;
height: 600px;
margin: 0px auto;
}
.ch{
font-size: 12px;
width: 230px;
height: 30px;
float:right;
padding-top: -50px;
margin-top: -30px;
background: #EEEEEE;
}
li{
list-style: none;
display:inline ;
border: 1px solid #EEEEEE;
}
.good{
position: relative;
top: -50px;
}
.word{
border:1px solid #F36F21;
background: #F36F21;
line-height: 30px;
margin-top: 10px;
padding: 5px;
color:#EEEEEE;
}
a{
text-decoration: none;
}
span a{
margin:7px ;
}
a:hover{
text-decoration: underline;
}
.cf{
margin-top: 10px;
}
.gooc{
border: 2px solid greenyellow;
widows: 200px;
height: 370px;
margin-top: 10px;
}
.lg{
widows: 500px;
}
.we{
position: relative;
left: -15px;
top: 15px;
}
.lu{
position: relative;
left:40px ;
top: 20px;
}
strong{
font-size: 15px;
}
span{
color: #A70532;
}
</style>
</head>
<body>
<div class="l">
<div><img src="img/logo.jpg" /></div>
<div class="ch">
<ul>
<li><a href="#">唯品汇</a></li>
<li><a href="#">当当优品</a></li>
<li><a href="#">数字馆</a></li>
<li><a href="#">都看阅器</a></li>
</ul>
<div class="good"><img src="img/icon_count.png" /></div>
</div>
<div class="word">
<span><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> </span>
</div>
<div class="cf"><img src="img/banner.png" height="100px"/></div>
<div class="gooc">
<div class="we"><img src="img/bg_bang.gif"</div>
<div class="lg">
<div class="lu"><img src="img/book-01.jpg"height="200px"style="position: relative;left: -10px;top: 40px;"</div>
<div><img src="img/bookNo1.gif" style="position: relative;left: 5px;top:-170px;z-index: ;"/></div>
<p style="font-size: 13px;position: relative;left: 180px;top: -220px;line-height: 22px;"><a href="#"><strong>偷影子的人</strong></a><br />
作者:[法]马克·李维(Marc Levy)著,段韵灵 <br />译<br />出版社:湖南文艺出版社<br />当当价:<span>¥ 17.90</span><br />不知道姓氏的克蕾儿。这就是你在我生命里的角色,<br />我童年时的小女孩,今日蜕变成了女人,一段青梅竹<br />马的回忆,一个时间之神没有应允的愿望。 一个老<br />是受班上同学欺负的瘦弱小男孩,因为拥有一种特殊<br />能力而强大:他能“偷别人的影子”,因而能看见他</p>
</div>
</div>
<div>
<div><img src="img/book-02.jpg"style="float: right; position: relative;left:-190px ;top: -470px;"/></div>
<div><img src="img/bookNo2.gif" style="float: right;position: relative;left: -160px;top: -480px;"/></div>
<p style="font-size: 14px; position: relative; left: 600px; top: -460px;line-height: 22px;"><a href="#"><strong>看见(央视知名记者、主持人柴<br/>静:十年个人成长的告白,中<br />国社会变迁的备忘 </strong></a><br />作 者:柴静 著<br />出版社:广西师范大学出版社<br /><span>¥ 29.40 7.4折</span></p>
</div>
<div>
<div><img src="img/book-03.jpg" style="float: right; position: relative; left: -190px;top: -470px;"/></div>
<div><img src="img/bookNo3.gif" style="float: right;position: relative; left: -160px; top: -480px;"/></div>
<p style="font-size: 14px; float: right; position: relative; left: 80px;top: -460px;line-height: 21px;"><a href="#"><strong>改变孩子先改变自己</strong></a><br />作 者:贾容韬 贾毅 著<br/>出版社:作家出版社<br/><span>¥ 22.20 7.4折</span></p>
</div>
<div>
<p style="float: right; font-size:12px; position: relative; left: -70px; top: -460px;">Copyright (C) 当当网 2004-2017, All Rights Reserved
<img src="img/validate.gif" style="vertical-align: middle;"/>
京ICP证041189号出版物经营许可证 新出发京批字第直0673号</p>
</div>
</div>
</body>
</html>
在这里插入图片描述