6.列表样式-CSS基础
一、列表项符号（list-style-type）
在
HTML中，对于有序、无序列表的列表项符号，都是使用type属性来定义。 但我们应该遵顼结构与样式分离的原则，所以我们应该在CSS中通过list-style-type属性来定义列表项符号。
1.定义列表项符号
无论有序、无序列表，都是使用
list-style-type属性来定义列表项符号。
（1）语法格式
list-style-type:取值;① 说明
list-style-type属性针对的是ol 或 ul元素。
② 有序列表list-style-type属性值
属性值 | 说明 |
|---|---|
decimal | 阿拉伯数字：1、2、3...（默认值） |
lower-roman | 小写罗马数字：i、ii、iii... |
upper-roman | 大写罗马数字：Ⅰ、Ⅱ、Ⅲ... |
lower-alpha | 小写英文字母：a、b、c... |
upper-alpha | 大写英文字母：A、B、C... |
③ 无序列表list-style-type属性取值
属性值 | 说明 |
|---|---|
disc | 实心圆（默认值） |
circle | 空心圆 |
square | 正方形 |
2.去除列表项符号
（1）语法格式
list-style-type:none;① 实际开发
在实际开发中，因为列表项符号不是很好看，在大多数情况下，都需要使用
list-style-type:none;去掉。 所以，上面所列出的属性值都不要记忆，只需要记住list-style-type:none;即可，要是真要使用，回头看一下即可或编译器有提示。
二、列表项图片（list-style-image）
在
CSS中，我们通过list-style-image属性来定义列表项图片，用图片来代替列表项符号，这个我们会经常遇到。
1.定义列表项图片
（1）语法格式
list-style-image:url(图片路径);① 说明
list-style-image属性实际上就是用图片替代列表项符号，而引用图片就需要给出图片的路径。
②示例
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>列表样式</title>
<!-- <link rel="stylesheet" type="text/css" href="../css/边框样式.css"/> -->
<style type="text/css">
ul{
list-style-image: url(../img/favicon.ico);
}
</style>
</head>
<body>
<ul>
<li>思齐</li>
<li>小淘</li>
<li>初见</li>
<li>欲戴王冠，必承其重。</li>
</ul>
</body>
</html>
列表项图片示例1.png
2.字体图标（iconfont）重点
（1）实际开发
在实际开发中，对于列表项图片一般都不会用
list-style-image属性来实现，而是使用更为高级的字体图标（iconfont）来实现。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录