第一节首页布局案列

index.html 代码

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  3 <head>
  4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  5     <title>天天生鲜-首页</title>
  6     <link rel="stylesheet" type="text/css" href="css/reset.css">
  7     <link rel="stylesheet" type="text/css" href="css/main.css">
  8 </head>
  9 <body>
 10     <!-- 页面顶部 -->
 11     <div class="head_con">
 12         <div class="header">
 13             <div class="welcome fl">欢迎来到天天生鲜!</div>            
 14             <div class="user_con fr">
 15                 <ul class="login_btns fl">
 16                     <li><a href="#">登录</a></li>
 17                     <li><span>|</span></li>
 18                     <li><a href="#">注册</a></li>
 19                 </ul>
 20                 <div class="user_info fl">
 21                     欢迎您：<em>张山</em>
 22                 </div>
 23                 <ul class="user_btns fl" >
 24                     <li><span>|</span></li>
 25                     <li><a href="#">我的购物车</a></li>
 26                     <li><span>|</span></li>
 27                     <li><a href="#">我的订单</a></li>            
 28                 </ul>
 29             </div>
 30         </div>        
 31     </div>
 32 
 33     <!-- logo、搜索框、购物车 -->
 34     <div class="center_con">
 35         <a href="index.html" class="logo fl"><img src="image/logo.png" alt="天天生鲜网站logo"></a>
 36         <div class="search_con fl">
 37             <form>
 38                 <input type="text" name="" class="input_txt fl" placeholder="搜索">  
 39                 <!-- placeholder="搜索" 在输入栏里默认显示搜索两个字,这里的fl是为了去掉搜索框和按键之间的空隙，因为两者类似内联系-->
 40                 <input type="submit" name="" class="input_sub fl" value="搜索">
 41             </form>
 42         </div>
 43         <div class="chart_con fr">
 44             <a href="#" class="chart_link fl">我的购物车</a>
 45             <div class="chart_num fl">5</div>
 46         </div>
 47     </div>
 48 
 49     <!-- 主菜单 -->
 50     <div class="main_menu_con">
 51         <div class="center_con2">
 52             <h2>全部商品分类</h2>
 53             <ul>
 54                 <li><a href="#">首页</a></li>
 55                 <li><a href="">手机生鲜</a></li>
 56                 <li><a href="">抽奖</a></li>
 57             </ul>
 58         </div>
 59     </div>
 60 
 61     <!-- 二级菜单、幻灯片、广告 -->
 62     <div class="center_con3">
 63         <ul class="sub_menu_con fl">
 64             <li><a href="">新鲜水果</a></li>
 65             <li><a href="" class="icon1">新鲜水果</a></li>
 66             <li><a href="" class="icon2">新鲜水果</a></li>
 67             <li><a href="" class="icon3">新鲜水果</a></li>
 68             <li><a href="" class="icon4">新鲜水果</a></li>
 69             <li><a href="" class="icon5">新鲜水果</a></li>
 70         </ul>
 71         <div class="slide_con fl">
 72             <ul class="slide">
 73                 <li><a href="#"><img src="image/slide.png" alt="幻灯片" /></a></li>
 74                 <li><a href="#"><img src="image/slide1.png" alt="幻灯片" /></a></li>
 75                 <li><a href="#"><img src="image/slide.png" alt="幻灯片" /></a></li>
 76                 <li><a href="#"><img src="image/slide.png" alt="幻灯片" /></a></li>
 77                 <li><a href="#"><img src="image/slide.png" alt="幻灯片" /></a></li>
 78                 <li><a href="#"><img src="image/slide.png" alt="幻灯片" /></a></li>
 79             </ul>
 80 
 81             <div class="prev"></div>
 82             <div class="next"></div>
 83 
 84             <ul class="points">
 85                 <li class="active"></li>
 86                 <li></li>
 87                 <li></li>
 88                 <li></li>
 89                 <li></li>
 90                 <li></li>
 91             </ul>
 92 
 93         </div>
 94         <div class="advs fl">
 95             <a href="#"><img src="image/adv01.jpg" alt="广告图片" /></a>
 96             <a href="#"><img src="image/adv02.jpg" alt="广告图片" /></a>
 97         </div>
 98     </div>
 99 
