网站首页 美食营养 游戏数码 手工爱好 生活家居 健康养生 运动户外 职场理财 情感交际 母婴教育 时尚美容

如何使用CSS相关的属性控制div标签分块显示

时间:2024-10-15 19:15:42

1、第一步,为了使用css设置页面显示,新建一个静态页面,默认显示的是HTML5格式,如下图所示:

如何使用CSS相关的属性控制div标签分块显示

2、第二步,在body标签中,插入多个div标签,分别设置成左中右,设置不同的class,如下图所示:

如何使用CSS相关的属性控制div标签分块显示

3、第三步,先使用外层的div类选择器,设置内边距和高度,注意元素选择器的层次,如下图所示:

如何使用CSS相关的属性控制div标签分块显示

4、第四步,再使用左中右类选择器,控制位置属性和浮动属性;然后使用类选择器控制宽度,如下图所示:

如何使用CSS相关的属性控制div标签分块显示

5、第五步,再分别使用left和right类选择器,设置左边和右边的背景颜色、左外边距和left属性,如下图所示:

如何使用CSS相关的属性控制div标签分块显示

6、第六步,保存代码并在浏览器查看界面显示效果,可以发现左边和中间有个空白部分,如下图所示:

如何使用CSS相关的属性控制div标签分块显示
© 2025 阿力知识库
信息来自网络 所有数据仅供参考
有疑问请联系站长 site.kefu@gmail.com