开发者学堂课程【CSS 快速掌握：列表样式属性】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/611/detail/9175
列表样式属性
内容介绍
一、列表的概念
二、属性分类
一、列表的概念
1、列表：无序列表和有序列表（整个网页中无序列表是使用最多的）
属性 |
值 |
含义 |
list-style-type |
none (将列表前面的项目符号去掉),disc (实心园),square (实心小方块),circle (空心园) |
设置列表前项目符号的类型。 |
list-style-position |
inside (在里面), outside (在外面) |
设置列表项标记的放置位置。 |
list-style-image |
url (图像路径) |
将图象设置为列表项标记。 |
list-style |
square inside url(arrow.gif) |
在一个声明中设置所有列表属性 |
二、属性分类
1、范例（list-style-type）：
< !DOCTYPE html>
<html lang="en">
<head>
<meta charset-"UTF-8">
<title>列表样式属性</title>
style type "text/css">
/*后代元素选择器*/
.box ul{
list-style-type ;none ; 去除列表前面的项目符号
}
</style>
</head>
<body>
div class-"box"
<h2>请列出中国的四大名著</h2>
<ul>
<li>北京</lі>
<li>上海</li>
<li>广州</li>
<li>深圳</li>
</u1>
</div>
2、范例二（list-style-type）：
< !DOCTYPE html>
<html lang="en">
<head>
<meta charset-"UTF-8">
<title>列表样式属性</title>
style type "text/css">
/*后代元素选择器*/
.box ul{
list-style-type ;none ; /去除列表前面的项目符号/
}
.box ul li{
border:1px solid #f00;
height: 35px； /要将文本在一个盒子里面垂直方向居中对齐要将高度与行高为一样/
line-height: 35px；
}
</style>
</head>
3、list-style-image
list-style-image：将列表前面的项目符号设置成一张图片，它的值是：url（图片的地址）
4、list-style
list-style：这个属性是一个简写属性，它集成了上面三个属性的功能。可以同时设置上面的三个属性，每个属性值之前使用空格分隔！它的属性值可以有一个也可以有两个也可以三个。其属性值个数不定，位置也不定！
list-style：去除列表前面的项目符号
list-style：none inside url （./images/li01.jpg)
或者
none url （./images/li01.jpg）也可以执行
