使用HTML + CSS 编写当当网
效果图如下展示:
代码块:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>当当网</title>
<style type="text/css">
body {
padding: 1px 40px;
}
.header{
clear: all;
height: 60px;
}
.header_left {
float: left;
margin: 0px 10px;
width: 30%;
}
.header_all_right {
width: 25%;
float: right;
margin-right: 10px;
font-family: "arial, helvetica, sans-serif";
}
.header_right_top {
margin-bottom: -5px;
clear: right;
}
.head_right_bottom {
clear: right;
height: 40px;
background-color: aliceblue;
}
.header_right {
margin: 8px 6px;
}
.header_right a {
text-decoration: none;
color: black;
padding: 3px;
}
.contend {
clear: left;
padding: 0px 10px;
}
.chart {
clear: left;
margin-top: 10px;
}
.bar {
background-color: orangered;
height: 35px;
}
.puture {
margin-top: 10px;
border: solid;
border-color: aquamarine;
clear: left;
height: 400px;
}
.footer {
text-align: center;
}
.contend .tag {
float: left;
width: 4.3%;
margin: 6px 10px 6px 10px;
}
.contend .tag a {
text-decoration: none;
color: black;
padding: 3px;
color: white;
}
.puture1 {
margin-top: 10px;
margin-bottom: 10px;
margin-left: -10px;
}
.puture2 {
margin-left: 10px;
clear: left;
height: 300px;
background: url(img/book-01.jpg);
background-repeat: no-repeat;
}
.puture2 .shu{
float: left;
}
.puture2 .shu img{
padding-left:20px ;
}
.puture2 .one {
margin-right: 0px;
}
.puture .four .jianjie{
padding-top: 80px;
padding-right: 100px;
}
.puture2 .nine {
margin-left: 0px;
}
.four .jianjie{
}
.four .jianjie a{
text-decoration:none;
color: blue;
}
.book2{
clear: left;
height: 130px;
margin: 20px 5px;
}
.book2 .six a{
text-decoration: none;
font-size:small;
color: blue;
}
.book2 .six p{
font-size: x-small;
margin: 5px;
}
.book2 .twol {
background: url(img/book-02.jpg);
height: 120px;
background-repeat: no-repeat;
}
.book3 .six a{
text-decoration: none;
font-size:small;
color: blue;
}
.book3 .six p{
font-size: x-small;
margin: 5px;
}
.book3 .twol {
background: url(img/book-03.jpg);
height: 120px;
background-repeat: no-repeat;
}
.footer{
color: lightgray;
font-size: smaller;
}
.one {
width: 8%;
float: left;
}
.two {
width: 25%;
float: right;
text-align: center;
}
.twol{
width: 20%;
float: left;
}
.three {
width: 26%;
float: left;
}
.four {
width: 37%;
float: left;
}
.nine {
widows: 92%;
float: left;
}
.six{
width: 65%;
float: left;
}
.five{
width: 50%;
float: left;
}
</style>
</head>
<body>
<div class="header">
<div class="header_left">
<img src="img/logo.jpg" alt="logo" />
</div>
<div class="header_all_right">
<div class="header_right_top">
<img src="img/icon_count.png" alt="" />
</div>
<div class="head_right_bottom">
<div class="two">
<div class="header_right" style="height:30px;width: 70px;">
<a href="#">都看乐器</a>
</div>
</div>
<div class="two">
<div class="header_right" style="height:30px;width: 70px;">
<a href="#">数字馆</a>
</div>
</div>
<div class="two">
<div class="header_right" style="height:30px;width: 70px;">
<a href="#">当当优品</a>
</div>
</div>
<div class="two">
<div class="header_right" style="height:30px;width: 70px;">
<a href="#">唯品会</a>
</div>
</div>
</div>
</div>
</div>
<div class="contend">
<div class="bar">
<div class="tag">
<a href="#">首页</a>
</div>
<div class="tag">
<a href="#">图书</a>
</div>
<div class="tag">
<a href="#">音像</a>
</div>
<div class="tag">
<a href="#">童装</a>
</div>
<div class="tag">
<a href="#">童装</a>
</div>
<div class="tag">
<a href="#">童装</a>
</div>
<div class="tag">
<a href="#">童装</a>
</div>
<div class="tag">
<a href="#">童装</a>
</div>
<div class="tag">
<a href="#">童装</a>
</div>
<div class="tag">
<a href="#">童装</a>
</div>
<div class="tag">
<a href="#">童装</a>
</div>
<div class="tag">
<a href="#">童装</a>
</div>
<div class="tag">
<a href="#">童装</a>
</div>
<div class="tag">
<a href="#">童装</a>
</div>
<div class="tag">
<a href="#">童装</a>
</div>
<div class="tag">
<a href="#">童装</a>
</div>
<div class="tag">
<a href="#">童装</a>
</div>
</div>
<div class="chart">
<img height="100%" width="100%" src="img/banner.png" alt="#" />
</div>
<div class="puture">
<div class="three">
<div class="puture1">
<img src="img/bg_bang.gif" alt="" />
</div>
<div class="puture2">
<div class="shu">
<img src="img/bookNo1.gif" alt="" />
</div>
</div>
</div>
<div class="four">
<div class="jianjie">
<a href="#">
偷影子的人
</a>
<p>
埃及——世界上*伟大的文明体,其古代故事跨越了四千多年的历史时段,
而这一历史时段又塑造了日后整个世界的形态。,
</p>
<p>
本书是乔安•弗莱切的代表作,作为英国BBC该书电视台相关古埃及解读的系列节目的原著,因此具有BBC纪录片式的客观性和权威性。
</p>
<p>
全书以古埃及4000多年一代代的王朝为阶段,按时间推行的王朝兴衰为轴线来讲述不同王朝的情况,
根据考古实物,如壁画、神庙、金字塔等,以及各类出土的文献来还原每代帝王的生活和王朝的发展
</p>
</div>
</div>
<div class="four" style="height: 400px;">
<div class="book1" style="height: 60px;">
</div>
<div class="book2" >
<div class="twol">
<img src="img/bookNo2.gif" alt="" />
</div>
<div class="six">
<a href="#">
看见(央视知名记者,主持人蔡静:十年个人成长的告白,中国社会变迁的备忘)
</a>
<br />
<p>
作者:蔡静 著
</p>
<p>
出版社:广西师范大学出版社
</p>
<p>
29.4 7.4折
</p>
</div>
</div>
<div class="book3" >
<div class="twol">
<img src="img/bookNo3.gif" alt="" />
</div>
<div class="six">
<a href="#">
看见(央视知名记者,主持人蔡静:十年个人成长的告白,中国社会变迁的备忘)
</a>
<br />
<p>
作者:蔡静 著
</p>
<p>
出版社:广西师范大学出版社
</p>
<p>
29.4 7.4折
</p>
</div>
</div>
</div>
</div>
<div class="footer">Copyright (C) 当当网 2004-2017, All Rights Reserved <img src="img/validate.gif" alt="#" />京ICP证041189号出版物经营许可证 新出发京批字第直0673号</div>
</body>
</html>