css 网格布局

第一步：建一个文件夹，再在文件夹中建立一个css文件

第二步;打开 notepad++，点击【新建】、语言：HTML，保存到刚建的文件夹中

第三步：写入网格布局的需求，列如以下三个需求：          

                     1有菜单 

                     2 左右两列，左边是主要内容，右边是附加信息
                     3 有页脚，页脚有4列

 1 <body>
 2 <div id="main">
 3     <div id="header">菜单</div>
 4         <div id="content">
 5             <div id="cleft">左边</div>
 6             <div id="cright">右边</div>
 7         </div>
 8         <div id="footer">
 9             <div class="fcol-1">1</div>
10             <div class="fcol-2">2</div>
11             <div class="fcol-3">3</div>
12             <div class="fcol-4">4</div>
13         </div>
14 </div>
15 </body>

第四步：在notepad++中【新建】、语言：CSS，保存到刚建的文件夹中的css文件

              以下css代码是实现网格布局

 1 body{
 2     margin:0px;
 3     padding:0px;
 4 }
 5 
 6 div{
 7     color:#fff;
 8 }
 9 
10 #main{
11     width:1200px;
12     margin:0 auto;
13 }
14 
15 #header{
16     background-color:#1abc9c;
17 }
18 
19 #content{
20     background-color:#2ecc71;
21 }
22 
23 #footer{
24     background-color:3498db;
25 }
26 
27 #cleft{
28     min-height:200px;
29     background-color:#9b59b6;
30     width:70%;
31     float:left;
32 }
33 
34 #cright{
35     min-height:200px;
36     background-color:#34495e;
37     width:30%;
38     float:left;
39 }
40 
41 .fcol-1{
42     background-color:#16a085;
43     width:24.999%;
44     float:left;
45 }
46 
47 .fcol-2{
48     background-color:#27ae60;
49     width:24.999%;
50     float:left;
51 }
52 
53 .fcol-3{
54     background-color:#2980b9;
55     width:24.999%;
56     float:left;
57 }
58 
59 .fcol-4{
60     background-color:#d35400;
61     width:24.999%;
62     float:left;
63 }

  记住一定要引入刚写css样式    

 

          运行结果：

posted @ 2019-07-03 17:26  JackSon~鹤  阅读(873)  评论(0)  编辑  收藏  举报