列表
描述
- 列表可以分为：有序列表、无序列表
有序列表
-
<ol>元素 - 表示定义有序列表 -
属性有
-
type属性 - 表示设置有序列表项目符号的样类型
- 属性值：1（数学） A（大写字母） a（小写字母） I（大写罗马数学） i（小写罗马数字）
-
start属性 - 表示有序列表的项目符号从什么位置开始
- 属性值必须为数字值
-
-
<li>元素 - 表示列表中的列表项 -
属性有
-
type属性 - 表示设置当前列表项的项目符号类型
- 属性值：1（数学） A（大写字母） a（小写字母） I（大写罗马数学） i（小写罗马数字）
-
value属性 - 表示当前列表项的项目符号从什么位置开始
- 属性值必须为数字值
-
<body>
<!--
<ol>元素 - 表示有序列表
* type属性 - 表示设置有序列表项目符号的样类型
* 属性值：1（数学） A（大写字母） a（小写字母） I（大写罗马数学） i（小写罗马数字）
* start属性 - 表示有序列表的项目符号从什么位置开始
* 属性值必须为数字值
<li>元素 - 表示列表中的列表项
* type属性 - 表示设置当前列表项的项目符号类型
* 属性值：1（数学） A（大写字母） a（小写字母） I（大写罗马数学） i（小写罗马数字）
* value属性 - 表示当前列表项的项目符号从什么位置开始
* 属性值必须为数字值
-->
<ol type="A" start="3">
<li>手机</li>
<li type="a" value="5">电脑</li>
<li>平板</li>
</ol>
</body>
无序列表
-
<ul>元素 - 表示有序列表- type属性 - 表示设置无序列表项目符号的样类型
-
属性值
- disc - 表示实心圆 “默认值”
- circle - 表示空心圆
- square - 表示实心方形
-
<li>元素 - 表示列表中的列表项- type属性 - 表示设置当前列表项的项目符号类型
-
属性值
- disc - 表示实心圆 “默认值”
- circle - 表示空心圆
- square - 表示实心方形
<body>
<!--
<ul>元素 - 表示有序列表
* type属性 - 表示设置无序列表项目符号的样类型
* 属性值：disc - 表示实心圆 “默认值”
circle - 表示空心圆
square - 表示实心方形
<li>元素 - 表示列表中的列表项
* type属性 - 表示设置当前列表项的项目符号类型
* 属性值：disc - 表示实心圆 “默认值”
circle - 表示空心圆
square - 表示实心方形
-->
<ul type="square">
<li>手机</li>
<li type="circle">电脑</li>
<li>平板</li>
</ul>
</body>
列表样式
list-style-type属性
-
表示设置列表项目符号的类型
- 注意：有序的可以设置无序的类型，无序的也可以设置有序的类型
- 建议：有序设置有序的，无序设置无序的，保证元素语义化
<head>
<meta charset="UTF-8">
<title>项目符号的样式</title>
<style>
ul {
/*
list-style-type属性 - 表示设置列表项目符号的类型
* 注意：有序的可以设置无序的类型，无序的也可以设置有序的类型
* 建议：有序设置有序的，无序设置无序的，保证元素语义化
*/
list-style-type: square;
}
</style>
</head>
<body>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet architecto distinctio dolores earum eos eveniet expedita fugit, nemo nihil perferendis quam quasi rerum sunt tempore vel? Ducimus eum nobis non.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta eum facilis ipsam quae ratione temporibus ut, vel. Assumenda atque blanditiis enim, ipsa nesciunt numquam obcaecati rerum, sed tenetur ut voluptates.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A blanditiis consequatur cupiditate debitis dignissimos doloremque, et exercitationem fuga illo non nulla odit officia optio perferendis perspiciatis placeat ratione veritatis! Facere?</li>
</ul>
</body>
list-style-image属性
-
表示引入外部项目符号样式（图片）
- 注意：设置list-style-image属性后，list-style-type属性会无效
<head>
<meta charset="UTF-8">
<title>项目符号的样式</title>
<style>
ul {
/*
list-style-image属性 - 表示引入外部项目符号样式（图片）
* 设置list-style-image属性后，list-style-type属性会无效
*/
list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif");
}
</style>
</head>
<body>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet architecto distinctio dolores earum eos eveniet expedita fugit, nemo nihil perferendis quam quasi rerum sunt tempore vel? Ducimus eum nobis non.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta eum facilis ipsam quae ratione temporibus ut, vel. Assumenda atque blanditiis enim, ipsa nesciunt numquam obcaecati rerum, sed tenetur ut voluptates.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A blanditiis consequatur cupiditate debitis dignissimos doloremque, et exercitationem fuga illo non nulla odit officia optio perferendis perspiciatis placeat ratione veritatis! Facere?</li>
</ul>
</body>
list-style-position属性
- 表示设置项目符号的位置
<head>
<meta charset="UTF-8">
<title>项目符号的样式</title>
<style>
ul {
/*
list-style-type属性 - 表示设置列表项目符号的类型
* 注意：有序的可以设置无序的类型，无序的也可以设置有序的类型
* 建议：有序设置有序的，无序设置无序的，保证元素语义化
*/
list-style-type: square;
/*
list-style-image属性 - 表示引入外部项目符号样式（图片）
* 设置list-style-image属性后，list-style-type属性会无效
*/
list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif");
/* list-style-position属性 - 表示设置项目符号的位置 */
list-style-position: outside;
/* list-style属性也允许简写 */
/*list-style: url("https://mdn.mozillademos.org/files/11981/starsolid.gif") outside;*/
}
</style>
</head>
<body>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet architecto distinctio dolores earum eos eveniet expedita fugit, nemo nihil perferendis quam quasi rerum sunt tempore vel? Ducimus eum nobis non.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta eum facilis ipsam quae ratione temporibus ut, vel. Assumenda atque blanditiis enim, ipsa nesciunt numquam obcaecati rerum, sed tenetur ut voluptates.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A blanditiis consequatur cupiditate debitis dignissimos doloremque, et exercitationem fuga illo non nulla odit officia optio perferendis perspiciatis placeat ratione veritatis! Facere?</li>
</ul>
</body>