css田字格布局
1、先设置4个div，占位置。每个div设置id选择器。
<html><head>
</head><body><div id="red"></div><div id="blue"></div><div id="green"></div><div id="grey"></div></body></html>
2、设置每个div宽度、高度、背景色：代码：
#red{ width: 200px; height: 200px; background: red; }
#blue{ width: 200px; height: 200px; background: blue; } #green{ width: 200px; height: 200px; background: green; }
#grey{ width: 200px; height: 200px; background: grey; }
3、加上css标签：在<head>与</head>加：
<style type="text/css"></style>,这对标记把四个id选择器设置包起来。
整理好，我们看下效果如：
4、用浮动的知识把这些div飘起来，用float:left;
css代码修正增加后如下：
#red{ width: 200px; height: 200px; background: red; float:left; }
#blue{ width: 200px; height: 200px; background: blue; float:left; } #green{ width: 200px; height: 200px; background: green; float:left; }
#grey{ width: 200px; height: 200px; background: grey; float:left; }
看效果如下：
5、我们要把第三个div下移，第四个div也是，我们就修改下，把它清除浮动，用clear:left,修改后css代码：
#red{ width: 200px; height: 200px; background: red; float:left; }
#blue{ width: 200px; height: 200px; background: blue; float:left; } #green{ width: 200px; height: 200px; background: green; float:left;clear:left; }
#grey{ width: 200px; height: 200px; background: grey; float:left; }
6、修改好保存，效果下：
7、设置好了。