在学习html简单页面设计，常常会遇到网页布局，经典的布局就是田字格布局。该怎么设置呢？下面讲解实现步骤。
工具/原料
学会了基本html标记。
熟悉css的布局方法。
方法/步骤
1、先设置4个div，占位置。每个div设置id选择器。<html><head></head><body><divid="red"></div><divid="blue"></div><divid="green"></div><divid="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>加：<styletype="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、设置好了。