<!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;
}
浙公网安备 33010602011771号