div+css实现上中下布局

 时间:2024-10-11 18:54:46

1、新建一个html文件,命名为test.html,用于讲解div+css实现上中下布局。

div+css实现上中下布局

2、在test.html文件内,使用div标签创建一个模块,并设置其class属性为content,主要用于下面通过该class属性设置样式。

div+css实现上中下布局

3、在test.html文件内,在上一步的div内,再使用div创建三个模块,并分别设置其class属性为up,middle,down。

div+css实现上中下布局

4、在test.html文件内,在css标签内,通过“*”来初始化页面中所有的元素内外边距均为0,并且设置页面中每个div宽度为100%,并且居中对齐。

div+css实现上中下布局

5、在css标签内,对class为content的div进行样式布局,设置其宽度为500px,高度为600px,div内的文字颜色为白色,居中显示。

div+css实现上中下布局

6、在css标签内,对上中下三个div模块进行样式设置,定义上部的div(class为up的div)高度为100px,背景颜色为红色,中部的div(class为middle的div)高度为400px,背景颜色为蓝色,下部的div(class为down的div)高度为100px,背景颜色为黑色。

div+css实现上中下布局

7、在浏览器打开test.html文件,查看实现的效果。

div+css实现上中下布局
  • 怎么让两个div在同一行
  • HTML怎么实现网页跳转
  • a标签的下划线怎么去掉
  • html轮播图怎么制作
  • 网页制作中怎样将div的位置下移
  • 热门搜索
    安全健康手抄报 感恩的心手抄报大全 梦想起航手抄报 备战期中手抄报 历史手抄报图片大全 手抄报的装饰花边简单 手抄报的内容 感念师恩手抄报 大学生手抄报 红旗渠精神手抄报