码迷,mamicode.com
首页 > Web开发 > 详细

CSS 列表

时间:2019-07-01 21:27:52      阅读:205      评论:0      收藏:0      [点我收藏+]

标签:罗马数字   list   one   none   序列   div   英文字母   span   url   

  CSS 为列表结构定义了几个专门属性,如下说明:

一、list-style-type 设计项目符号类型

  使用该属性定义列表项目符号的类型,取值说明如下:

属性值 说明
disc 实心圆,默认值
circle 空心圆 
square 实心方块
decimal 阿拉伯数字 
lower-roman 小写罗马数字 
lower-latin 小写拉丁字母 
upper-roman 大写罗马数字 
lower-alpha 小写英文字母 
upper-alpha 大写英文字母 
none 不适用项目符号 
upper-latin 大写拉丁字母 

 

二、list-style-image 自定义项目符号

  使用该属性允许指定一个外部图标文件,来满足个性化设计需求。

  语法:

list-style-image: none | <url>
    •     none:表示默认值,没有项目符号;
    •      url:表示指定的外部文件的路径;

  Tips:同时定义项目符号和自定义项目符号时,自定义项目符号将覆盖默认的符号类型。

三、list-style-position 定义列表项目符号的显示位置

  该属性定义项目符号的显示位置。

  语法:

list-style-position: outside | inside ;
    •       outside:表示默认值,表示把项目符号显示在列表项的文本行以外;
    •       inside:表示把项目符号显示在列表项文本行以内。

 Tips:项目符号显示在里面和外面会影响项目符号与列表文本之间的距离,同时影响列表项的缩进效果。不同浏览器在解析时会存在差异。

四、list-style 复合属性

  该属性是一个复合属性,可以设置与列表项目相关的内容。

  Demo:

li {list-style : url(example.gif) square inside}

  Tips:list-style 的值可以按任何顺序列出,而且这些值都可以忽略。只要提供了一个值,其它的就会填入其默认值。

 

CSS 列表

标签:罗马数字   list   one   none   序列   div   英文字母   span   url   

原文地址:https://www.cnblogs.com/niujifei/p/11116698.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!