JavaWeb学习之路(33)–CSS之列表样式

叁歲伎倆 2022-09-16 11:21 211阅读 0赞

***[点此查看全部文字教程、视频教程、源代码][Link 1]***

### 本文目录 ###

*  1. 前言
 *  2. 无序列表样式
 *  3. 有序列表样式
 *  4. 修改列表标记图像
 *  5. 小结

# 1. 前言 #

本篇来介绍下列表的CSS样式编写，在学习之前，我们先回顾下HTML中的有序列表和无序列表。

效果如下，无序列表没有顺序之分，有序列表是有先后顺序的。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_15_color_FFFFFF_t_70_g_se_x_16]

# 2. 无序列表样式 #

可以通过`list-style-type`修改无序列表的样式，代码如下：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <style>
            .ul-none {
          
                list-style-type: none;
            }
            .ul-circle {
          
                list-style-type: circle;
            }
            .ul-square {
          
                list-style-type: square;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>篮球</li>
            <li>足球</li>
            <li>乒乓球</li>
        </ul>
        <ul class="ul-none">
            <li>篮球</li>
            <li>足球</li>
            <li>乒乓球</li>
        </ul>
        <ul class="ul-circle">
            <li>篮球</li>
            <li>足球</li>
            <li>乒乓球</li>
        </ul>
        <ul class="ul-square">
            <li>篮球</li>
            <li>足球</li>
            <li>乒乓球</li>
        </ul>
    </body>
    </html>

上述四个无序列表，分别通过class选择器，设置了默认、无、圆圈、方块四种列表样式，所以效果如下：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_15_color_FFFFFF_t_70_g_se_x_16 1]

# 3. 有序列表样式 #

有列表可以通过`list-style-type`，将序号部分修改为英文字母，罗马字母等格式。HTML部分代码：

CSS部分：

.ol-lower-alpha {
        
                list-style-type: lower-alpha;
            }
    
            .ol-lower-roman {
        
                list-style-type: lower-roman;
            }

上面的HTML元素，分别是默认效果、小写英文字母、小写罗马字母样式，所以效果如下：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_15_color_FFFFFF_t_70_g_se_x_16 2]  
可见效果一般情况，所以平时列表样式用的也不多。

# 4. 修改列表标记图像 #

还可以通过`list-style-image`，将列表左侧的标记修改为一个图像：

CSS代码：

.list-image-mark {
        
                list-style-image: url('logo.jpg');
            }

注意logo.jpg要放在当前网页同目录下，便于CSS代码去加载图片，上述代码效果如下：  
![在这里插入图片描述][1af53f693612468fb64642a3a7dbb423.png]  
可见为列表使用图像标记，效果还是比较好看的。

# 5. 小结 #

列表样式在实际开发过程中，使用的并不算多，但是也是需要大家了解的，一旦遇到相关代码能读懂即可。

[Link 1]: https://studyingpanda.blog.csdn.net/article/details/105329926
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_15_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/3a04aff0485749559327424358c63d14.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_15_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/4bce84658f4e46aa8682742589ea2c02.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_15_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/78b0a05b5279437da61bd6b87ca27644.png
[1af53f693612468fb64642a3a7dbb423.png]: /images/20220828/d23efca3ea984d47aac28e4a731093c0.png