100     <!-- 二级菜单、幻灯片、广告 -->
101     <div class="common_model">
102         <div class="common_title_con">
103             <h3>新鲜水果</h3>
104 
105             <ul>
106                 <li><a href="">加州提子</a></li>
107                 <li><a href="">加州提子</a></li>
108                 <li><a href="">加州提子</a></li>
109             </ul>
110 
111             <a href="#" class="more">查看更多&gt;</a>
112         </div>
113 
114         <div class="goods_banner fl"><a href="#"><img src="image/banner01.jpg" alt="banner"></a></div>
115 
116         <ul class="goods_list fl">
117             <li>
118                 <h4>草莓</h4>
119                 <a href="#"><img src="image/goods01.jpg" alt="商品图片"></a>
120                 <div class="price">￥ 38.00</div>
121             </li>
122 
123             <li>
124                 <h4>草莓</h4>
125                 <a href="#"><img src="image/goods02.jpg" alt="商品图片"></a>
126                 <div class="price">￥ 38.00</div>
127             </li>
128 
129             <li>
130                 <h4>草莓</h4>
131                 <a href="#"><img src="image/goods03.jpg" alt="商品图片"></a>
132                 <div class="price">￥ 38.00</div>
133             </li>
134 
135             <li>
136                 <h4>草莓</h4>
137                 <a href="#"><img src="image/goods04.jpg" alt="商品图片"></a>
138                 <div class="price">￥ 38.00</div>
139             </li>
140         </ul>
141     </div>
142 
143     <div class="common_model">
144         <div class="common_title_con">
145             <h3>新鲜水果</h3>
146 
147             <ul>
148                 <li><a href="">加州提子</a></li>
149                 <li><a href="">加州提子</a></li>
150                 <li><a href="">加州提子</a></li>
151             </ul>
152 
153             <a href="#" class="more">查看更多&gt;</a>
154         </div>
155 
156         <div class="goods_banner fl"><a href="#"><img src="image/banner01.jpg" alt="banner"></a></div>
157 
158         <ul class="goods_list fl">
159             <li>
160                 <h4>草莓</h4>
161                 <a href="#"><img src="image/goods01.jpg" alt="商品图片"></a>
162                 <div class="price">￥ 38.00</div>
163             </li>
164 
165             <li>
166                 <h4>草莓</h4>
167                 <a href="#"><img src="image/goods02.jpg" alt="商品图片"></a>
168                 <div class="price">￥ 38.00</div>
169             </li>
170 
171             <li>
172                 <h4>草莓</h4>
173                 <a href="#"><img src="image/goods03.jpg" alt="商品图片"></a>
174                 <div class="price">￥ 38.00</div>
175             </li>
176 
177             <li>
178                 <h4>草莓</h4>
179                 <a href="#"><img src="image/goods04.jpg" alt="商品图片"></a>
180                 <div class="price">￥ 38.00</div>
181             </li>
182         </ul>
183     </div>
184 
185     <div class="footer">
186         <div class="footer_link">
187             <a href="#">关于我们</a>
188             <span>|</span>
189             <a href="#">联系我们</a>
190             <span>|</span>
191             <a href="#">招聘人才</a>
192             <span>|</span>
193             <a href="#">友情链接</a>
194         </div>
195 
196         <p>CopyRight @ 2016 北京天天生鲜信息技术有限公司 All Rights Reserved</p>
197         <p>电话：010-****888  京ICP备*******8号</p>
198     </div>
199 </body>
200 </html>

