CSS-列表属性

使用列表属性可以设置列表项的样式,包括符号、缩进等。

1.1列表符号 list-style-type

使用列表符号属性可以设置列表项所使用的符号类型。

语法:

list-style-type:值

1.2图像符号 list-style-image

图像符号属性是指使用图像作为列表符号,以美化网页。

语法:

list-style-image:none | url(图像地址)

说明:none表示不指定图像,url则使用绝对地址或相对地址指定符号的图像。

举例:

 
 
CSS控制列表元素显示 
 
 
 
  • 诗词歌赋
  • 散文精选
  • 言情小说
  • 诗词歌赋
  • 散文精选
  • 言情小说
运行结果:

CSS-列表属性_第1张图片

1.3列表缩进list-style-position

使用列表缩进属性可以设置列表缩进的程度。

语法:

list-style-position:outside | inside

说明:outside 表示列表项目目标记放置在文本以外,且环绕文本不根据标记对齐;inside表示列表项目标记放置在文本以内,且环绕文本根据标记对齐。

 
 
列表缩进 
 
 
 
  1. 蒹葭苍苍,白露为霜。所谓伊人,在水一方。
  2. 溯洄从之,道阻且长。溯游从之,宛在水中央。
  3. 蒹葭萋萋,白露未晞。所谓伊人,在水之湄。
  4. 溯洄从之,道阻且跻。溯游从之,宛在水中坻。
  5. 蒹葭采采,白露未已。所谓伊人,在水之涘。

运行结果:

CSS-列表属性_第2张图片

1.4列表复合属性 list-style

列表复合属性用于设置列表项目的相关样式。

语法:

list-style:list-style-image | list-stale-position | list-stle_type

说明:当 list-style-image 和list-style-type 都被指定的时候,list-style-image 将优先;除非 list-style-image 设置为 none 或指定 url 地址的图片不能被显示。

 
 
复合属性列表 
 
 
 
  1. 蒹葭苍苍,白露为霜。所谓伊人,在水一方。
  2. 溯洄从之,道阻且长。溯游从之,宛在水中央。
  3. 蒹葭萋萋,白露未晞。所谓伊人,在水之湄。
  4. 溯洄从之,道阻且跻。溯游从之,宛在水中坻。
  5. 蒹葭采采,白露未已。所谓伊人,在水之涘。

运行结果:

CSS-列表属性_第3张图片

      列表是一种非常实用的数据排列方式,它以条列式的模式来显示数据,是读者能够一目了然。列表元素通常用来定义导航,或者文章标题列表等内容。


你可能感兴趣的:(BS学习)