<!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>

2019-04-08