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

如何使用CSS3属性和基本样式属性控制元素显示

时间:2024-10-14 20:25:33

1、第一步,在HBuilder编辑工具,新建静态页面;然后在<body></body>插入无序列表,如下图所示:

如何使用CSS3属性和基本样式属性控制元素显示

2、第二步,利用ul元素的类属性,设置display属性,对应的值为flex,如下图所示:

如何使用CSS3属性和基本样式属性控制元素显示

3、第三步,接着使用类属性和nth-child选择器控制和设置flex属性,如下图所示:

如何使用CSS3属性和基本样式属性控制元素显示

4、第四步,保存代码并在浏览器中查看预览效果,可以看到设置的三个子项的效果,如下图所示:

如何使用CSS3属性和基本样式属性控制元素显示

5、第五步,接着将其他的子项都设置完成,设置属性为flex:1 1 100px,如下图所示:

如何使用CSS3属性和基本样式属性控制元素显示

6、第六步,最后保存代码并查看显示的效果,可以发现七个子项分开展示,如下图所示:

如何使用CSS3属性和基本样式属性控制元素显示
© 2025 小知经验
信息来自网络 所有数据仅供参考
有疑问请联系站长 site.kefu@gmail.com