reset.css 代码

 1 /* 将标签默认的间距设为0 */
 2 body,p,h1,h2,h3,h4,h5,h6,ul,dl,dt,form,input{
 3     margin: 0;
 4     padding: 0;
 5 }
 6 
 7 /* 去掉默认的小圆点 */
 8 ul,ol{
 9     list-style: none;
10 }
11 
12 /* 去掉默认的下划线 */
13 a{
14     text-decoration: none;
15 }
16 
17 /* 设置不倾斜 */
18 em{
19     font-style: normal;
20 }
21 
22 /* 去掉在IE下图片做链接是生成的边框 */
23 img{
24     border: 0px;
25 }
26 
27 /* 让h标签继承body的font-size设置 */
28 h1,h2,h3,h4,h5,h6{
29     font-size: 100%
30 }
31 
32 /* 清除浮动解决margin-top塌陷 */
33 .clearfix:before,.clearfix:after{
34     content: '';
35     clear: table;
36 }
37 
38 .clearfix:after{
39     clear: both;
40 }
41 .clearfix{
42     zoom: 1;
43 }
44 
45 .fl{
46     float: left;
47 }
48 
49 .fr{
50     float: right;
51 }

main.css

  1 /* 页面顶部样式 */
  2 
  3 body{
  4     font-family: 'Microsoft Yahei';
  5     font-size: 14px;
  6 }
  7 
  8 .head_con{
  9     height: 29px;
 10     background-color: #f7f7f7;
 11     border-bottom: 1px solid #dddddd;
 12 }
 13 
 14 .header{
 15     height: 29px;
 16     width: 1200px;
 17     margin: 0 auto;
 18 }
 19 
 20 .welcome{
 21     font-size: 12px;
 22     color: #666;
 23     line-height: 29px;
 24 }
 25 
 26 .user_con{
 27     /*background-color: gold;*/
 28 
 29 }
 30 
 31 .user_info{
 32     display: none;
 33     font-size: 12px;
 34     line-height: 29px;
 35     color: #666;
 36 }
 37 
 38 .user_info{
 39     color: #ff8800;
 40 }
 41 
 42 .login_btns li,.user_btns li{
 43     float: left;
 44     height: 29px;
 45 }
 46 
 47 .login_btns a,.login_btns span,.user_btns a,.user_btns span{
 48     display: block;
 49     line-height: 29px;
 50     color: #666;
 51     font-size: 12px;
 52 }
 53 
 54 .login_btns span,.user_btns span{
 55     color: #cecece;
 56     padding: 0 10px;
 57 }
 58 
 59 .login_btns a:hover,.user_btns a:hover{
 60     color: #f80;
 61 }
 62 
 63 
 64 /* logo、搜索框、购物车样式 */
 65 .center_con{
 66     width: 1200px;
 67     height: 115px;
 68     margin: 0 auto;
 69     /*background-color: gold;*/
 70 }
 71 
 72 .logo{
 73     margin: 29px 0 0 17px;
 74 }
 75 
 76 .search_con{
 77     height: 38px;
 78     width: 616px;
 79     border: 1px solid #36ab40;
 80     margin: 34px 0 0 124px;
 81     background: url(../image/icons.png) 10px 10px no-repeat;    /* 将搜索小图标作为背景图 */    
 82 }
 83 
 84 .search_con .input_txt{
 85     margin-left: 36px;
 86     width: 480px;
 87     height: 38px;
 88     border: 0;
 89     outline: none;  /* 去掉激活搜索框后其自带的边框 */
 90     float: 
 91 }
 92 
 93 .search_con .input_sub{
 94     width: 100px;
 95     height: 38px;
 96     background-color: #36ab40;
 97     border: 0px;
 98     font-size: 14px;
 99     color: #fff;
100     cursor: pointer;  
101     /* 设置鼠标形状为手*/
102 }
103 
104 .chart_con{
105     width: 200px;
106     height: 40px;
107     margin-top: 34px;
108     background-color: cyan;
109 }
110 
111 .chart_link{
112     width: 158px;
113     height: 38px;
114     border: 1px solid #ddd;
115     background: url(../image/icos.png) 12px -42px no-repeat #f7f7f7;
116     text-indent: 56px;  /* 首行缩进 */
117     line-height: 38px;
118     font-size: 14px;
119     color: #36ab40;
120 }
121 
122 .chart_num{
123     width: 40px;
124     height: 40px;
125     background-color: #f80;
126     text-align: center;
127     color: #fff;
128     font: bold 18px/40px 'Microsoft Yahei';  /* bold加粗 */
129 }
130 
131 .main_menu_con{
132     height: 40px;
133     border-bottom: 2px solid #39a93e;
134 
135 }
136 
137 .center_con2{
138     width: 1200px;
139     height: 40px;
140 /*    background: gold;*/
141     margin: 0 auto;
142 }
143 
144 .center_con2 h2{
145     float: left;
146     width: 200px;
147     height: 40px;
148     background-color: #39a93e;
149     text-align: center;
150     font:normal 14px/40px 'Microsoft Yahei';
151     color: #fff;
152 }
153 
154 .center_con2 ul{
155     float: left;
156     overflow: hidden;
157 }
158 
159 .center_con2 li{
160     height: 40px;
161     float: left;
162 }
163 
164 .center_con2 li a{
165     display: block;
166     height: 14px;
167     line-height: 14px;  /* 这里设置14px是为了border生成的边框线不会占满整个父元素宽度 */
168     padding: 0 20px;
169     margin-top: 13px;
170     border-left: 1px solid #666;     /* 不用单独的用span标签做一个竖线*/
171     margin-left: -1px;     
172     /* 将border生成的线用margin撑开到前面的一个区域，再将前面区域设置overflow属性。裁切掉多余的最左边的竖线*/
173     color: #666
174 }
175 
176 .center_con2 li a:hover{
177     color: #f80;
178 
179 }
180 
181 
182 /* 二级菜单、幻灯片、广告 */
183 
184 .center_con3{
185     width: 1200px;
186     height: 270px;
187     margin: 0 auto;
188 /*    background-color: gold;*/
189 }
190 
191 .sub_menu_con{
192     width: 200px;
193     height: 270px;
194 
195 }
196 
197 .sub_menu_con li{
198     width: 198px;
199     height: 44px;
200     border: 1px solid #eee;
201     border-top: 0px;
202     background: url(../image/icons.png) 178px -384px no-repeat;
203 }
204 
205 .sub_menu_con li .icon1{
206     background-position: 33px -140px;
207 }
208 
209 .sub_menu_con li .icon2{
210     background-position: 33px -140px;
211 }
212 
213 .sub_menu_con li .icon3{
214     background-position: 33px -140px;
215 }
216 
217 .sub_menu_con li .icon4{
218     background-position: 33px -140px;
219 }
220 
221 .sub_menu_con li .icon5{
222     background-position: 33px -140px;
223 }
224 
225 
226 .sub_menu_con li a{
227     display: block;
228     height: 44px;
229     line-height: 44px;
230     text-indent: 71px;
231     color: #333;
232 }
233 
234 .sub_menu_con li a:hover{
235     color: #f80;
236 }
237 
238 .slide_con{
239     width: 760px;
240     height: 270px;
241     position: relative;
242     overflow: hidden;
243 }
244 
245 .slide_con .slide{
246     width: 4560px;
247     height: 270px;
248     position: absolute;
249     left: 0px;
250     top: 0px;
251 }
252 
253 .slide_con .slide li{
254     float: left;
255 }
256 
257 .prev,.next{
258     position: absolute;
259     width: 15px;
260     height: 24px;
261     background: url(../image/icons.png) left -450px no-repeat;
262     cursor: pointer;
263 }
264 
265 .prev{
266     left: 11px;
267     top: 122px;
268 }
269 
270 .next{
271     background-position: left -500px;
272     left: 732px;
273     top: 122px;
274 }
275 
276 .points{
277     position: absolute;
278     width: 100%;  /* 让其继承父级的100%宽度*/
279     height: 11px;
280     left: 0;
281     bottom: 9px;
282     font-size: 0;  /* 清除内联块间的间隙 */
283     text-align: center;
284 }
285 
286 .points li{
287     display: inline-block;
288     width: 11px;
289     height: 11px;
290     background-color: #9f9f9f;
291     margin: 0 5px;
292     border-radius: 50%;  /* 把方角设置成原点 */
293     cursor: pointer;
294 }
295 .points .active{
296     background-color: #cecece;
297 }
298 .advs{
299     width: 240px;
300     height: 270px;
301 }
302 
303 .advs img{
304     display: block;  /* 解决图片下3像素空白的bug */
305 }
306 
307 
308 /**/
309 .common_model{
310     width: 1200px;
311     height: 337px;
312     margin: 20px auto 0;
313 }
314 
315 .common_title_con{
316     height: 35px;
317     border-bottom: 2px solid #42ad46;
318 }
319 
320 .common_title_con h3{
321     float: left;
322     font: bold 16px/35px 'Microsoft Yahei';
323     color: #42ad46;
324 }
325 
326 .common_title_con ul{
327     float: left;
328     height: 12px;
329     font-size: 12px;
330     border-left: 1px solid #666;
331     margin: 12px 0 0 20px;
332 }
333 
334 .common_title_con li{
335     float: left;
336     line-height: 12px;
337     margin-left: 15px;
338 
339 }
340 
341 .common_title_con li a{
342     line-height: 12px;
343     font-size: 12px;
344     color: #666
345 }
346 
347 .common_title_con li a:hover{
348     color: #f80;
349 }
350 
351 .common_title_con .more{
352     float: right;
353     font: normal 12px/35px 'Microsoft Yahei';
354     color: #666;
355 }
356 
357 .common_title_con .more:hover{
358     color: #f80;
359 }
360 
361 .goods_banner{
362     width: 200px;
363     height: 300px;
364 }
365 
366 .goods_list{
367     width: 1000px;
368     height: 300px;
369 }
370 
371 .goods_list li{
372     width: 249px;
373     height: 299px;
374     border-left: 1px solid #ededed;
375     border-bottom: 1px solid #ededed;
376     float: left;
377     position: relative;
378     overflow: hidden;
379 }
380 
381 .goods_list li h4{
382     font: 14px/50px 'Microsoft Yahei';
383     text-align: center;
384     color: #666;
385 }
386 
387 .goods_list li a{
388     display: block;
389     width: 180px;
390     height: 180px;
391     margin: 0 auto;
392 }
393 
394 .goods_list li .price{
395     font: bold 20px/50px 'Microsoft Yahei';
396     color: #c400000;
397     text-align: center;
398     margin-top: 20px;
399 }
400 
401 .footer{
402     border-top: 2px solid #4ab14e;
403     margin: 30px 0 40px;
404 }
405 
406 .footer_link{
407     text-align: center;
408     margin-top: 38px;
409 }
410 
411 .footer_link a{
412     color: #4e4e4e;
413     font-size: 12px;
414 }
415 
416 .footer_link span{
417     color: #4e4e4e;
418     font-size: 12px;
419     padding: 10px;
420 }
421 
422 .footer_link a:hover{
423     color: #f80;
424 }
425 
426 .footer p{
427     text-align: center;
428     margin-top: 14px;
429     font-size: 12px;
430     color: #4e4e4e;
431 }

posted @ 2020-03-14 15:34 kog_maw 阅读(275) 评论(0) 编辑收藏举报

刷新页面返回顶部

kog_maw

第一节 首页布局案列

公告

第一节首页布局案列