html5+css流体布局实例

 

 

 

前端页面开发流程

1、创建页面项目目录

2、使用Photoshop对效果图切图，切出网页制作中需要的小图片

3、将装饰类图像合并，制作成雪碧图

4、结合Photoshop和代码编辑器，参照效果图，进行html和css代码书写，制作页面

 

 1 /* 将标签默认的间距设置为0 */
 2 body,p,h1,h2,h3,h4,h5,h6,ul,dl,dd,input,form,select{
 3     margin:0;
 4     padding:0;
 5 }
 6 
 7 /* 让h标签继承body内设置的字体大小 */
 8 h1,h2,h3,h4,h5,h6{
 9     font-size:100%;
10 }
11 
12 /* 去掉默认的项目图标 */
13 ul{
14     list-style:none;
15 }
16 
17 a{
18     text-decoration:none;
19 }
20 
21 em{
22     font-style:normal;
23 }
24 
25 /* 去掉IE下，图片做链接时产生的边框 */
26 img{
27     border:none;
28 }
29 
30 /* 清除margin-top塌陷和清除浮动 */
31 .clearfix:before,.clearfix:after{
32     content:"";
33     display:table;
34 }
35 .clearfix:after{
36     clear:both;
37 }
38 .clearfix{
39     zoom:1;
40 }
41 
42 /* 浮动 */
43 .fl{
44     float:left;
45 }
46 
47 .fr{
48     float:right;
49 }
reset.css

 

  1 body{
  2     font-family:'Microsoft Yahei';
  3 }
  4 
  5 .main_wrap{
  6     position:absolute;  /*为了避免在微信出问题，所以才用了绝对定位而不是固定定位*/
  7     left:0;
  8     top:0;
  9     right:0;
 10     bottom:0;
 11     background-color:gold;
 12 }
 13 
 14 .header{
 15     height:50px;
 16     background-color:#37ab40;
 17     position:relative;
 18 }
 19 
 20 .header .logo{
 21     width:89px;
 22     height:36px;
 23     display:block;  /*为了宽和高生效，将a标签转为块元素*/
 24     margin:7px auto 0;
 25 }
 26 
 27 .header .logo img{
 28     width:100%;  /*继承logo的宽度，高度自动也压缩了*/
 29 }
 30 
 31 .header .search{
 32     position:absolute;
 33     top:12px;
 34     right:15px;
 35     width:27px;  /*必须设置宽高，不然背景图撑不开宽高*/
 36     height:27px;
 37     background:url(../images/icons.png) left top no-repeat;
 38     background-size:60px 840px;  /*将雪碧图压缩*/
 39 }
 40 
 41 
 42 .center_wrap{
 43     position:absolute;
 44     left:0;
 45     right:0;
 46     top:50px;
 47     bottom:50px;
 48     background-color:#efefef;
 49 
 50     overflow-x:hidden;
 51     overflow-y:auto;  /* 下拉滚动条，overflow-y必须加在父容器上。且必须指定子元素div的高度才能生效，<div class="center_wrap"><div style="height:1500px;width:200px;>fff</div></div>*/
 52 }
 53 
 54 .slide img{
 55     width:100%;  /* slide和img都继承了center_wrap的宽度 */
 56 }
 57 
 58 
 59 .menu{
 60     height:173px;
 61     background-color:#fff;
 62     margin-top:10px;
 63     padding-top:12px;
 64 }
 65 
 66 .menu li{
 67     width:25%;  /*流体布局设置高度 */
 68     height:81px;
 69     float:left;
 70 }
 71 
 72 .menu li a{
 73     display:block;  /*为了宽和高生效，将a标签转为块元素*/
 74     width:56px;  /*流体布局设置高度 */
 75     height:56px;
 76     margin:0 auto;
 77     background:url(../images/icons.png) left -60px no-repeat;
 78     background-size:60px 840px;  /*将雪碧图压缩*/
 79 }
 80 
 81 .menu li h2{
 82     height:25px;
 83     font:bold 13px/25px 'Microsoft Yahei';
 84     text-align:center;
 85     color:#666;
 86 }
 87 
 88 .menu li:nth-child(2) a{
 89     background-position:left -120px;
 90 }
 91 
 92 .menu li:nth-child(3) a{
 93     background-position:left -180px;
 94 }
 95 
 96 .menu li:nth-child(4) a{
 97     background-position:left -240px;
 98 }
 99 
100 .menu li:nth-child(5) a{
101     background-position:left -300px;
102 }
103 
104 .menu li:nth-child(6) a{
105     background-position:left -360px;
106 }
107 
108 .menu li:nth-child(7) a{
109     background-position:left -420px;
110 }
111 
112 .menu li:nth-child(8) a{
113     background-position:left -360px;
114 }
115 
116 .footer{
117     position:absolute;
118     width:100%;  /* 绝对定位将.footer转换成了内联块元素，内联块元素如果没有设置宽高，宽高由内容决定， 所以这里继承了父元素的宽度*/
119     height:50px;
120     left:0;
121     bottom:0;
122     background-color:green;
123 }
main.css

 

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>天天生鲜-首页-手机版</title>
 9 
10     <link rel="stylesheet" type="text/css" href="css/reset.css" >
11     <link rel="stylesheet" type="text/css" href="css/main.css">
12 </head>
13 <body>
14 
15 <div class="main_wrap">
16     <div class="header clearfix">
17         <a href="" class="logo"><img src="images/logo.png" alt="log"></a>
18         <a href="" class="search"></a>
19     </div>
20 
21     <div class="center_wrap">
22         <div class="slide">
23             <img src="images/slide.jpg" alt="幻灯片">
24         </div>
25 
26         <ul class="menu">
27             <li>
28                 <a href=""></a>
29                 <h2>水果</h2>
30             </li>
31             <li>
32                 <a href=""></a>
33                 <h2>水果</h2>
34             </li>
35             <li>
36                 <a href=""></a>
37                 <h2>水果</h2>
38             </li>
39             <li>
40                 <a href=""></a>
41                 <h2>水果</h2>
42             </li>
43             <li>
44                 <a href=""></a>
45                 <h2>水果</h2>
46             </li>
47             <li>
48                 <a href=""></a>
49                 <h2>水果</h2>
50             </li>
51             <li>
52                 <a href=""></a>
53                 <h2>水果</h2>
54             </li>
55             <li>
56                 <a href=""></a>
57                 <h2>水果</h2>
58             </li>
59         </ul>
60     </div>
61 
62     <div class="footer"></div>
63 
64 </div>
65 
66 </body>
67 </html>
index.html

 

posted on 2019-12-04 21:25  cherry_ning  阅读(504)  评论(0)    收藏  举报

导航