静态html菜单,构建静态页面 之 [ 列表 ]

列表

描述

列表可以分为：有序列表、无序列表

有序列表

1. 元素 - 表示定义有序列表

属性有

type属性 - 表示设置有序列表项目符号的样类型

属性值：1(数学) A(大写字母) a(小写字母) I(大写罗马数学) i(小写罗马数字)

start属性 - 表示有序列表的项目符号从什么位置开始

属性值必须为数字值

元素 - 表示列表中的列表项

属性有

type属性 - 表示设置当前列表项的项目符号类型

属性值：1(数学) A(大写字母) a(小写字母) I(大写罗马数学) i(小写罗马数字)

value属性 - 表示当前列表项的项目符号从什么位置开始

属性值必须为数字值

3. 手机
5. 电脑
6. 平板

无序列表

• 元素 - 表示有序列表

type属性 - 表示设置无序列表项目符号的样类型

属性值

disc - 表示实心圆 “默认值”

circle - 表示空心圆

square - 表示实心方形

元素 - 表示列表中的列表项

type属性 - 表示设置当前列表项的项目符号类型

属性值

disc - 表示实心圆 “默认值”

circle - 表示空心圆

square - 表示实心方形

• 手机
• 电脑
• 平板

列表样式

list-style-type属性

表示设置列表项目符号的类型

注意：有序的可以设置无序的类型，无序的也可以设置有序的类型

建议：有序设置有序的，无序设置无序的，保证元素语义化

项目符号的样式

ul {

/*

list-style-type属性 - 表示设置列表项目符号的类型

* 注意：有序的可以设置无序的类型，无序的也可以设置有序的类型

* 建议：有序设置有序的，无序设置无序的，保证元素语义化

*/

list-style-type: square;

}

• 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.
• 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.
• 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?

list-style-image属性

表示引入外部项目符号样式(图片)

注意：设置list-style-image属性后，list-style-type属性会无效

项目符号的样式

ul {

/*

list-style-image属性 - 表示引入外部项目符号样式(图片)

* 设置list-style-image属性后，list-style-type属性会无效

*/

list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif");

}

• 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.
• 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.
• 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?

list-style-position属性

表示设置项目符号的位置

项目符号的样式

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;*/

}

• 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.
• 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.
• 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?