图书展示案例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>首页 >旅游 >图书列表</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>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-04-18 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录