如何使用CSS3中的属性设置元素间隔并依次展示

2024-11-01 11:34:51

1、第一步,双击打开HBuilderX工具,新建一个HTML5模板页面并修改title标签内容,如下图所示:

如何使用CSS3中的属性设置元素间隔并依次展示

2、第二步,在<body></body>标签内,插入一个div和10个蟠校盯昂div,分别使用不同内容展示,如下图所示:

如何使用CSS3中的属性设置元素间隔并依次展示

3、第三步,再在title标签下方,添加一个style标签,设置边框和背景色,如下图所示:

如何使用CSS3中的属性设置元素间隔并依次展示

4、第四步,保存代码并打开浏览器预览效果,可以发现绿色背景色的页面,如下图所示:

如何使用CSS3中的属性设置元素间隔并依次展示

5、第五步,再次使用父子选择器,利用nth-child设置元素奇偶行,如下图所示:

如何使用CSS3中的属性设置元素间隔并依次展示

6、第六步,再次保存代码并查看预览界面,发现边框依次奇数和偶数行显示,如下图所示:

如何使用CSS3中的属性设置元素间隔并依次展示
猜你喜欢