<!DOCTYPE html> <html> <head> <title>商品案列展示</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="Seven.css"> </head> <body> <div id="page"> <div id="top"> <div id="top_left"> <img alt="" src="images/logo.png"> </div> <div id="top_right"> <img alt="" src="images/cart.gif"> <a href="#">购物车</a>| <a href="#">帮助中心</a>| <a href="#">我的账户</a>| <a href="#">新用户注册</a>| </div> </div> <div class="clear"></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 class="all" href="#">全部商品目录</a> </div> <div id="search"> <span>Search</span> <input type="text" name=""> <input type="image" src="images/serchbutton.gif"> </div> <div id="content"> <div id="content_top"> <span><a href="#">首页</a> > 旅游 > 图书列表</span> </div> <div id="content_bottom"> <h1>商品目录</h1> <hr> <h1>计算机类</h1> <span>共100种商品</span> <hr> <div id="productlist"> <div id="productlist_img"> <img src="images/productlist.gif"> </div> <div id="booklist"> <div class="book"> <div class="bookimg"> <img src="bookcover/101.jpg"> </div> <div class="bookIntr"> <span>书名：XXX</span><br> <span>售价：XXX</span> </div> </div> <div class="book"> <div class="bookimg"> <img src="bookcover/102.jpg"> </div> <div class="bookIntr"> <span>书名：XXX</span><br> <span>售价：XXX</span> </div> </div> <div class="book"> <div class="bookimg"> <img src="bookcover/103.jpg"> </div> <div class="bookIntr"> <span>书名：XXX</span><br> <span>售价：XXX</span> </div> </div> <div class="book"> <div class="bookimg"> <img src="bookcover/104.jpg"> </div> <div class="bookIntr"> <span>书名：XXX</span><br> <span>售价：XXX</span> </div> </div> <div class="book"> <div class="bookimg"> <img src="bookcover/105.jpg"> </div> <div class="bookIntr"> <span>书名：XXX</span><br> <span>售价：XXX</span> </div> </div> <div class="book"> <div class="bookimg"> <img src="bookcover/106.jpg"> </div> <div class="bookIntr"> <span>书名：XXX</span><br> <span>售价：XXX</span> </div> </div> <div class="book"> <div class="bookimg"> <img src="bookcover/107.jpg"> </div> <div class="bookIntr"> <span>书名：XXX</span><br> <span>售价：XXX</span> </div> </div> <div class="book"> <div class="bookimg"> <img src="bookcover/101.jpg"> </div> <div class="bookIntr"> <span>书名：XXX</span><br> <span>售价：XXX</span> </div> </div> </div> <div class="clear"></div> <div id="jumpPage"> <a href="#">上一页</a> <a class="current" 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 id="bottom"> <div id="bottom_left"> <img src="images/logo.png"> </div> <div id="bottom_right"> <span>CONTACT US</span> <br> <span>copyright 2008 ©BookStore All Rights RESERVED</span> </div> </div> </div> </body> </html>
#top_left{ width: 300px; float: left; margin-left: 100px; } #top_right{ width:450px; float: right; margin-top: 20px; } #top_right a{ font-size: 15px; text-decoration:none; color:#06f; } #top_right a:hover{ color:#909; } #top_right img{ margin-bottom: -5px; } .clear{ clear: both; } #menu{ background-color: #1c3f09; border-top: 5px solid #82B211; padding: 10px 0px; text-align: center; } #menu a{ font-size: 15px; color: #ffffff; text-decoration: none; margin:0px 8px; font-weight: bold; } #menu a:hover{ color: #999; } #menu .all{ color: #ffff00; } #search{ background: #B6B684; padding:7px 0px; text-align:right; } #search input[type="image"]{ margin-right: 220px; margin-bottom:-5px; } #search input[type="text"]{ height: 16px; border:1px solid #999; } #content{ width: 900px; /*border: 1px solid #999;*/ margin: 8px auto 15px; } #content_top{ text-align: right; font-size: 13px; } #content_top a{ font-size: 14px; color: #551A8B; text-decoration: none; } #content_top a:hover{ color: #909; } #content_bottom{ border: 1px solid #999; background-color: #FCFDEF; padding: 10px 15px; } #content_bottom h1{ font-size: 15px; display: inline; } #content_bottom span{ font-size: 14px; } #productlist_img img{ width: 100%; } .book{ float: left; width: 25%; text-align: center; margin: 10px 0px; } .bookimg img{ width:130; height:196px; } #jumpPage{ text-align: center; margin: 10px; } #jumpPage a{ padding: 1px 7px; border: 1px solid #9AAFE5; text-decoration: none; color: #9AAFE5; } .current{ background-color: #580029; } #jumpPage a:hover{ color: #2B66A5; border: 1px solid #2B66A5; } #bottom{ background-color: #EFEEDC; height: 60px; padding: 10px 0px; } #bottom_left{ width: 400px; float: left; margin-left: 200px; } #bottom_right{ width: 500px; float: right; margin-right: 50px; font-size: 15px; line-height: 26px; }