css列表之list列表样式属性的用法笔记

原创 PHP笔记  2017-03-23 17:33  阅读 848 views 次

html中,有无序列表和有序列表两种类型的列表,无序列表的默认列表项标记一般为小黑点,有序列表的列表项的默认标记一般是数字。我们通过使用css,可以改变列表样式,甚至可也用图像来作为列表项标记。

列表css属性

  • list-style:简写属性;
  • list-style-image:将图象设置为列表项标志。
  • list-style-position:列表中列表项标志的位置。
  • list-style-type:列表项标志的类型。

1、列表项标志的类型(list-style-type)

list-style-type属性是用来设置列表项标记的类型。

实例:

......
<body>
<style type="text/css">
#a{list-style-type: circle;}
#b{list-style-type: disc;}
#c{list-style-type: upper-latin;}
#d{list-style-type: lower-latin;}
</style>
<ul id="a"><li>无序列表1</li></ul>
<ul id="b"><li>无序列表2</li></ul>
<ol id="c"><li>有序列表1</li></ol>
<ol id="d"><li>有序列表2</li></ol>
</body>
......

运行结果:

2、列表中列表项标志的位置(list-style-position)

  • inside:列表项目标记放置在文本的内部,环绕文本根据标记对齐。
  • outside(默认值):列表项目标记放置在文本的外部,环绕文本不根据标记对齐。

实例:

......
<body>
<style type="text/css">
#a{list-style-type: circle;}
#b{list-style-type: circle;list-style-position:inside;}
#c{list-style-type: upper-latin;}
#d{list-style-type: upper-latin;list-style-position:inside;}
</style>
<ul id="a"><li>无序列表1</li></ul>
<ul id="b"><li>无序列表2</li></ul>
<ol id="c"><li>有序列表1</li></ol>
<ol id="d"><li>有序列表2</li></ol>
</body>
......

运行结果:

 

3、图象设置为列表项标志(list-style-image)

在网页中,将一个小图标设置为列表项目标记是很常见的。

格式:

list-style-image: url('图像地址');

实例:

......
<body>
<style type="text/css">
#a{list-style-image: url('https://www.ggbiji.com/wp-content/themes/Nana2.09/avatar/default.jpg');}
#b{list-style-image: url('https://www.ggbiji.com/wp-content/themes/Nana2.09/avatar/default.jpg');}
</style>
<ul id="a"><li>无序列表</li></ul>
<ol id="b"><li>有序列表</li></ol>
</body>
......

运行结果:

4、简写属性(list-style)

list-style属性可以指定所有的列表属性,这就是缩写/简写属性。

顺序:list-style-type、list-style-position 、list-style-image

属性值并非要全部存在,根据实际情况选择,但必须满足先后顺序。

本文地址:https://www.ggbiji.com/css-list.html
版权声明:本文为 PHP笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情