图书展示案例css版本

图书展示案例css版本

效果如下:

示例代码如下:

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <meta charset="UTF-8">
  5 <title>图书商城示例</title>
  6 <style type="text/css">
  7     /*----------------------------------*/
  8     .clear {
  9         clear: both;
 10     }
 11     
 12     #top_left {
 13         width: 300px;
 14         float: left;
 15     }
 16     
 17     #top_right {
 18         width: 350px;
 19         float: right;
 20         margin-top: 30px;
 21         font-size: 13px;
 22     }
 23     
 24     #top_right img {
 25         margin-bottom: -5px; 
 26     }
 27     
 28     #top_right a {
 29         text-decoration: none;
 30         color: #06F;
 31         
 32     }
 33     
 34     #top_right a:hover {
 35         color: #909;
 36     }
 37     
 38     /*----------------------------------*/
 39     #menu {
 40         background-color: #1C3F09;
 41         border-top: 5px solid #82B211;
 42         padding: 10px 0px;
 43         text-align: center;
 44     }
 45     
 46     #menu a {
 47         margin: 0px 10px;
 48         color: #ffffff;
 49         text-decoration: none;
 50         font-weight: bold; 
 51         /* font-family: 隶书; */
 52         font-size: 20px;
 53     }
 54     
 55     #menu a:hover {
 56         color: #999;
 57     }
 58     
 59     #menu .all {
 60         color: yellow;
 61     }
 62     
 63     /*----------------------------------*/
 64     #search {
 65         background-color: #B6B684;
 66         padding: 8px 0px;
 67         text-align: right;
 68     }
 69     
 70     #search input[type='image'] {
 71         /* padding-right: 250px; */
 72         margin-right: 100px;
 73         margin-bottom: -4px;
 74     }
 75     
 76     #search input[type='text'] {
 77         height: 16px;
 78         border: 1px soloid #999;
 79     }
 80     
 81     /*----------------------------------*/
 82     #content {
 83         width: 900px;
 84         margin: 5px auto 15px /*auto 表示div居中*/
 85     }
 86     
 87     #content_top {
 88         text-align: right;
 89         font-size: 13px;
 90     }
 91     
 92     #content_buttom {
 93         border: 1px solid #999;
 94         boakground-color: #FCFDEF;
 95         padding: 10px 15px;
 96     }
 97     
 98     #content_buttom h1{
 99         font-size: 15px;
