1. 去掉li的点的方法
现在有这样一个需求:列表显示的时候不想让每个li前面带有点(?),那怎么实现呢?下面我们来一步步解析。
1.1 使用list-style-type:none;
可以使用CSS的list-style-type属性来实现,将其设置为none,即可将其前面的点去掉。
li {
list-style-type: none;
}
1.2 使用list-style:none;
除了使用list-style-type属性去掉点之外,还可以使用list-style属性,将其设置为none,同样也可以将点去除。
li {
list-style: none;
}
1.3 使用list-style-image:url(none);
还有一种可以将其去掉的方法,那就是使用list-style-image属性,将其设置为none即可。但是不建议使用该方法,因为这样会强制浏览器去请求图片,浪费带宽资源。
li {
list-style-image: url(none);
}
2. 建议使用list-style-type:none;
总的来说,建议使用list-style-type:none;这种方法,因为它更加简单易懂,不需要浏览器去请求图片,而且更加方便维护。
例子
代码如下:
ul {
list-style-type: none;
}
li {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}
效果如下:
苍天啊!这一天到底要过多少次才是真的呢?
就算再吃一百个光球也不会感觉到饱啊
小宝贝你想喝水吗?
生命诞生的瞬间就证明了生命的可贵
其中,list-style-type:none;去掉了每个li前面的点,而li样式的设置使得每个li具有了统一的样式,并且每个li之间有了一定的间距。
注:此文仅供参考,具体情况具体分析,实际开发中还需要根据需求具体设置样式。