html文件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>购书网站</title>
<link type="text/css" rel="stylesheet" href="css/bookmain.css" />
<link type="text/css" rel="stylesheet" href="css/bookreset.css" />
</head>
<body>
<div class="header comWidth">
<i></i>
<div class="header_top clearfix">
<div class="logo_b fl">
<img src="img/001.jpg" alt="图片" />
</div>
<div class="logo_c fl">
<img src="img/002.jpg" alt="图片" />
</div>
<ul class="nav fl">
<li><a href="#">首页</a></li><li>|</li>
<li><a href="#">帮助</a></li><li>|</li>
<li><a href="#">联系我们</a></li><li>|</li>
<li><a href="#">我的购物车</a>:</li>
</ul>
<div class="text fr">
<input type="text" class="text_text fl" />
<input type="button" value="搜 索" class="text_btn fr" />
</div>
</div>
<i></i>
<div class="header_select clearfix">
<div class="header_selectb fl header_img">
<p>书籍种类:</p>
<select name="select1">
<option value="wo">请选择书籍的种类</option>
<option value="wo">军事</option>
<option value="ji">计算机</option>
<option value="hostory">历史</option>
</select>
</div>
<div class="header_selectb fl header_img">
<p>书籍种类:</p>
<select name="select1">
<option value="wo">请选择书籍的种类</option>
<option value="wo">军事</option>
<option value="ji">计算机</option>
<option value="hostory">历史</option>
</select>
</div>
<div class="header_selectb fl">
<p>书籍种类:</p>
<select name="select1">
<option value="wo">请选择书籍的种类</option>
<option value="wo">军事</option>
<option value="ji">计算机</option>
<option value="hostory">历史</option>
</select>
<input type="button" value="" class="select_btn" />
</div>
</div>
<div class="header_last"> <img alt="tupian" src="img/redjiao.png"/></div>
</div>
<div class="body comWidth clearfix">
<div class="body_nav fl">
<div class="body_shopkind">
<p><img src="img/litlejiao.png" alt="图片" /></p>
<ul class="body_shopkindul">
<li><i></i><a href="#">军事类</a> </li>
<li><i></i><a href="#">文学类</a> </li>
<li><i></i><a href="#">经济管理类</a> </li>
<li><i></i><a href="#">生活</a> </li>
<li><i></i><a href="#">艺术类</a> </li>
<li><i></i><a href="#">儿童</a> </li>
<li><i></i><a href="#">计算机/软件</a> </li>
<li><i></i><a href="#">教育</a> </li>
<li><i></i><a href="#">特色类别</a> </li>
</ul>
</div>
<div class=" body_ranking">
<p><img src="img/xiaoshou.png" alt="图片" /></p>
<p class="book"><img src="img/007.jpg" alt="图片" /></p>
<ul class="body_shopkindul">
<li><i>1.</i><a href="#">军事类</a> </li>
<li><i>2.</i><a href="#">文学类</a> </li>
<li><i>3.</i><a href="#">经济管理类</a> </li>
<li><i>4.</i><a href="#">生活</a> </li>
<li><i>5.</i><a href="#">艺术类</a> </li>
<li><i>6.</i><a href="#">儿童</a> </li>
<li><i>7.</i><a href="#">计算机/软件</a> </li>
<li><i>8.</i><a href="#">教育</a> </li>
<li><i>9.</i><a href="#">特色类别</a> </li>
</ul>
</div>
</div>
<div class="body_shopshow fl">
<div class="body_shopshow_top clearfix">
<div class="goodbook fl">
<p><img alt="图片" src="img/middjiao.png" /></p>
<div class="goodbook_display fl">
<a href="#"> <img alt="图片" src="img/003.jpg" /></a>
</div>
<div class="goodbook_display2 fl">
<p class="name">我是麦莉</p>
<p class="where">出版社：上海远东出版社</p>
<p class="cost">价格： 20.00元（7.1折）</p>
<a href="#"><i class="buy">购买</i></a><i>|</i><a href="#"><i class="look">放大预览</i></a>
</div>
</div>
<i class="middle fl"></i>
<div class="newbook fl">
<p><img alt="图片" src="img/xingshu.png" /></p>
<div class="goodbook_display fl">
<a href="#"> <img alt="图片" src="img/006.jpg" /></a>
</div>
<div class="goodbook_display2 fl">
<p class="name">罂粟花</p>
<p class="where">出版社： 江西南昌出版社</p>
<p class="cost">价格： 65.80元（7.1折）</p>
<a href="#"><i class="buy">购买</i></a><i>|</i><a href="#"><i class="look">放大预览</i></a>
</div>
</div>
</div>
<p class="henxian"><img alt="图片" src="img/xuxian2.png" /> </p>
<div class="body_shopshow_last clearfix" >
<div class="goodbook fl">
<div class="goodbook_display fl">
<a href="#"> <img alt="图片" src="img/004.jpg" /></a>
</div>
<div class="goodbook_display2 fl">
<p class="name">30岁小美女幸福说</p>
<p class="where">出版社：上海远东出版社</p>
<p class="cost">价格： 30.00元（8.0折）</p>
<a href="#"><i class="buy">购买</i></a><i>|</i><a href="#"><i class="look">放大预览</i></a>
</div>
</div>
<i class="middle fl"></i>
<div class="newbook fl">
<div class="goodbook_display fl">
<a href="#"> <img alt="图片" src="img/005.jpg" /></a>
</div>
<div class="goodbook_display2 fl">
<p class="name">花卉圣经</p>
<p class="where">出版社： 江西南昌出版社</p>
<p class="cost">价格： 65.80元（7.1折）</p>
<a href="#"><i class="buy">购买</i></a><i>|</i><a href="#"><i class="look">放大预览</i></a>
</div>
</div>
</div>
<div class="body_propose clearfix">
<div class="author fl">
<p>热门作者</p>
<div class="author_name">
<a href="#">鲁迅</a><i>|</i>
<a href="#">巴金</a><i>|</i>
<a href="#">老舍</a><i>|</i>
<a href="#">冰心</a><i>|</i>
<a href="#">贾平凹</a><i>|</i>
<a href="#">曹雪芹</a><i>|</i>
<a href="#">余秋雨</a><i>|</i>
<a href="#">更多>></a>
</div>
</div>
<div class="propose_book fl clearfix">
<p>网友推荐书</p>
<div class="propose_bookl fl">
<img src="img/008.jpg" />
</div>
<div class="propose_bookr fr">
<p>时尚界的美丽之说</p>
<p class=" propose_bookr_shuo">说明书......</p>
<i>|</i><a href="#">more</a>
</div>
</div>
<div class="propose_book fl clearfix">
<p>网友推荐书</p>
<div class="propose_bookl fl">
<img src="img/009.jpg" />
</div>
<div class="propose_bookr fr">
<p>时尚界的美丽之说</p>
<p class=" propose_bookr_shuo">说明书......</p>
<i>|</i><a href="#">more</a>
</div>
</div>
<div class="body_tu">
<img src="img/bigjiao.png" />
</div>
<div class="eat">食色男女： 当红主持人戴军爱情小品文章</div>
<div class="eat_content">
<div class="eat_content_tu fl">
<img alt="图片" src="img/010.jpg" />
</div>
<p class="eat_contentc">
《食色男女:当红主持人戴军爱情小品文》是当红主持人戴军的一本小品文文集。内中涉及友情、亲情与爱情其关于两性话题的故事 ，为圈内外读者所深爱。关于自我，他赤裸裸地剖白，又有对身边明星的描摹，揭示了众生百态、恋恋红尘中的男欢女爱的本质， 让男人看了害怕，让女人看了感动和深思。<a href="#">点击查看《食色男女:当红主持人戴军爱情小品文》更多内容>> </a>
</p>
<br />
<p class="eat_contentc1"><a href="#">仓央嘉措诗传￥21.40</a></p>
<p class="eat_contentc1"><a href="#">爱的一百个提醒￥18.80</a></p>
<p class="eat_contentc1"><a href="#">人在胡同第几槐￥14.00</a></p>
</div>
<div class="eat">史记笺证(全套10册)(全新修改版)</div>
<div class="eat_content">
<div class="eat_content_tu fl">
<img alt="图片" src="img/011.jpg" />
</div>
<p class="eat_contentc">
《史记笺证》内容为：《史记》共一百三十篇，五十二万字，记事上起轩辕黄帝，中经唐、虞、夏、商、周、秦，下迄汉武帝太初年 间（前104—前101），共写了两千多年的历史。<a href="#"> 点击查看《史记笺证》更多内容>> </a>
</p>
<br />
<p class="eat_contentc1"><a href="#">仓央嘉措诗传￥21.40</a></p>
<p class="eat_contentc1"><a href="#">爱的一百个提醒￥18.80</a></p>
<p class="eat_contentc1"><a href="#">人在胡同第几槐￥14.00</a></p>
</div>
</div>
</div>
</div>
<div class="footer comWidth">
<div class="footer_lump">
<div class="lump_one fl">
<ul class="lump_one_ul">
<li class="lump_one_wo">我的订单</li>
<li>.<a href="#"><i> 如何下订单</i></a></li>
<li>.<a href="#"><i> 跟踪最近的订单</i></a></li>
<li>.<a href="#"><i> 修改与删除订单</i></a></li>
</ul>
</div>
<div class="lump_one fl">
<ul class="lump_one_ul">
<li class="lump_one_wo">我的订单</li>
<li>.<a href="#"><i> 如何下订单</i></a></li>
<li>.<a href="#"><i> 跟踪最近的订单</i></a></li>
<li>.<a href="#"><i> 修改与删除订单</i></a></li>
</ul>
</div>
<div class="lump_one fl">
<ul class="lump_one_ul">
<li class="lump_one_wo">我的订单</li>
<li>.<a href="#"><i> 如何下订单</i></a></li>
<li>.<a href="#"><i> 跟踪最近的订单</i></a></li>
<li>.<a href="#"><i> 修改与删除订单</i></a></li>
</ul>
</div>
<div class="lump_one fl">
<ul class="lump_one_ul">
<li class="lump_one_wo">我的订单</li>
<li>.<a href="#"><i> 如何下订单</i></a></li>
<li>.<a href="#"><i> 跟踪最近的订单</i></a></li>
<li>.<a href="#"><i> 修改与删除订单</i></a></li>
</ul>
</div>
<div class="lump_one fl">
<ul class="lump_one_ul">
<li class="lump_one_wo">我的订单</li>
<li>.<a href="#"><i> 如何下订单</i></a></li>
<li>.<a href="#"><i> 跟踪最近的订单</i></a></li>
<li>.<a href="#"><i> 修改与删除订单</i></a></li>
</ul>
</div>
</div>
<div class="footer_tuone"></div>
<div class="footer_tutwo"></div>
<div class="footer_finsh">
<p><a href="#">首页</a><i>|</i><a href="#">帮助</a><i>|</i><a href="#">我的帐户</a><i>|</i><a href="#">我的购物车</a><i>|</i><a href="#">广告服务</a><i>|</i><a href="#"> 合作伙伴</a><i>|</i><a href="#">招聘</a><i>|</i><a href="#">联盟</a></p>
<p>Copyright © 1999 - 2009 Joyo Amazon All Rights Reserved</p>
</div>
</div>
</body>
</html>
css文件bookmain.css
@charset "utf-8";
/* CSS Document */
/*公用的*/
.comWidth{margin-left:auto; margin-right:auto; width:900px;}
/*网页头部的上部分*/
.header i{height:10px; display:block; background-color:#CCC; width:100%;}
.header_top{ height:74px; }
.logo_b{margin-top:20px; margin-left:20px;}
.logo_c{margin-top:10px; margin-left:10px;}
.nav{font-family:"宋体"; line-height:74px; margin-left:100px; padding:0 25px; background:url(../img/che1.png) right center no-repeat;}
.nav li{float:left; margin:0 5px;}
.text{margin-right:100px; margin-top:28px;}
.text_text{height:18px; width:152px; line-height:18px/9; background-color:#FFF; border:#CCC solid 1px; padding:0 5px; }
.text_btn{height:18px; width:40px; border:#CCC solid 1px; background-color:#999; margin-left:5px; font-size:9px; font-family:"MicrosoftYaHei", "微软雅黑" ;}
.nav a:hover{color:#F00; text-decoration:underline;}
/*网页头部的下部分的搜索区域*/
.header_select{background-color:#A60000; width:100%; overflow:hidden; margin-top:5px;}
.header_selectb{width:299px; height:68px; font-family:"宋体"; }
.header_img{background:url(../img/xuxian3.png) right center no-repeat;}
.header_selectb p{font-size:14px; margin-left:30px; margin-top:10px; color:#FFF;}
.header_selectb select{ display:block; width:166px; height:20px; background-color:#FFF; border:#CCC solid 1px; margin-left:30px; position:relative;}
.select_btn{width:40px; height:18px; position:absolute; margin-left:225px; margin-top:-20px; background:url(../img/buttom.png) center center no-repeat;}
.header_last img{width:901px; height:10px;}
/*商品列表展示*/
.body_nav{width:183px; margin-left:30px; margin-top:10px; overflow:hidden;}
.body_shopkind{background-color:#F1EFE3; height:280px; border:#CCC solid 1px;}
.body_shopkind img{height:29px; width:186px;}
.body_shopkind i{background:url(../img/sanjiao.png) left center no-repeat; display:inline-block; float:left; height:12px; width:8px; margin-top:5px; margin-right:8px; }
.body_shopkindul li{height:22px; width:140px; line-height:22px; border-bottom:#ccc dotted 2px; font-family:"宋体" ; font-size:14px;}
.body_nav a{color:#000;}
.body_nav a:hover{color:blue; text-decoration:underline;}
/*商品列表下部分*/
.body_ranking{height:545px; margin-top:10px; background-color:#F1EFE3; border:#CCC solid 1px; }
.body_ranking li{width:150px;}
.body_ranking i{font-size:12px; font-family:"MicrosoftYaHei", "微软雅黑"; margin-top:5px; margin-right:10px; margin-left:12px;}
.book{text-align:center; margin:20px 0; }
/*商品展示部分*/
.body_shopshow{margin-top:10px; margin-left:11px; width:600px;}
.goodbook{width:250px;}
.goodbook_display{margin:5px 5px;}
.name{margin-top:8px; margin-bottom:5px; color:#ABA05F; font-weight:bold;}
.where{color:#F00; border-bottom:#ccc dotted 2px;}
.cost{ border-bottom:#ccc dotted 2px; padding:20px 0 10px 0;}
.goodbook_display2 i{margin-top:10px; font-family:"宋体";font-style:normal; color:#ABA05F;}
.buy{background:url(../img/che1.png)left center no-repeat; text-indent:20px; display:inline-block;}
.look{background:url(../img/da.png) left center no-repeat; text-indent:25px; display:inline-block; }
.middle{background:url(../img/xuxian.png) left center no-repeat; display:inline-block; width:30px; height:135px; margin:0 10px;}
.henxian{margin:0 100px;}
.body_shopshow_last{margin:20px 0px;}
/*商品推荐部分*/
.body_propose{ width:600px; height:110px; border-top:#CCC dotted 2px; }
.author p{color:#F00; margin:5px 5px; font-weight:bold;}
.author_name{width:115px; height:108px; margin:5px 5px;}
.author_name i{font-style:normal; color:#ABA05F;}
.author_name a{color:#ABA05F;}
.author_name a:hover{color:blue;}
.propose_book{background-color:#EDEDED; width:200px; height:108px;}
.propose_book p{color:#F00; margin-top:5px; margin-left:20px; font-weight:bold; font-size:14px;}
.propose_bookl{margin-top:5px; margin-left:15px; }
.propose_bookr{margin-right:20px;}
.propose_bookr p{color:#ABA05F; font-size:10px; font-weight:normal;}
.propose_bookr_shuo{border-bottom:#CCC dotted 2px; padding-bottom:10px;}
.propose_bookr i{background:url(../img/xin.png) left center no-repeat; display:inline-block; font-weight:bold; font-size:16px; color:#ABA05F; width:50px; height:20px; text-indent:50px; font-style:normal; margin-left:20px ; margin-top:10px;}
.propose_bookr a{color:#ABA05F; font-weight:bold; margin-left:15px;}
.propose_bookr a:hover{color:blue; text-decoration:underline;}
/*中间插入的图片 后窗*/
.body_tu img{width:600px; height:20x;}
/*食色男女*/
.eat{background-color:#EDEDED; width:600px; height:25px; line-height:25px; color:#F00; font-weight:bold; text-indent:10px; margin-top:20px;}
.eat_content_tu{ margin-left:10px; margin-right:5px;}
.eat_contentc{margin-top:20px; text-indent:20px; color:#ABA05F;}
.eat_contentc a{color:#F00;}
.eat_contentc1 a{color:#F00;}
.eat_contentc a:hover{color:yellow; text-decoration:underline;}
.eat_contentc1 a:hover{color:yellow; text-decoration:underline;}
/*页面底部方格块区域*/
.footer_lump{width:100%; height:131px; border:#000 solid 1px; margin-top:10px;}
.lump_one{margin:20px 40px;}
.lump_one_wo{font-size:14px; font-weight:bold; line-height:20px; height:20px; color:#000;}
.lump_one li{font-weight:bold; margin:5px 0; }
.lump_one i{font-style:normal; color:blue; font-weight:normal; text-decoration:underline; }
.lump_one_ul i:hover{color:#0C0; text-decoration:none;}
/*页面最底部*/
.footer_tuone{width:100%; margin-top:10px; height:10px; background-color:#999;}
.footer_tutwo{width:100%; margin-top:2px; height:10px; background-color:#900;}
.footer_finsh{width:100%; height:100px; text-align:center; padding-top:10px;}
.footer_finsh i{font-style:normal; margin:0 5px; color:#999;}
.footer_finsh p{color:#999; margin:5px 0;}
.footer_finsh a:hover{color:red; text-decoration:underline;}
css文件bookreset.css
@charset "utf-8";
/* CSS Document */
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,dl,dt,dd,input{margin:0;padding:0;}
body{font-size:12px;}
img{border:none;}
li{list-style:none;}
input,select,textarea{outline:none;border:none;background:none;}
textarea{resize:none;}
a{text-decoration:none;color:#656565;}/*这个color是将所以的超链接的字体都变成该颜色*/
/*清除浮动*/
.clearfix:after{content:"";display:block;clear:both;}
.clearfix{zoom:1;}
.fl{float:left;}
.fr{float:right;}/*直接在表签class名空格一个后加他，可以进行左右浮动，更加省事，不用一个个的写进行左右浮动*/