如何使用CSS3中的样式控制无序列表显示圆形

2025-03-23 20:19:20

1、第一步，双击打开HBuilderX工具，新建一个Web项目并创建一个HTML5模板，如下图所示：

2、第二步，在<body></body>标签中，插入一个div标签，并在这个标签内插入一个无序列表，列表子项设置成不同的类选择器和内容，如下图所示：

3、第三步，在<title></title>下方添加一个<style></style>，使用通配选择器控制外边距和内边距，如下图所示：

4、第四步，接着使用类选择器和伪类选择器，设置无序列表display等属性，如下图所示：

5、第五步，然后使用元素选择器li，设置无序列表子项宽度、高度、行高、字体居中等，如下图所示：

6、第六步，保存代码预览页面展示效果，可以发现圆形重叠在一起；修改li的内外边距，然后再次预览页面效果，如下图所示：

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。