<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
#logo,#nav{
width: 960px;
margin: 3px auto;
}
#nav{
position: relative;
}
#nav .main{
width: 100%;
background: url(img/练习4/menuBg.jpg);
}
#nav .main li{
float: left;
height: 36px;
line-height: 36px;
}
#nav .main li a{
font-size: 12px;
color: #fff;
font-family: "宋体";
margin: 0 16px;
}
#nav .extra{
position: absolute;
right: 0;
top: -31px;
border: 1px solid #00BFFF;
}
#nav .extra li {
padding:0px 10px;
float: left;
background: #eafffa;
}
#nav .extra li a{
line-height: 29px;
font-size: 12px;
color: #7b7b7b;
}
#nav .szfq{
position: absolute;
top: -44px;
right :194px;
}
.dang{
padding-top: 10px;
}
bookTop {
border:2px #cce9ac solid;
width:956px;
position:relative;
padding-top:90px;
}
.title {
position:absolute;
left:-12px;
top:15px;
z-index:10;
}
bookTop a {
color:#1a66b3;
font-size:14px;
}
bookTop strong {
color:#8E112B;
}
bookTop span{color:#5ea593; padding-left:10px;}
.bookLeft {
float:left;
width:560px;
}
.bookLeft dt {
float:left;
width:260px;
text-align:center;
position:relative;
}
.bookLeft dt .first {
position:absolute;
top:-5px;
left:20px;
}
.bookLeft dd {
float:left;
width:280px;
padding-top:15px;
}
.bookRight {
float:left;
width:390px;
}
.bookRight dl{clear:both;}
.bookRight dt{float:left; width:100px; position:relative;}
.bookRight dt div{position:absolute; top:-10px; left:0px;}
.bookRight dd{float:left; width:285px;}
footer {
color:#848484;
text-align:center;
clear:both;
}
footer img {
vertical-align:middle;
}
.clear10 {
clear:both;
height:10px;
overflow:hidden;
}
</style>
</head>
<body>
<div id="logo">
<img src="img/练习4/logo.jpg" alt="">
</div>
<div id ="nav">
<ul class="main">
<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>
<li><a href="">首页</a></li>
<div style ="clear: both;"></div>
</ul>
<ul class="extra">
<li><a href="">尾品汇</a></li>
<li><a href="">当当优品</a></li>
<li><a href="">数字馆</a></li>
<li><a href="">都看阅器</a></li>
</ul>
<div class="szfq">
<img src="img/练习4/icon_count.png">
</div>
<div class="dang">
<img src="img/banner.png"/>
</div>
<div id="bookTop">
<div class="title"><img src="img/bg_bang.gif" alt="title"></div>
<div class="bookLeft"><dl><dt><img src="img/book-01.jpg" alt="偷影子的人"><div class="first">
<img src="img/bookNo1.gif" alt="No1"></div></dt>
<dd><a href="#">偷影子的人</a>
<p>作 者：[法] 马克·李维（Marc Levy）著,段韵灵 译</p>
<p>出版社：湖南文艺出版社</p>
<p>当当价：<strong>￥ 17.90</strong></p>
<p>
不知道姓氏的克蕾儿。这就是你在我生命里的角色，我童年时的小女孩，今日蜕变成了女人，一段青梅竹马的回忆，一个时间之神没有应允的愿望。 一个老是受班上同学欺负的瘦弱小男孩，因为拥有一种特殊能力而强大：他能“偷别人的影子”，因而能看见他</p></dd></dl></div>
<div class="bookRight">
<dl><dt><img src="img/book-02.jpg" alt="看见"><div class="second">
<img src="img/bookNo2.gif" alt="NO2"></div></dt>
<dd><a href="#">看见(央视知名记者、主持人柴静：十年个人成长的告白，中国社会变迁的备忘</a>
<p>作 者：柴静 著</p>
<p>出版社：广西师范大学出版社</p>
<p><strong>￥ 29.40</strong> <span>7.4折</span></p></dd></dl>
<dl><dt><img src="img/book-03.jpg" alt="改变孩子先改变自己"><div class="third">
<img src="img/bookNo3.gif" alt="NO3"></div></dt>
<dd><a href="#">改变孩子先改变自己</a>
<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-2013, All Rights Reserved<img src="img/validate.gif" alt="版权标志">京ICP证041189号出版物经营许可证 新出发京批字第直0673号</div>
</div>
</div>
</body>
</html>
网友评论