学会了基本html标记。
熟悉css的布局方法。
先设置4个div，占位置。每个div设置id选择器。
设置每个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; }
加上css标签：在
与加：,这对标记把四个id选择器设置包起来。整理好，我们看下效果如：用浮动的知识把这些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; }看效果如下：
我们要把第三个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; }
修改好保存，效果下：
设置好了。