<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>设置无序列表的图标和去除无序列表的图标</title>
</head>
<style>
ul{
/* 设置列表前面的符号,效果太丑，一般不用，都是用字符图标实现。*/
/* list-style-type:lower-roman; */
/* 支持的属性如下
disc 实心圆
circle 空心圆
square 实心方块
lower-roman 小写罗马数字 */
/* 使用自定义图片做列表前面的符号 */
/* list-style-image:url(./img/jiantou.png); */
/* 去除列表前面的符号 这个很常用，请记住 */
list-style:none;
padding:0;
margin:0;
}
</style>
<body>
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
</body>
</html>
以上代码中，重点记忆去除无序列表前面图标的方法，因为这个图标一般我们都是用字符图标实现的，在使用字符图标前需要先去除原图标。
解释一下去除图标的三行代码：
- list-style:none; --去除图标
- padding:0; --去除无序列表的内边距，即元素的边界占位，这样做是为了排版方便。
- margin:0; --去除无序列表的外边距，即元素的边界占位，这样做是为了排版方便。
而且为了去除浏览器的边界占位，往往在写css代码前所有人都会写这样两句代码：
- *{
- padding:0;
- margin:0;
- }
所以最终显示结果如下（列表紧贴浏览器边框，便于实现后续的排版）：
|
窥视卡
雷达卡
发表于 2023-1-31 22:01:40
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-17 07:09:54
