整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
们知道在 HTML 中列表可以分为无序列表、有序列表、定义列表。在网页中经常可以看到无序列表的使用，例如像导航栏菜单、新闻列表、商品分类、图片展示等，基本都是通过无序列表来实现的。
无序列表中每个列表项前面都会默认带一个圆点符号，然而一般我们平时在网站上看到的列表样式，通常前面是没有圆点符号的，所以我们要如何去掉这个默认的圆点符号呢？这些都可以通过 CSS 中的列表属性来实现。
本节要讲的 CSS 中的列表属性有下面四个：
list-sytle-type 属性用于设置列表项的标记的类型，和 HTML 中列表标签中的 type 属性类似。
常用值属性值如下所示：
示例：
下面是一个没有添加任何样式的列表：
如果我们希望去掉列表前面默认的圆点，可以通过将 list-style-type 属性设置为 none 来实现：
ul{
list-style-type: none;
}
在浏览器中的演示效果：
list-style-image 属性用于使用图像来替换列表项的标记。但有一点需要注意，如果我们设置了 list-style-image 属性，这个时候设置的 list-sytle-type 属性将不起作用。一般为了防止某些浏览器不支持 list-style-image 属性，我们会设置一个 list-style-type 属性来替代。
示例：
例如我们将上面列表项的标记设置为一个图像（图片大小为50x50），属性值为图像路径：
ul{
list-style-image: url(./flower.png);
}
在浏览器中的演示效果：
list-style-position 属性用于设置在何处放置列表项标记。
属性值有如下所示：
示例：
例如我们可以设置两组不同的列表，分别将 list-style-position 属性设置为outside 和 inside 来进行对比：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>CSS学习(9xkd.com)</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<ul class="ul1">
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
<li>第四项</li>
<li>第五项</li>
</ul>
<ul class="ul2">
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
<li>第四项</li>
<li>第五项</li>
</ul>
</body>
</html>
CSS 样式代码：
.ul1{
list-style-position: inside;
}
.ul2{
list-style-position: outside;
}
在浏览器中的演示效果：
可以明显的看到，第一组列表的标记放置在文本内，第二组列表的标记位于文本的左侧。
list-style 属性是一个简写属性，是上述几个列表属性的简写形式，用于把所有列表的属性设置在一个声明中。
属性设置顺序为：list-style-type、list-style-position、list-style-image，也可以不设置其中某个属性，如果不设置则采用默认值。
示例：
例如设置一个简写列表样式，其中 list-style-type 属性值为 square、list-style-position 属性值为 inside、list-style-image 属性值为 url(./flower.png)：
ul{
list-style:square inside url(./flower.png);
}
在浏览器中的演示效果：
本节我们讲了 CSS 中的几个列表样式，一般我们用的最多的就是如何去掉列表项的默认标记，即 list-style-type:none。
列表是一个接一个显示条目的首选方式，而不是使用<br>标记。完整的列表定义包括开始和结束标记，以及表示列表中每个条目的标记。
有三种类型的列表：有序列表、无序列表和定义列表。
无序列表是一个带条目符号的列表，类似于菜单。
无序列表 - <ul> ... </ul>
ul标记定义无序列表的开始和结束，列表项包含在ul标记中。
无序列表项 - <li> ... </li>
li标记添加每个条目的文本，每个列表项必须有自己的li标记。
符号类型 <ul type="disc | circle | square">
默认情况下，浏览器将显示圆形条目符号。这可以通过使用ul标记的type属性来更改，这将更改整个列表的条目符号类型。
条目符号类型 <li type="?">
通过设置li标记的type属性，可以为列表中的某个条目设置不同的符号类型。
以下是无序列表的示例：
浏览器显示内容如下所示：
SS列表属性作用有三类，这章介绍列表项标记为图像。
（1）编辑代码
打开记事本，编写代码，并保存为HTML格式文件。代码如下。
（2)在浏览器中浏览效果
在浏览器中浏览效果如图所示。
例子解释：
在单个属性中可以指定所有的列表属性。这就是所谓的简写属性。
为列表使用简写属性，列表样式属性设置如下：
（1）编辑代码
打开记事本，编写代码，并保存为HTML格式文件。代码如下。
（2)在浏览器中浏览效果
在浏览器中浏览效果如图所示。
*请认真填写需求信息，我们会在24小时内与您取得联系。
