<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>当当图书榜</title>
<link href="css/book.css" rel="stylesheet" type="text/css"/>
</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><img src="image/banner.png" alt="当当图书榜"/></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><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="image/book-02.jpg" alt="看见"/>
<div class="second"><img src="image/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="image/book-03.jpg" alt="改变孩子先改变自己"/>
<div class="third"><img src="image/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-2017, All Rights Reserved<img src="image/validate.gif" alt="版权标志"/>京ICP证041189号出版物经营许可证
新出发京批字第直0673号
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div img:nth-child(even){
width: 200px;
}
div img:nth-child(odd){
width:300px;
}
.box{
width: 960px;
margin: 200px auto;
position: relative;
}
.box img{
border: 1px solid #ddd;
padding: 10px;
position: absolute;
background: #fff;
z-index: 1;
/*过渡动画*/
transition: all 0.6s ease-in-out;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
}
#box img:hover{
z-index: 2; /*提高层级 */
box-shadow: 5px 5px 5px #ddd;
transform: rotate(0deg) scale(1.5);
}
.box img:nth-child(1){
top: 0px;
left: 300px;
transform: rotate(-15deg);
}
.box img:nth-child(2) {
top:-50px;
left: 600px;
transform: rotate(-20deg);
}
.box img:nth-child(3) {
bottom: 0;
right: 0;
transform: rotate(15deg);
}
.box img:nth-child(4) {
bottom: 0;
left: 400px;
transform: rotate(-20deg);
}
.box img:nth-child(5) {
bottom: 0;
left: 0;
transform: rotate(-30deg);
}
.box img:nth-child(6) {
top: 0;
left: 0;
transform: rotate(20deg);
}
.box img:nth-child(7) {
top: 0;
left: 700px;
transform: rotate(20deg);
}
.box img:nth-child(8) {
bottom: -20px;
right: 500px;
transform: rotate(30deg);
}
.box img:nth-child(9) {
top: 90px;
left: 550px;
transform: rotate(15deg);
}
.box img:nth-child(10) {
left: 180px;
top: 20px;
transform: rotate(-10deg);
}
</style>
</head>
<body>
<div class="box" id="box">
<img src="image/1.jpg" alt=""/>
<img src="image/2.jpg" alt=""/>
<img src="image/3.jpg" alt=""/>
<img src="image/4.jpg" alt=""/>
<img src="image/5.jpg" alt=""/>
<img src="image/6.jpg" alt=""/>
<img src="image/7.jpg" alt=""/>
<img src="image/8.jpg" alt=""/>
<img src="image/9.jpg" alt=""/>
<img src="image/10.jpg" alt=""/>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
body{
padding: 20px 0 0;
}
a{
text-decoration: none;
}
li{
list-style: none;
}
.clear:after{
content:'';
display: block;
clear: both;
}
section{
width: 665px;
margin: 0 auto;
font-size: 12px;
outline:1px solid #CCCCCC;
}
.left{
float: left;
width: 223px;
}
.left h3{
font-size: 14px;
color: #4b4b4b;
margin: 40px 0 0 20px;
}
.left p{
margin: 20px 0 0 20px;
}
.left img{
margin: 60px 0 20px 40px;
}
.right{
float: left;
width: 440px;
}
.right li{
float: left;
width: 218px;
height: 150px;
border-bottom: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
}
.text{
float: left;
}
.text h3{
font-size: 14px;
color: #4b4b4b;
margin: 20px 0 0 20px;
}
.text p{
margin: 10px 0 0 20px;
}
.img{
float: right;
margin-top: 30px;
transition: all 1s ease-out;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
}
.img:hover {
transform: translate(-12px ,0);
-webkit-transform: translate(-12px ,0);
-moz-transform: translate(-12px ,0);
-o-transform: translate(-12px ,0);
}
</style>
</head>
<body>
<section class="clear">
<div class="left">
<h3>超级信用卡</h3>
<p>线上线下课累计彩贝积分</p>
<img src="images/1.bmp" alt="xxk"/>
</div>
<div class="right">
<ul>
<li>
<div class="text">
<h3>彩贝抢霸</h3>
<p>每天10点更新</p>
</div>
<div class="img">
<img src="images/2.bmp" alt=""/>
</div>
</li>
<li>
<div class="text">
<h3>热门优惠劵</h3>
<p>全场免费领取</p>
</div>
<div class="img">
<img src="images/3.bmp" alt=""/>
</div>
</li>
<li>
<div class="text">
<h3>促销活动</h3>
<p>汇集全网优惠</p>
</div>
<div class="img">
<img src="images/4.bmp" alt=""/>
</div>
</li>
<li>
<div class="text">
<h3>精挑细选</h3>
<p>给你最好的选择</p>
</div>
<div class="img">
<img src="images/5.bmp" alt=""/>
</div>
</li>
</ul>
</div>
</section>
</body>
</html>
本文解析了当当网的图书榜单，展示了当前最畅销的书籍，包括《偷影子的人》、《看见》和《改变孩子先改变自己》，并提供了书籍的详细信息如作者、出版社及价格。
扫一扫
792
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
