在设计网站页面的时候经常会用到li标签,但是在标签文字的前面会出现一个圆点如下图,如何去掉呢?简单写个教程记录下如何去掉li标签前面的圆点,同时也给需要同学提供一丢丢帮助。

解决办法
我们可以使用如下样式代码实现,代码意思是设置列表项目样式为不使用项目符号
list-style: none;

示例代码
<!DOCTYPE html>
<html>
<head>
<title>测试网站</title>
<style>
li{
list-style: none;
}
</style>
</head>
<body>
<li>测试标题一</li>
<li>测试标题二</li>
<li>测试标题三</li>
<li>测试标题四</li>
<li>测试标题五</li>
</body>
</html>更多list-style代码用法
list-style的取值如下
| 代码用法 | 代码解释 |
| list-style: disc; | 默认值,实心圆 |
| list-style: circle; | 空心圆 |
| list-style: square; | 实心方块 |
| list-style: decimal; | 阿拉伯数字 |
| list-style: lower-roman; | 小写罗马数字 |
| list-style: upper-roman; | 大写罗马数字 |
| list-style: lower-alpha; | 小写英文字母 |
| list-style: upper-alpha; | 大写英文字母 |
| list-style: none; | 不使用项目符号 |

