图书展示案例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>首页 >旅游 >图书列表</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 © BookStore All Rights RESERVED</span> 313 </div> 314 </div> 315 </div> 316 </body> 317 </html>