960网格系统:
12栏,16栏,24栏
![这里写图片描述](https://img-blog.csdn.net/20170419103519661?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbHpxXzIwMTUwNzE1/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
![这里写图片描述](https://img-blog.csdn.net/20170419103705042?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbHpxXzIwMTUwNzE1/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
![这里写图片描述](https://img-blog.csdn.net/20170419105250796?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbHpxXzIwMTUwNzE1/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
我们也可以利用css样式表模板快速写网页
<div id="toolbar">
<div class="container_12">
<div class="grid_12">
工具栏
</div>
</div>
</div>
<div class="container_12">
<div id="header">
<div class="grid_2">
<h2>页头</h2>
</div>
</div>
<div id="mainbody" class="grid_8">
<h2>mainbody 主体</h2>
<div class="grid_2 alpha">主体1</div>
<div class="grid_2">主体2</div>
<div class="grid_2">主体3</div>
<div class="grid_2 omega">主体4</div>
</div>
<div id="sidebar" class="grid_4">
<h2>sidebar 边栏</h2>
</div>
<div class="clear"></div>
<div id="footer">
<h2>页脚</h2>
<div class="grid_8">
页脚1
</div>
<div class="grid_2">
页脚2
</div>
<div class="grid_2">
页脚3
</div>
</div>
</div>
![这里写图片描述](https://img-blog.csdn.net/20170419120507273?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbHpxXzIwMTUwNzE1/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
<div data-brackets-id='1256' id="toolbar">
<div data-brackets-id='1257' class="container_12">
<div data-brackets-id='1258' class="grid_12">
工具栏
</div>
</div>
</div>
<div data-brackets-id='1259' class="container_12">
<div data-brackets-id='1260' id="header">
<div data-brackets-id='1261' class="grid_2">
<h2 data-brackets-id='1262'>页头</h2>
</div>
</div>
<div data-brackets-id='1263' id="mainbody" class="grid_6 push_2">
<h2 data-brackets-id='1264'>mainbody 主体</h2>
<div data-brackets-id='1265' class="grid_3 alpha">主体1</div>
<div data-brackets-id='1266' class="grid_3 omega">主体4</div>
</div>
<div data-brackets-id='1267' id="left-sidebar" class="grid_2 pull_6">
<h2 data-brackets-id='1268'> 左边栏</h2>
</div>
<div data-brackets-id='1269' id="sidebar" class="grid_4">
<h2 data-brackets-id='1270'>sidebar 边栏</h2>
</div>
<div data-brackets-id='1271' class="clear"></div>
<div data-brackets-id='1272' id="footer">
<h2 data-brackets-id='1273'>页脚</h2>
<div data-brackets-id='1274' class="grid_8">
页脚1
</div>
<div data-brackets-id='1275' class="grid_2">
页脚2
</div>
<div data-brackets-id='1276' class="grid_2">
页脚3
</div>
</div>
</div>
![这里写图片描述](https://img-blog.csdn.net/20170419121156873?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbHpxXzIwMTUwNzE1/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)