开发者学堂课程【零基础学前端 HTML+CSS：列表 】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/398/detail/5114
列表
内容介绍
一．什么是 CSS 列表{ list-style-type:xxxx }
二．CSS 列表的属性值
一．什么是 CSS 列表
CSS 列表是分为有序列表和无序列表（ ur 和 ol ）,无序和有序的区别一个前面是点一个是 1234 。改变有序列表和无序列表的样式就用{ list-style-type:xxxx }。
1、首先要写一个列表 ul，< li >中间写北京、上海、广州，显示的是一个无序列表。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul>
</body>
</html>
无序列表显示结果如下：
2、如果要取消掉无序列表的效果，需要用样式表< style >中 list-style-type 为 none ，刷新之后会发现 ul 中的点消失了，写 ul 下的内容取消它前面的值，所以页面的 ul 没有了。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
ul{
List-style-type:none;
}
<style>
</head>
<body>
<ul>
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul>
</body>
</html>
运行效果图：
3、如果 ul 是一个单独的，可以加一个 div 。可以加 list-style-type: lower-roman 显示的小写罗马数字，刷新之后显示的是罗马字符的 12345。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
ul{
List-style-type:lower-roman;
}
<style>
</head>
<body>
<ul>
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul>
</body>
</html>
运行效果图：
4、但一般用的最多是 none ,什么都不显示，取消之后的列表特别方便做菜单，它的结构化是有序列的，有顺序的，相比于其它方法更适用于做菜单。
二．CSS 列表的属性值
值 |
描述 |
none |
无标记。 |
disc |
默认。标记是实心圆。 |
circle |
标记是空心圆。 |
square |
标记是实心方块。 |
decimal |
标记是数字。 |
decimal-leading-zero |
0 开头的数字标记。(01,02,03,等。) |
lower-roman |
小写罗马数字(i, ii,ii, iv,v,等。) |
upper-roman |
大写罗马数字(I, II,III,V,V,等。) |
lower-alpha |
小写英文字母 The marker is lower-alpha (a, b, c,d,e,等。) |
upper-alpha |
大写英文字母The marker is upper-alpha (A B,C,D,E,等。) |
lower-greek |
小写希腊字母( alpha, beta, gamma ,等。) |
lower-latin |
小写拉丁字母(a, b,c, d,e,等。) |
upper-latin |
大写拉丁字母(A,B,C,D,E,等。) |
