先给大家展示下效果图，如果感觉还不错，请参考实现代码：
bookstore静态页面代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #right{ float: right; vertical-align: middle; line-height:50px; margin-right:70px; } #right img{ margin-top:11px; } #right a{ margin-left: -4px; text-decoration: none; font-size: 13px; color: #0066FF; } #right a:hover{ color:#909; } #menu{ padding-top: 6px; border-top:3px solid #82B211; height:40px; background-color: #1C3F09; text-align: center; word-spacing: 13px; } #menu a{ color: white; line-height: 40px; text-decoration: none; font-size: 18px; font-weight: bold; } #menu a:hover{ color: #999; } #menu .all{ color:#FAFA00 } #search{ height: 40px; background-color: #B6B684; text-align: right; } #search span{ line-height: 40px; } #search input{ width: 100px; height: 10px; } .img2{ margin-top: 10px; padding-right: 230px; } #contenttop{ margin: 10px auto; font-size: 13px; width:800px; text-align: right; } #contentbody{ margin:-10px auto; border: 1px solid #999999; width:800px; height:800px; } #contentbodybook{ margin:10px; font-size: 18px; } #contentbodybook label{ font-size: 10px; } #img2{ width:760px; margin-top: 10px; } #contentbodybook table img{ width:120px; height:190px; padding-top:38px; margin-left: 50px; } .bookname td{ padding-left:80px ; font-size: 13px; } #page{ text-align: center; } #page a{ text-decoration: none; font-size: 7px; color: #9AAFE5; border: 1px solid #9AAFE5; padding:2px 6px;/*等同于padding:2px 6px 2px 6px;上右下左*/ } #page a:hover{ color:#2B66A5; border: 1px solid #2B66A5; } #footer{ background: #EFEEDC; height:80px; margin-top: 30px; } #footerleft img{ margin-left: 190px; padding-top: 10px; float: left; } #footerright span{ float: left; font-size: 18px; padding-top: 10px; padding-left: 240px; width: 500px; } </style> </head> <body> <div> <div> <img src="https://www.jb51.net/img/logo.png" /> <div> <img src="https://www.jb51.net/img/cart.gif"> <a href="#" >购物车|</a> <a href="#" >帮助中心|</a> <a href="#" >我的账户|</a> <a href="#" >新用户注册</a> </div> </div> <div> <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> <span>Search</span> <input type="text" value="" /> <img src="https://www.jb51.net/img/serchbutton.gif" /> </div> <div> <div> <span>首页 > 旅游 > 图书列表</span> </div> <div> <div> <span><strong>商品目录</strong></span> <hr> <span><strong>计算机类</strong></span> <label>共100种商品</label> <hr> <img src="../img/productlist.gif "/> <table> <tr > <td><img src="https://www.jb51.net/img/bookcover/101.jpg"> </td> <td><img src="https://www.jb51.net/img/bookcover/102.jpg"> </td> <td><img src="https://www.jb51.net/img/bookcover/103.jpg"> </td> <td><img src="https://www.jb51.net/img/bookcover/104.jpg"> </td> </tr> <tr> <td>书名：xxx</td> <td>书名：xxx</td> <td>书名：xxx</td> <td>书名：xxx</td> </tr> <tr> <td>售价：xxx</td> <td>售价：xxx</td> <td>售价：xxx</td> <td>售价：xxx</td> </tr> <tr> <td><img src="https://www.jb51.net/img/bookcover/105.jpg"> </td> <td><img src="https://www.jb51.net/img/bookcover/106.jpg"> </td> <td><img src="https://www.jb51.net/img/bookcover/107.jpg"> </td> <td><img src="https://www.jb51.net/img/bookcover/108.jpg"> </td> </tr> <tr> <td>书名：xxx</td> <td>书名：xxx</td> <td>书名：xxx</td> <td>书名：xxx</td> </tr> <tr> <td>售价：xxx</td> <td>售价：xxx</td> <td>售价：xxx</td> <td>售价：xxx</td> </tr> </table> <div> <br /><br /> <a href="#" >上一页</a> <a href="#" >1</a> <a href="#" >2</a> <a href="#" >3</a> <a href="#" >4</a> <a href="#" >5</a> <a href="#" >6</a> <a href="#" >7</a> <a href="#" >下一页</a> </div> </div> </div> </div> <div> <div> <img src="https://www.jb51.net/img/logo.png"> </div> <div> <span>CONTACT US</span><br/> <span>copyright 2008 © BookStore All Rights RESERVED</span> </div> </div> </div> </body> </html>