列表基本样式

课后整理 2020-12-9

下面介绍如何使用CSS3设计列表的基本样式。

项目符号类型

使用CSS3的list-style-type属性可以定义列表项目符号的类型，也可以取消项目符号，该属性取值说明如表1所示。

表1  list-style-type属性值

属性值 说明 属性值 说明
disc 实心圆，默认值 upper-roman 大写罗马数字
circle 空心圆 lower-alpha 小写英文字母
square 实心方块 upper-alpha 大写英文字母
decimal 阿拉伯数字 none 不使用项目符号
lower-roman 小写罗马数字 armenian 传统的亚美尼亚数字
cjk-ideographic 浅白的表意数字 georgian 传统的乔治数字
lower-greek 基本的希腊小写字母 hebrew 传统的希伯莱数字
hiragana 日文平假名字符 hiragana-iroha 日文平假名序号
katakana 日文片假名字符 katakana-iroha 日文片假名序号
lower-latin 小写拉丁字母 upper-latin 大写拉丁字母

使用CSS3的list-style-position属性可以定义项目符号的显示位置。该属性取值包括outside和inside，其中outside表示把项目符号显示在列表项的文本行以外，列表符号默认显示为outside，inside表示把项目符号显示在列表项文本行以内。

【注意】

如果要清除列表项目的缩进显示样式，可以使用下面样式实现：

ul, ol {
     padding: 0;
     margin: 0;
}

【示例】下面示例定义项目符号显示为空心圆，并位于列表行内部显示，如图6所示。

<style type="text/css">
body {/* 清除页边距 */
     margin: 0;                                                       /* 清除边界 */
     padding: 0;                                                      /* 清除补白 */
}
ul {/* 列表基本样式 */
     list-style-type: circle;                                       /* 空心圆符号*/
     list-style-position: inside;                                  /* 显示在里面 */
}
</style>
<ul>
     <li><a href="#">关于我们</a></li>
     <li><a href="#">版权信息</a></li>
     <li><a href="#">友情链接</a></li>
</ul>

图6 定义列表项目符号

【提示】

在定义列表项目符号样式时，应注意两点：

项目符号图像

使用CSS3的list-style-image属性可以自定义项目符号。该属性允许指定一个外部图标文件，以此满足个性化设计需求。用法如下所示：

list-style-image：none | <url>

默认值为none。

【示例】以上节示例为基础，重新设计内部样式表，增加自定义项目符号，设计项目符号为外部图标bullet_main_02.gif，效果如图7所示。

<style type="text/css">
ul {/* 列表基本样式 */
     list-style-type: circle;                                       /* 空心圆符号*/
     list-style-position: inside;                                  /* 显示在里面 */
     list-style-image: url(images/bullet_main_02.gif);       /* 自定义列表项目符号 */
}
</style>

图7 自定义列表项目符号

【提示】

当同时定义项目符号类型和自定义相符符号时，自定义项目符号将覆盖默认的符号类型。但是如果list-style-type属性值为none或指定外部的图标文件不存在时，则list-style-type属性值有效。

自定义项目符号

使用CSS3的background属性也可以模拟列表项目的符号，设计技巧：

第1步，先使用list-style-type:none隐藏列表的默认项目符号。

第2步，然后使用background属性为列表项目定义背景图像，精确定位其显示位置。

第3步，同时使用padding-left属性为列表项目定义左侧空白，避免背景图被项目文本遮盖。

【示例】在下面这个示例中，先清除列表的默认项目符号，然后为项目列表定义背景图像，并定位到左侧垂直居中的位置，为了避免列表文本覆盖背景图像，定义左侧补白为一个字符宽度，这样就可以把列表信息向右方向缩进显示，显示效果如图8所示。

<style type="text/css">
ul {/* 清除列默认样式 */
     list-style-type: none;
     padding: 0;
     margin: 0;
}
li {/* 定义列表项目的样式 */
     background-image: url(images/bullet_sarrow.gif);      /* 定义背景图像 */
     background-position: left center;                       /* 精确定位背景图像的位置 */
     background-repeat: no-repeat;                           /* 禁止背景图像平铺显示 */
     padding-left: 1em;                                                  /* 为背景图像挤出空白区域 */
}
</style>

图8 使用背景图模拟项目符号