第一步：建一个文件夹，再在文件夹中建立一个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样式
运行结果：
原文：https://www.cnblogs.com/hzyhx/p/11127804.html