初级学习案例：
实现结果：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>
<body>
<div class="header w">
<div class="tu1">
<img src="图书榜/图片素材/logo.jpg" alt="" width="120px" height="60px">
</div>
<div class="nav">
<div class="header_right">
<img src="图书榜\图片素材\icon_count.png" width="70px" height="25px">
</div>
<ul>
<li>
<a href="#">尾品汇</a>
</li>
<li><a href="#">当当优品</a></li>
<li><a href="#">数字馆</a></li>
<li><a href="#">都看阅器</a></li>
</ul>
</div>
</div>
<!-- 菜单 -->
<div class="nav1">
<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="tu2">
<img src="图书榜/图片素材/banner.png" height="100px" width="100%">
</div>
<div class="tbody">
<p id="tu3">
<img src="图书榜/图片素材/bg_bang.gif">
</p>
<div class="ttext">
<div class="shu">
<div class="tu4">
<img src="图书榜/图片素材/bookNo1.gif">
</div>
</div>
<div class="wzi">
<p class="blue">偷影子的人</p>
<p>作 者：[法] 马克·李维（Marc Levy）著,段韵灵 译<br>
出版社：湖南文艺出版社<br>
当当价：<span class="red">￥ 17.90</span><br>
不知道姓氏的克蕾儿。这就是你在我生命里的角色，我童年时的小女孩，今日蜕变成了女人，一段青梅竹马的回忆，一个时间之神没有应允的愿望。 一个老是受班上同学欺负的瘦弱小男孩，因为拥有一种特殊能力而强大：他能“偷别人的影子”，因而能看见他
</p>
</div>
<div class="wzi1">
<p class="wzi1-1">
<div class="beij1">
<div class="float">
<img src="图书榜/图片素材/bookNo2.gif"></div></div>
<p class="blue">看见(央视知名记者、主持人柴静：十年个人成长的告白，中国社会变迁的备忘 </p>
作 者：柴静 著<br>
出版社：广西师范大学出版社<br>
<span class="red"> ￥ 29.40</span><span class="seagreen">7.4折</span>
</p>
<p class="wzi1-1">
<div class="beij2">
<div class="float">
<img src="图书榜/图片素材/bookNo3.gif"></div></div>
<p class="blue">改变孩子先改变自己 </p>
作 者：贾容韬 贾毅 著<br>
出版社：作家出版社<br>
<span class="red"> ￥ 22.20</span> <span class="seagreen">7.4折</span>
</p>
</div>
</div>
</div>
<div class="footer">Copyright (C) 当当网 2004-2017, All Rights Reserved <img src="图书榜/图片素材/validate.gif" alt="#" />京ICP证041189号出版物经营许可证 新出发京批字第直0673号</div>
</body>
</html>由于比较小白，所作的还比较菜，很多效果有更好的标签属性来实现。
30万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
