实例介绍
【实例简介】当当图书榜
【实例截图】
【实例截图】
【核心代码】
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
* { padding:0px; margin:0px;}
body {font-size:12px; font-family:Verdana,"宋体"; line-height:25px;}
ul, li {list-style:none;}
img {border:0px;}
a {text-decoration:none; color:#7B7B7B;}
a:hover {text-decoration:underline; color:#7B7B7B;}
#container {margin:0px auto; width:960px;}
#header {height:55px;}
#header .logo { float:left; padding-top:5px;}
#header ul { float:right; border:1px #c8ece3 solid; border-bottom:0px; background:#eafffa; height:29px; margin-top:25px; position:relative;}
#header ul li { float:left; padding:0px 10px; line-height:29px;}
#header ul .tip { position:absolute; left:0px; top:-15px;
}
#menu { clear:both; height:36px; overflow:hidden; background:url("图片素材/menuBg.jpg") repeat-x;}
#menu a { display:block; float:left; height:36px; line-height:36px; color:#FFF; padding:0px 16px;}
#bookTop { border:2px #cce9ac solid; width:956px; position:relative; padding-top:90px;}
.title { position:absolute; left:-12px; top:15px; z-index:10;}
#bookTop a { color:#1a66b3; font-size:14px;}
#bookTop strong { color:#8E112B;}
#bookTop span{color:#5ea593; padding-left:10px;}
.bookLeft { float:left; width:560px;}
.bookLeft dt { float:left; width:260px; text-align:center; position:relative;}
.bookLeft dt .first { position:absolute; top:-5px; left:20px;}
.bookLeft dd { float:left; width:280px; padding-top:15px;}
.bookRight { float:left; width:390px;}
.bookRight dl{clear:both;}
.bookRight dt{float:left; width:100px; position:relative;}
.bookRight dt div{position:absolute; top:-10px; left:0px;}
.bookRight dd{float:left; width:285px;}
#footer { color:#848484; text-align:center; clear:both;
}#footer img { vertical-align:middle;}
.clear10 { clear:both; height:10px; overflow:hidden;}
</style>
</head>
<body>
<div id="container">
<div id="header">
<div class="logo"><img src="E:\demo\04何怡文\lesson8\lesson8\01 上机练习素材\练习4：当当图书榜\图片素材\logo.jpg" /></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="E:\demo\04何怡文\lesson8\lesson8\01 上机练习素材\练习4：当当图书榜\图片素材\icon_count.png"ner.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="E:\demo\04何怡文\lesson8\lesson8\01 上机练习素材\练习4：当当图书榜\图片素材\banner.png" />
</div>
<div class="clear10">
</div>
<div id="bookTop">
<div class="title"><img src="E:\demo\04何怡文\lesson8\lesson8\01 上机练习素材\练习4：当当图书榜\图片素材\bg_bang.gif" alt="title" /></div>
<div class="bookLeft"><dl>
<dt><img src="E:\demo\04何怡文\lesson8\lesson8\01 上机练习素材\练习4：当当图书榜\图片素材\book-01.jpg" alt="偷影子的人"/>
<div class="first"><img src="E:\demo\04何怡文\lesson8\lesson8\01 上机练习素材\练习4：当当图书榜\图片素材\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="E:\demo\04何怡文\lesson8\lesson8\01 上机练习素材\练习4：当当图书榜\图片素材\book-02.jpg" alt="看见" /><div class="second"><img src="E:\demo\04何怡文\lesson8\lesson8\01 上机练习素材\练习4：当当图书榜\图片素材\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="E:\demo\04何怡文\lesson8\lesson8\01 上机练习素材\练习4：当当图书榜\图片素材\book-03.jpg" alt="改变孩子先改变自己" /><div class="third"><img src="E:\demo\04何怡文\lesson8\lesson8\01 上机练习素材\练习4：当当图书榜\图片素材\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-2013, All Rights Reserved<img src="E:\demo\04何怡文\lesson8\lesson8\01 上机练习素材\练习4：当当图书榜\图片素材\validate.gif" />京ICP证041189号出版物经营许可证 新出发京批字第直0673号</div></div>
<img src="E:\demo\04何怡文\lesson8\lesson8\01 上机练习素材\练习4：当当图书榜\图片素材\menuBg.jpg">
</body>
</html>
标签： 图书
好例子网口号：伸出你的我的手 — 分享！
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论