ul无序列表前面的图标有哪些,分别怎么设置
时间: 2024-02-18 22:04:10 浏览: 27
ul无序列表前面的图标包括:
- 黑色实心圆点(默认)
- 白色实心圆点
- 黑色空心圆点
- 白色空心圆点
- 黑色实心方块
- 白色实心方块
- 黑色空心方块
- 白色空心方块
- 自定义图标(使用CSS样式设置)
设置方法如下:
1. 黑色实心圆点(默认):
```css
ul {
list-style-type: disc;
}
```
2. 白色实心圆点:
```css
ul {
list-style-type: circle;
color: #fff;
}
```
3. 黑色空心圆点:
```css
ul {
list-style-type: circle;
border: 1px solid #000;
}
```
4. 白色空心圆点:
```css
ul {
list-style-type: circle;
border: 1px solid #fff;
color: #fff;
}
```
5. 黑色实心方块:
```css
ul {
list-style-type: square;
}
```
6. 白色实心方块:
```css
ul {
list-style-type: square;
color: #fff;
}
```
7. 黑色空心方块:
```css
ul {
list-style-type: square;
border: 1px solid #000;
}
```
8. 白色空心方块:
```css
ul {
list-style-type: square;
border: 1px solid #fff;
color: #fff;
}
```
9. 自定义图标(使用CSS样式设置):
```css
ul {
list-style-image: url('path/to/image.png');
}
```
其中,`path/to/image.png` 指的是自定义图标的文件路径。自定义图标可以是任何图片格式(如 PNG、JPEG 等)。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)