100         display: inline;
101     }
102     
103     #content_buttom span{
104         font-size: 10px;
105     }
106     
107     #productlist_img img {
108         width: 100%;
109     }
110     
111     .book {
112         float: left;
113         width: 25%;
114         text-align: center;
115         padding: 10px 0px;
116     }
117     
118     .bookimg img {
119         width: 130px;
120         height: 196px;
121     }
122     
123     #jumpPage  {
124         text-align: center;
125         margin: 10px;
126     }
127     
128     #jumpPage a {
129         border: 1px solid #9AAFE5;
130         padding: 2px 6px;
131         text-decoration: none;
132         color: #9AAFE5;
133     }
134     
135     #jumpPage a:hover {
136         border: 1px solid #2B66A5;
137         color: #2B66A5;
138     }
139     
140     .current {
141         background-color: blue;
142     }
143     
144     /*----------------------------------*/
145     #bottom {
146         background-color: #EFEEDC;
147         height: 60px;
148         padding: 10px 0px;
149     }
150     
151     #bottom_left {
152         width: 400px;
153         float: left;
154         margin-left: 200px;
155     }
156     
157     #bottom_right {
158         width: 500px;
159         float: left;
160         line-height: 30px; /*行高*/
161     }
162     
163 </style>
164 </head>
165 <body>
166     <div id="page">
167         <div id="top">
168             <div id="top_left">
169                 <img alt="" src="images/logo.png">
170             </div>
171             <div id="top_right">
172                 <img alt="" src="images/cart.gif">
173                 <a href="#">购物车</a>|
174                 <a href="#">帮助中心</a>|
175                 <a href="#">我的账户</a>|
176                 <a href="#">新用户注册</a>|
177             </div>
178         </div>
179         <div class="clear"></div>
180         <div id="menu">
181             <a href="#">文学</a>
182             <a href="#">生活</a>
183             <a href="#">计算机</a>
184             <a href="#">外语</a>
185             <a href="#">经管</a>
186             <a href="#">励志</a>
187             <a href="#">社科</a>
188             <a href="#">少儿</a>
189             <a href="#">艺术</a>
190             <a href="#">原版</a>
191             <a href="#">科技</a>
192             <a href="#">考试</a>
193             <a href="#">生活百科</a>
194             <a class="all" href="#">全部商品目录</a>
195         </div>
196         <div id="search">
197             <span>Search</span>
198             <input type="text" />
199             <input type="image" src="images/searchbutton.gif" />
200         </div>
201         <div id="content">
202             <div id="content_top">
203                 <span>首页&nbsp;&gt;旅游 &nbsp;&gt;图书列表</span>
204             </div>
205             <div id="content_buttom">
206                 <h1>商品目录</h1>
207                 <hr/>
208                 <h1>计算机类</h1>
209                 <span>共100种商品</span>
210                 <hr/>
211                 <div id="list">
212                     <div id="productlist_img">
213                         <img alt="" src="images/productlist.gif">
214                     </div>
215                     <div id="booklist">
216                         <div class="book">
217                             <div class="book_img">
218                                 <img alt="" src="bookcover/101.jpg">
219                             </div>
220                             <div class="book_intr">
221                                 <span>书名:xxx</span><br/>
222                                 <span>售价:xxx</span><br/>
223                             </div>
224                         </div>
225                         <div class="book">
226                             <div class="book_img">
227                                 <img alt="" src="bookcover/102.jpg">
228                             </div>
229                             <div class="book_intr">
230                                 <span>书名:xxx</span><br/>
231                                 <span>售价:xxx</span><br/>
232                             </div>
233                         </div>
234                         <div class="book">
235                             <div class="book_img">
236                                 <img alt="" src="bookcover/103.jpg">
237                             </div>
238                             <div class="book_intr">
239                                 <span>书名:xxx</span><br/>
240                                 <span>售价:xxx</span><br/>
241                             </div>
242                         </div>
243                         <div class="book">
244                             <div class="book_img">
245                                 <img alt="" src="bookcover/104.jpg">
246                             </div>
247                             <div class="book_intr">
248                                 <span>书名:xxx</span><br/>
249                                 <span>售价:xxx</span><br/>
250                             </div>
251                         </div>
252                         <div class="book">
253                             <div class="book_img">
254                                 <img alt="" src="bookcover/105.jpg">
255                             </div>
256                             <div class="book_intr">
257                                 <span>书名:xxx</span><br/>
258                                 <span>售价:xxx</span><br/>
259                             </div>
260                         </div>
261                         <div class="book">
262                             <div class="book_img">
263                                 <img alt="" src="bookcover/106.jpg">
264                             </div>
265                             <div class="book_intr">
266                                 <span>书名:xxx</span><br/>
267                                 <span>售价:xxx</span><br/>
268                             </div>
269                         </div>
270                         <div class="book">
271                             <div class="book_img">
272                                 <img alt="" src="bookcover/107.jpg">
273                             </div>
274                             <div class="book_intr">
275                                 <span>书名:xxx</span><br/>
276                                 <span>售价:xxx</span><br/>
277                             </div>
278                         </div>
279                         <div class="book">
280                             <div class="book_img">
281                                 <img alt="" src="bookcover/101.jpg">
282                             </div>
283                             <div class="book_intr">
284                                 <span>书名:xxx</span><br/>
285                                 <span>售价:xxx</span><br/>
286                             </div>
287                         </div>
288                         <div class="clear"></div> <!--清除浮动效果 -->
289                         <div id="jumpPage">
290                             <a href="#">上一页</a>
291                             <a class="current" href="#">1</a>
292                             <a href="#">2</a>
293                             <a href="#">3</a>
294                             <a href="#">4</a>
295                             <a href="#">5</a>
296                             <a href="#">6</a>
297                             <a href="#">7</a>
298                             <a href="#">8</a>
299                             <a href="#">9</a>
300                             <a href="#">下一页</a>
301                         </div>
302                     </div>
303                 </div>
304             </div>
305         </div>
306         <div id="bottom">
307             <div id=bottom_left>
308                 <img alt="" src="images/logo.png">
309             </div>
310             <div id=bottom_right>
311                 <span>CONTACT US</span><br/>
312                 <span>copyright 2008 &copy; BookStore All Rights RESERVED</span>
313             </div>
314         </div>
315     </div>
316 </body>
317 </html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

扫码关注云+社区

领取腾讯云代金券