<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>当当网</title>
</head>
<link rel="stylesheet" href="./dangdang.css" />
<body>
QQ截图20201217101414.jpg
QQ截图20201217101430.jpg
HTML
<div class="swipper clear">
<!-- 头部 -->
<div class="header">
<div class="header-left">
<p>欢迎光临当当，请<a href="" class="login">登录</a> 免费注册</p>
</div>
<div class="header-right">
<p class="clearfix">
<a href="">购物车</a>| <a href="">我的订单</a>|<a href=""
>当当出版</a
>|<a href="">我的当当</a>|<a href="">企业采购</a>|<a href=""
>客户服务</a
>|
</p>
</div>
</div>
<!-- 图标 -->
<div class="logo">
<img src="./images/logo.jpg" />
</div>
<!-- 导航 -->
<div class="navigate">
<ul class="nav clear">
<li class="nav-left"><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>
</ul>
</div>
<!-- 主体 -->
<div class="main">
<div class="main-left">
<h2 class="tag">图书分类</h2>
<p class="content">
<a href=""> 电子书 </a> <a href=""> 豆瓜原创</a>
</p>
<p class="content1"><a href="">小说 </a></p>
<p class="book-title"><a href="" class="link"> 文艺</a></p>
<div class="book-sort">
<a href="">文学 |</a> <a href="">传记 |</a>
<a href="">艺术 |</a> <a href="">摄影</a>
</div>
<p class="book-title"><a href="" class="link"> 青春</a></p>
<div class="book-sort">
<a href="">青春文字 |</a> <a href="">动漫 |</a>
<a href="">幽默</a>
</div>
<p class="book-title"><a href="" class="link"> 童书</a></p>
<div class="book-sort">
<a href="">0-2 |</a> <a href="">3-6 |</a>
<a href="">7-10 |</a> <a href="">11-14 |</a>
<div>
<a href="">科普/百科 |</a> <a href="">图画书 |</a>
<a href="">文字 |</a>
</div>
</div>
<p class="content1"><a href="">励志/成功</a></p>
<p class="book-title"><a href="" class="link"> 人文社科</a></p>
<div class="book-sort">
<a href="">历史 |</a> <a href="">古籍 |</a>
<a href="">哲学/宗教</a> |<a href="">文化</a>
<div>
<a href="">政治/军事 </a> |<a href="">法律 </a>|
<a href="">社会科学</a> |
</div>
<div><a href="">心理学</a></div>
</div>
<p class="content1"><a href="">英文原版书 港台图书</a></p>
<p class="content1-book"><a href="">工具书</a></p>
</div>
<div class="main-middle">
<div class="middle-banner">
<div class="banner">
<a href=""><img src="./images/focus.jpg" /></a>
</div>
<div class="cut">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<div class="sweep"></div>
</div>
</div>
<div class="book-list">
<div class="book-list-title">
<img src="./images/new_book.png" />
</div>
<div class="book-area">
<ul class="cool">
<li class="book">
<a href=""
><img src="./images/book2.jpg" />
<p class="book-name">来得及</p>
<p class="book-author">何炅</p>
<p>
<span class="new">￥40.00</span>
<span class="old">￥43.30</span>
</p>
<div class="flash-sale"><img src="./images/xsq.png" /></div>
</a>
</li>
<li class="book">
<a href=""
><img src="./images/book2.jpg" />
<p class="book-name">来得及</p>
<p class="book-author">何炅</p>
<p>
<span class="new">￥40.00</span>
<span class="old">￥43.30</span>
</p>
</a>
</li>
<li class="book">
<a href=""
><img src="./images/book2.jpg" />
<p class="book-name">来得及</p>
<p class="book-author">何炅</p>
<p>
<span class="new">￥40.00</span>
<span class="old">￥43.30</span>
</p>
</a>
</li>
<li class="book">
<a href=""
><img src="./images/book2.jpg" />
<p class="book-name">来得及</p>
<p class="book-author">何炅</p>
<p>
<span class="new">￥40.00</span>
<span class="old">￥43.30</span>
</p>
</a>
</li>
<li class="book">
<a href=""
><img src="./images/book2.jpg" />
<p class="book-name">来得及</p>
<p class="book-author">何炅</p>
<p>
<span class="new">￥40.00</span>
<span class="old">￥43.30</span>
</p>
</a>
</li>
<li class="book">
<a href=""
><img src="./images/book2.jpg" />
<p class="book-name">来得及</p>
<p class="book-author">何炅</p>
<p>
<span class="new">￥40.00</span>
<span class="old">￥43.30</span>
</p>
</a>
</li>
<li class="book">
<a href=""
><img src="./images/book2.jpg" />
<p class="book-name">来得及</p>
<p class="book-author">何炅</p>
<p>
<span class="new">￥40.00</span>
<span class="old">￥43.30</span>
</p>
</a>
</li>
<li class="book">
<a href=""
><img src="./images/book2.jpg" />
<p class="book-name">来得及</p>
<p class="book-author">何炅</p>
<p>
<span class="new">￥40.00</span>
<span class="old">￥43.30</span>
</p>
</a>
</li>
<li class="fix"></li>
</ul>
</div>
</div>
</div>
<div class="main-right">
<div class="news">
<h2 class="recent">最新动态</h2>
<ul>
<li> 1. 杨先生104岁生日快乐</li>
<li> 2. 阅享频道：沈从文给家人的83封信</li>
<li> 3. 小时代：我用10年青春赴你最后之约</li>
</ul>
</div>
<div class="news-book">
<h2 class="recent">
新书预售 <span class="recent1">预售更多</span>
</h2>
<div class="pre-sale">
<ul>
<li>
<div class="sale"><img src="./images/book.jpg" /></div>
<p class="text"> 极地重生沙克尔顿南极史诗之旅</p>
<p class="text1">￥40.1 </p>
<p class="text2">￥60.00 </p>
</li>
</ul>
<a href="" class="scroll-left"></a>
<a href="" class="scroll-right"></a>
<div class="across">
<a href="" class="active"></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
</div>
</ul>
</div>
</div>
<div class="news-book-hot main-right-clearfix">
<div class="news-hot">
<h2 class="hot">新书热卖榜</h2>
</div>
<div class="tab-area">
<ul class="tab-title clear">
<li class="tab-title1"> <a href="">总榜</a></li>
<li><a href="">图书</a></li>
<li><a href="">励志</a></li>
<li><a href="">保健</a></li>
<li class="tab-title2"><a href="">美食</a></li>
</ul>
<div class="tab-content">
<ul>
<li>
<span>1</span>
<div class="content-book">
<p class="content-book-name"><a href="">极地重生沙克尔顿南极</a></p>
<div class="content-book-hover clear">
<div class="book-left"><img src="./images/book.jpg"/></div>
<div class="book-right clear">
<p class="text"> 极地重生沙克尔顿南极</p>
<p class="text1">￥40.1 </p>
<p class="text2">￥68.00 </p>
<p class="comment">333条评论</p>
</div>
</div>
</div>
</li>
<li>
<span>2</span>
<div class="content-book">
<p class="content-book-name"><a href="">极地重生沙克尔顿南极</a></p>
<div class="content-book-hover clear">
<div class="book-left"><img src="./images/book.jpg"/></div>
<div class="book-right clear">
<p class="text"> 极地重生沙克尔顿南极</p>
<p class="text1">￥40.1 </p>
<p class="text2">￥68.00 </p>
<p class="comment">333条评论</p>
</div>
</div>
</div>
</li>
<li>
<span>3</span>
<div class="content-book">
<p class="content-book-name"><a href="">极地重生沙克尔顿南极</a></p>
<div class="content-book-hover clear">
<div class="book-left"><img src="./images/book.jpg"/></div>
<div class="book-right clear">
<p class="text"> 极地重生沙克尔顿南极</p>
<p class="text1">￥40.1 </p>
<p class="text2">￥68.00 </p>
<p class="comment">333条评论</p>
</div>
</div>
</div>
</li>
<li>
<span>4</span>
<div class="content-book">
<p class="content-book-name"><a href="">极地重生沙克尔顿南极</a></p>
<div class="content-book-hover clear">
<div class="book-left"><img src="./images/book.jpg"/></div>
<div class="book-right clear">
<p class="text"> 极地重生沙克尔顿南极</p>
<p class="text1">￥40.1 </p>
<p class="text2">￥68.00 </p>
<p class="comment">333条评论</p>
</div>
</div>
</div>
</li>
<li>
<span>5</span>
<div class="content-book">
<p class="content-book-name"><a href="">极地重生沙克尔顿南极</a></p>
<div class="content-book-hover clear">
<div class="book-left"><img src="./images/book.jpg"/></div>
<div class="book-right clear">
<p class="text"> 极地重生沙克尔顿南极</p>
<p class="text1">￥40.1 </p>
<p class="text2">￥68.00 </p>
<p class="comment">333条评论</p>
</div>
</div>
</div>
</li>
</ul>
<p class="text3"><a href="#">查看完整榜单>></a></p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 页脚 -->
<div class="footer">
<div class="footer-top">
<a href="">公司简介</a> <span>|</span>
<a href="">Inverstor Relations</a> <span>|</span>
<a href="">诚征英才</a> <span>|</span>
<a href="">网站联盟</a> <span>|</span>
<a href="">广告服务</a> <span>|</span>
<a href="">机构销售</a> <span>|</span>
<a href="">手机当当</a> <span>|</span>
<a href="">官方Blog</a> <span>|</span>
<a href="">热词搜索</a>
</div>
<div class="footer-bottom">
<p>Copyright( C ) 当当网2014 All Right Reseved <img src="./images/validate.gif" alt=""> 京ICP证041189号 出版物经营许可证 新出发京批字第直0673号</p>
</div>
</div>
</div>
</body>
<script src="./dangdang.js"></script>
</html>
css 内容
* {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
a {
text-decoration: none;
color: #000;
}
.header {
background-color: rgb(249, 249, 249);
height: 43px;
width: 100%;
}
.login {
color: red;
font-size: 14px;
}
.header-left {
margin: 0 0 0 17%;
line-height: 43px;
font-size: 10px;
color: #666;
float: left;
}
.header-right {
margin: 0 0 0 56%;
}
.clearfix {
line-height: 43px;
font-size: 13px;
}
.clearfix a {
margin: 0 13px 0 13px;
color: #333;
}
.clearfix a:hover {
color: red;
}
.clearfix:after {
content: ""; /*在父元素的末尾 */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.logo img {
width: auto;
height: auto;
margin: 0 0 0 -170px;
}
.navigate {
background-color: rgb(255, 40, 50);
height: 50px;
width: 100%;
}
.clear:after {
content: ""; /*在父元素的末尾 */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.navigate .nav li {
float: left;
margin-right: 23px;
}
.navigate .nav li a {
color: #fff;
line-height: 50px;
font-size: 16px;
font-weight: bold;
}
.navigate .nav li:hover {
background-color: rgb(255, 0, 0);
padding: 0 5px 0 5px;
}
.navigate .nav-left {
margin-left: 21%;
padding-right: 56px;
}
.main-left {
width: 240px;
height: 670px;
border: 1px solid rgb(72, 122, 111);
margin-left: 17%;
margin-top: 20px;
float: left;
}
.main .main-left .tag {
height: 50px;
width: 100%;
background-color: rgb(72, 122, 111);
line-height: 50px;
text-align: center;
color: #fff;
font-size: 20px;
}
.main .main-left .content {
color: rgb(72, 122, 111);
font-size: 16px;
font-weight: bold;
line-height: 50px;
margin-left: 10px;
border-bottom: 1px dashed rgb(72, 122, 111);
}
.content a {
color: rgb(72, 122, 111);
}
.content1 a {
color: rgb(72, 122, 111);
}
.content1-book a {
color: rgb(72, 122, 111);
}
.main .main-left .content1 {
color: rgb(72, 122, 111);
font-size: 16px;
font-weight: bold;
line-height: 50px;
margin-left: 10px;
border-bottom: 1px dashed rgb(72, 122, 111);
}
.main .main-left .content1-book {
color: rgb(72, 122, 111);
font-size: 16px;
font-weight: bold;
line-height: 50px;
margin-left: 10px;
}
.main .main-left .book-title .link {
color: rgb(72, 122, 111);
font-size: 16px;
font-weight: bold;
line-height: 50px;
margin-left: 10px;
}
.main .main-left .book-sort a {
font-weight: lighter;
padding-left: 10px;
color: black;
}
.main .main-left .book-sort a:hover {
color: red;
}
.main .main-left .book-sort {
border-bottom: 1px dashed rgb(72, 122, 111);
font-size: 13px;
margin-left: 10px;
padding-bottom: 10px;
}
.main-middle .middle-banner .banner {
margin-top: 20px;
position: relative;
}
.main-middle .middle-banner .banner img {
margin-left: 10px;
}
.main-middle .middle-banner .cut {
position: absolute;
left: 62.5%;
top: 54%;
}
.main-middle .middle-banner .cut a {
color: #000;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #fff;
line-height: 20px;
margin-right: 6px;
text-align: center;
display: block;
float: left;
opacity: 0.8;
}
.main-middle .middle-banner .cut a:hover {
background-color: skyblue;
}
.main-middle .middle-banner .cut .sweep {
clear: both;
}
.main-middle .book-list .book-list-title img {
margin: 10px 0 0 10px;
}
.main-middle .book-list .book {
float: left;
margin-left: 10px;
width: 175px;
margin-bottom: 15px;
position: relative;
}
.main-middle .book-list .book-area .book-name {
height: 40px;
margin-top: 5px;
font-size: 14px;
color: #000;
}
.main-middle .book-list .book-area .book-author {
color: #999;
margin-bottom: 8px;
font-size: 14px;
}
.main-middle .book-list .book-area .new {
color: red;
font-size: 18px;
}
.main-middle .book-list .book-area .old {
color: #999;
font-size: 18px;
text-decoration: line-through;
}
.main-middle .book-list .book-area .book .flash-sale {
position: absolute;
top: 0;
left: 122px;
}
.main-middle .book-list .book-area .fix {
clear: both;
}
.main-middle {
width: 760px;
height: auto;
float: left;
}
.main-right {
float: left;
margin-top: 20px;
margin-left: 10px;
}
.main-right .news {
width: 240px;
height: 100px;
border: 1px solid rgb(153, 153, 153);
}
.main-right .recent {
margin: 5px 0 0 5px;
}
.main-right .news ul li {
color: #000;
font-size: 13px;
margin-bottom: 5px;
}
.main-right .news-book {
width: 240px;
height: 190px;
border: 1px solid rgb(153, 153, 153);
margin-top: 20px;
}
.main-right .news-book .recent1 {
color: deepskyblue;
font-size: 13px;
font-weight: normal;
line-height: 26px;
float: right;
margin-right: 5px;
}
.main-right .news-book .pre-sale .sale {
float: left;
}
.main-right .news-book .pre-sale .text {
font-size: 13px;
}
.main-right-clearfix::after {
content: ""; /*在父元素的末尾 */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.main-right .news-book .pre-sale .text1 {
color: red;
font-size: 18px;
margin-top: 5px;
}
.main-right .news-book .pre-sale .text2 {
color: #666;
font-size: 18px;
text-decoration: line-through;
}
.main-right .news-book .pre-sale {
position: relative;
}
.main-right .news-book .pre-sale .scroll-left {
top: 30%;
left: 0px;
background: url(./book_fanye_btn.png);
}
.main-right .news-book .pre-sale .scroll-left,
.main-right .news-book .pre-sale .scroll-right {
width: 25px;
height: 49px;
position: absolute;
}
.main-right .news-book .pre-sale .scroll-right {
top: 30%;
right: 0px;
background: url(./book_fanye_btn.png) -27px 0;
}
.main-right .news-book .pre-sale .across a {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #666;
display: inline-block;
margin-right: 5px;
margin-top: 42px;
}
.main-right .news-book .pre-sale .across {
width: 100%;
}
.main-right .news-book .pre-sale a.active{
background-color: blue;
}
.news-hot .hot{
margin-top: 30px;
background: url(./images/sprite.png) no-repeat;
line-height: 32px;
padding-left: 25px;
margin-bottom: 4px;
}
.main-right .news-book-hot .tab-area .tab-title{
margin-top: 5px;
}
.main-right .news-book-hot .tab-area .tab-title1 a{
text-decoration: underline;
color: green;
font-weight: bold;
}
.main-right .news-book-hot .tab-area .tab-title li{
float: left;
width: 48px;
height: 30px;
line-height: 30px;
text-align: center;
border-right: 1px solid #666;
border-top: 1px solid #666;
border-bottom: 1px solid #666;
}
.main-right .news-book-hot .tab-area .tab-title li.tab-title1{
border-left: 1px solid #666;
border-bottom: 1px solid rgba(0, 0, 0, 0);
}
.main-right .news-book-hot .tab-area .tab-content{
width: 100%;
height: auto;
border-left: 1px solid #666;
border-right: 1px solid #666;
border-bottom: 1px solid #666;
box-sizing: border-box;
}
.main-right .news-book-hot .tab-area .tab-content ul{
padding-left: 7px;
padding-right: 10px;
}
.main-right .news-book-hot .tab-area .tab-content ul li{
padding-top: 10px;
border-bottom: 1px dashed #666;
font-size: 0px;
}
.main-right .news-book-hot .tab-area .tab-content ul li > span{
color: red;
font-size: 20px;
line-height: 28px;
display: inline-block;
width: 28px;
height: 28px;
box-sizing: border-box;
}
.main-right .news-book-hot .tab-area .tab-content > ul > li .content-book{
display: inline-block;
vertical-align: top;
font-size: 16px;
width: 199px;
box-sizing: border-box;
}
.main-right .news-book-hot .tab-area .tab-content .content-book-name{
line-height: 28px;
font-size: 16px;
padding-bottom: 10px;
}
.main-right .news-book-hot .tab-area .tab-content .content-book-hover{
display: none;
}
.main-right .news-book-hot .tab-area .tab-content .content-book:hover .content-book-name {
display: none;
}
.main-right .news-book-hot .tab-area .tab-content .content-book:hover .content-book-hover {
display: block;
}
.main-right .news-book-hot .tab-area .tab-content .content-book-hover .book-left img{
width: 93px;
height: 107px;
}
.main-right .news-book-hot .tab-area .tab-content .content-book-hover .book-left{
float: left;
width: 93px;
}
.main-right .news-book-hot .tab-area .tab-content .content-book-hover .book-right{
float: left;
width: 89px;
font-size: 16px;
}
.main-right .news-book-hot .tab-area .tab-content .content-book-hover .comment{
font-size: 13px;
color: green;
}
.main-right .news-book-hot .tab-area .tab-content .content-book-hover .book-right .text{
font-size: 14px;
}
.main-right .news-book-hot .tab-area .tab-content .content-book-hover .book-right .text1{
color: red;
font-size: 18px;
margin-top: 5px;
}
.main-right .news-book-hot .tab-area .tab-content .content-book-hover .book-right .text2{
color: #666;
font-size: 18px;
text-decoration: line-through;
}
.main-right .news-book-hot .tab-area .tab-content .text3{
text-align: right;
padding: 10px 10px 10px 0;
}
.main-right .news-book-hot .tab-area .tab-content .text3 a{
color: skyblue;
font-size: 15px;
}
.footer{
width: 100%;
height: auto;
border-top: 1px solid #ccc;
}
.footer .footer-top{
margin-top: 30px;
text-align: center;
}
.footer .footer-top a:hover{
text-decoration: underline;
}
.footer .footer-top a,span{
color: #999;
font-size: 14px;
margin-left: 10px;
}
.footer .footer-bottom p{
color: #999;
font-size: 14px;
text-align: center;
margin-top: 40px;
}
Images
book.jpg
book_fanye_btn.png
book2.jpg
focus.jpg
home_sprite.png
logo.jpg
new_book.png
sprite.png
validate.gif
xsq.png
