1、第一步，双击打开HBuilderX工具，新建一个Web项目并创建一个HTML5模板，如下图所示：
2、第二步，在<body></body>标签中，插入一个div标签，并在这个标签内插入一个无序列表，列表子项设置成不同的类选择器和内容，如下图所示：
3、第三步，在<title></title>下方添加一个<style></style>，使用通配选择器控制外边距和内边距，如下图所示：
4、第四步，接着使用类选择器和伪类选择器，设置无序列表display等属性，如下图所示：
5、第五步，然后使用元素选择器li，设置无序列表子项宽度、高度、行高、字体居中等，如下图所示：
6、第六步，保存代码预览页面展示效果，可以发现圆形重叠在一起；修改li的内外边距，然后再次预览页面效果，如下图所示：
