Keep on going, never give up.

CSS列表样式list-style演示示例

本文演示全部CSS list-style列表样式属性,因样式类型太多,干脆全部测试抓个图下来,大家用的时候直接对照着找一种风格就可以了,list-style有三种属性,包括list-style-type、list-style-position和list-style-image,分别对应设置列表样式类型、位置和图片,默认是图片属性为none,所以最常用的还是前两种属性。

一、list-style样式属性

list-style有三个属性,分别按以下顺序设置:

  • list-style-type表示列表样式类型,总共有22种,演示参下文,缺省值 disc
  • list-style-position表示列表样式位置,缺省值outside,outside是以列表项内容为准对齐(参下面演示),inside是以列表项标记为准对齐。
  • list-style-image表示列表样式图片,对既有列表类型不满意时,可以使用图片来替代,缺省值none

样式风格可一次指定,也可以分立单独指定:

如一次指定:list-style:circle outside url(/images/arrow.gif);

也可单独指定:list-style-type:circle;list-style-position:outside;list-style-image:url(/images/arrow.gif);

示例:

<style type="text/css">
.sa {width:200px; border:1px solid #CCC;font-size:15px; background:#FFF7DE;}
.sa li {list-style:circle inside;margin:3px 0px 0px 0px;}
</style>
<ul class="sa">
    <li>欢迎光临 天缘博客</li>
    <li>欢迎光临 天缘博客</li>
    <li>欢迎光临 天缘博客</li>
</ul>

二、list-style-position样式位置属性演示

1、list-style:inside;样式

2、list-style:outside;样式(默认)

三、list-style-type样式类型演示

默认list-style-position为outside下测试抓图(Firefox下)。

1、list-style:armenian;样式

2、list-style:circle;样式

3、list-style:cjk-ideographic;样式

4、list-style:decimal;样式

5、list-style:decimal-leading-zero;样式

6、list-style:disc;样式(默认)

7、list-style:georgian;样式

8、list-style:hebrew;样式

9、list-style:hiragana;样式

10、list-style:hiragana-iroha;样式

11、list-style:katakana;样式

12、list-style:katakana-iroha;样式

13、list-style:lower-alpha;样式

14、list-style:lower-greek;样式

15、list-style:lower-latin;样式

16、list-style:lower-roman;样式

17、list-style:none;样式

18、list-style:square;样式

19、list-style:upper-alpha;样式

20、list-style:upper-latin;样式

21、list-style:upper-roman;样式

22、list-style:inherit;样式

三、list-style-image图片样式演示

list-style-image就是前面的列表项标记以图片形式代替,演示略。

更多阅读:http://www.w3school.com.cn/css/pr_list-style.asp

相关评论(0):  

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

订阅博客

最新文章

本站采用创作共用版权协议, 要求署名、非商业用途和保持一致. 转载也必须遵循“署名-非商业用途-保持一致”的创作共用协议. 返回顶部
Copyright@2005-2016 Metsky.com, All rights Reserved.