css田字格布局

 时间:2024-10-12 13:17:54

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选择器设置包起来。整理好,我们看下效果如:

css田字格布局

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、修改好保存,效果下:

css田字格布局

7、设置好了。

  • FL怎样由小圆形变大圆形?
  • html站点如何设置
  • jquery跳转页面的方法
  • visual studio code怎么设置终端为cmd
  • 如何利用html制作网页水平导航菜单?
  • 热门搜索
    日批怎么日 西安怎么样 铃木北斗星怎么样 比亚迪思锐怎么样 配股怎么操作 我的世界发射器怎么用 女性阴道干涩怎么办 红警怎么结盟 腰酸是怎么回事 手蜕皮是怎么回事