image.png
用所学知识制作一个当当网的界面。制作过程中遇到各种问题，才发现自己对标签记得熟练也不能保证自己做成一个漂亮的页面。各种搞笑的页面效果，都是自己对框架的不熟悉。好吧，其实很享受自己动手的过程，当界面一点点变成自己想要的效果，成就感就来了。可能有些语句不严谨，但以一个接触h5几天的新手来说，我觉得还可以，不过以后自己还是会学习，优化程序。废话不多说，下面粘程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>当当网图书</title>
<style>
*{
margin: 0px;
padding: 0px;
}
a {
text-decoration: none;
}
ul{
list-style: none;
}
.new{
width: 960px;
height: 740px;
border: solid 1px black;
margin-left: 150px;
margin-top: 10px;
}
.one {
width: 960px;
height: 80px;
}
.a1{
margin-top: 20px;
margin-left: 10px;
}
.one_one{
width: 270px;
height: 30px;
background: #FFFFED;
position: absolute;
right:240px;
top:40px;
line-height: 30px;
}
.one_one img{
position: absolute;
right:220px;
top:-10px;
}
.one_one a{
margin-right: 5px;
}
.two{
width: 960px;
height: 60px;
background: orange;
}
.two li{
display: inline-block;
}
.two a{
color:white ;
height: 60px;
line-height: 60px;
margin-right: 10px;
margin-left: 10px;
}
.two a:hover{
color: red;
}
.three{
width: 960px;
height: 120px;
margin-top: 5px;
margin-bottom: 5px;
}
.four{
width: 960px;
height: 410px;
border: solid 1px green;
}
.four-one{
width: 960px;
height: 50px;
}
.four-one img{
position: absolute;
right:970px;
top:280px;
}
.four-two{
width: 960px;
height: 350px;
}
.four-two-one{
width: 300px;
height: 350px;
float: left;
}
.four-two-one img{
width: 240px;
height: 280px;
margin-top: 40px;
margin-bottom: 30px;
}
.four-two-two {
width: 320px;
height: 280px;
font-size: 14px;
float: left;
padding-top: 70px;
}
.four-two-two p:nth-of-type(1){
line-height: 20px;
}
.four-two-two p:nth-of-type(2){
line-height: 20px;
}
.four-two-two p:nth-of-type(3){
line-height: 20px;
}
.four-two-two p:nth-of-type(4){
line-height: 20px;
}
.four-two-two a{
color: #aacbee;
}
span{
color: brown;
}
.four-two-three{
width: 330px;
height: 350px ;
float: right;
}
.b1{
width: 330px;
height: 150px;
}
.c1{
width: 90px;
height: 150px;
display: inline-block;
float: left;
}
.c1 img{
margin-top: 20px;
width: 80px;
height: 120px;
}
.c2{
width: 220px;
height: 120px;
display: inline-block;
float: left;
font-size: 12px;
margin-top: 30px;
}
.c2 p:nth-of-type(1){
line-height: 20px;
}
.c2 p:nth-of-type(2){
line-height: 20px;
}
.c2 p:nth-of-type(3){
line-height: 20px;
}
.b2{
width: 330px;
height: 150px;
}
.c3{
width: 100px;
height: 150px;
display: inline-block;
float: left;
}
.c3 img{
margin-top: 20px;
width: 80px;
height: 120px;
}
.c4{
width: 220px;
height: 120px;
display: inline-block;
float: left;
margin-top: 30px;
font-size: 12px;
}
.c4 p:nth-of-type(1){
line-height: 20px;
}
.four-two-three a{
color:#aacbee;
}
.footer{
text-align: center;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="new">
<div class="one">
<img class="a1" src="logo.jpg" alt=""/>
<div class="one_one">
<img src="icon_count.png" alt=""/>
<a href="#">尾品汇</a>
<a href="#">当当优品</a>
<a href="#">数字馆</a>
<a href="#">都看阅器</a>
</div>
</div>
<div class="two">
<ul>
<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>
</ul>
</div>
<div class="three">
<img src="banner.png" alt=""/>
</div>
<div class="four">
<div class="four-one">
<img src="bg_bang.gif" alt=""/>
</div >
<div class="four-two">
<div class="four-two-one">
<img src="book-01.jpg" alt=""/>
</div>
<div class="four-two-two">
<a href="">偷影子的人</a>
<p>作 者：[法] 马克·李维（Marc Levy）著,段韵灵 译</p>
<p>出版社：湖南文艺出版社</p>
<p>当当价：<span>￥ 17.90</span></p>
<p>不知道姓氏的克蕾儿。这就是你在我生命里的角色，
我童年时的小女孩，今日蜕变成了女人，一段青梅竹
马的回忆，一个时间之神没有应允的愿望。一个老
是受班上同学欺负的瘦弱小男孩,因为拥有一种特殊
能力而强大：他能“偷别人的影子”，因而能看见他</p>
</div>
<div class="four-two-three">
<div class="b1">
<div class="c1">
<img src="book-02.jpg" alt=""/>
</div>
<div class="c2">
<a href="">看见(央视知名记者、主持人柴静：十年个人成长的告白，中国社会变迁的备忘</a>
<p>作 者：柴静 著</p>
<p>出版社：广西师范大学出版社</p>
<p>￥<span> 29.40</span> 7.4折</p>
</div>
</div>
<div class="b2">
<div class="c3">
<img src="book-03.jpg" alt=""/>
</div>
<div class="c4">
<a href="">改变孩子先改变自己</a>
<p>作 者：贾容韬 贾毅 著</p>
<p>出版社：作家出版社</p>
<p>￥ <span>22.20</span> 7.4折</p>
</div>
</div></div>
</div>
</div>
<div class="footer">
<p>Copyright (C) 当当网 2004-2017, All Rights Reserved京ICP证041189号出版物经营许可证 新出发京批字第直0673号</p>
</div>
</div>
</body>
</html>
banner.png
bg_bang.gif
book-01.jpg
book-02.jpg
book-03.jpg
bookNo1.gif
bookNo2.gif
bookNo3.gif
icon_count.png
logo.jpg
menuBg.jpg
validate.gif
时间问题，我没有对小图标添加到页面，可以选择绝对定位细致美化界面
当当网页面.png
网友评论