你好，游客 登录 注册 搜索
背景：
阅读新闻

CSS手册简编

列表属性

[日期：2004-10-18] 来源：中華風雲網  作者： [字体：大 中 小]

CSS属性：

7、列表属性：

这里的属性用来描述列表（list）的一系列属性。

list-style-type属性描述用于列表每一项前使用的符号：

属性名称: 'list-style-type'
属性值: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
初始值: disc
适合对象: 列表元素
是否继承: yes
百分比备注: 被禁止

属性值含义为：
disc：圆饼形。
circle：空心圆形。
square：方形。
decimal：十进制数值。
lower-roman：小写罗马数字。
upper-roman：大写罗马数字。
lower-alpha：小写希腊字母。
upper-alpha：大写希腊字母。

例如：

<STYLE>
OL { list-style-type: lower-roman }
</STYLE>
<BODY>
<OL>
<LI> This is the first item.
<LI> This is the second item.
<LI> This is the third item.
</OL>
</BODY>

还可以利用list-style-image把列表前面的符号换为图形：

属性名称: 'list-style-image'
属性值: <url> | none
初始值: none
适合对象: 列表元素
是否继承: yes
百分比备注: 被禁止

<url>可以是绝对地址，也可以是相对地址。

list-style-position属性用于描述列表的位置显示：

属性名称: 'list-style-position'
属性值: inside | outside
初始值: outside
适合对象: 列表元素
是否继承: yes
百分比备注: 被禁止

属性值outside和inside分别表示在BOX外部显示或内部显示，例如：

<STYLE type="text/css">
UL { list-style: outside }
UL.compact { list-style: inside } </STYLE> <UL>
<LI>first list item comes first
<LI>second list item comes second
</UL>
<UL class=compact>
<LI>first list item comes first
<LI>second list item comes second
</UL>

list-style属性为以上属性的快捷方式：

属性名称: 'list-style'
属性值: <'list-style-type'> || <'list-style-position'> || <'list-style-image'>
初始值: no
适合对象: 列表元素
是否继承: yes
百分比备注: 被禁止

例如：

UL { list-style: upper-roman inside } /* 对任何UL有效*/
UL ~ UL { list-style: circle outside } /* 对任何UL内部的UL标记有效*/

【内容导航】
第1页：总论 第2页：选择器的使用方法
第3页：媒体属性 第4页：BOX属性
第5页：布局属性 第6页：颜色背景属性
第7页：字体属性 第8页：文本属性
第9页：列表属性 第10页：表格属性
第11页：用户属性
收藏 推荐 打印 | 录入：木鸟 | 阅读： 次
典型的三行二列居中高度自适应布局
固定表头内容滚动表格
相关新闻      
本文评论 　　查看全部评论 (20)
表情： 表情 姓名： 字数
点评：
　　　 　　　
评论声明
  • 尊重网上道德，遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款
第 20 楼
匿名 发表于 2008-10-14 14:57:52
回复 烛光 的评论
现在打开网页速度变快了，很好！
恭喜
回复 支持 (5) 反对 (1)
第 19 楼
匿名 发表于 2008-10-8 16:58:06
回复 YY 的评论
介绍的太少了，不够有些用户的使用，再有一点了解html的人，往下再看那些方面的书？
我仅仅看了前两页，并参照说明编写了测试网页，非常感谢作者。受益匪浅！
回复 支持 (3) 反对 (3)
第 18 楼
玩儿玩儿 发表于 2008-9-18 10:58:10
好 东西啊 支持
回复 支持 (3) 反对 (2)
第 17 楼
xh 发表于 2008-5-8 17:19:14
挺好的
回复 支持 (3) 反对 (2)
第 16 楼
276952687 发表于 2008-4-25 16:46:08
唉!!!!!!!
没有中意的啊
回复 支持 (9) 反对 (1)
Digg排行
热门评论
276952687 发表于 2008-4-25 16:46:08
唉!!!!!!!
没有中意的啊
回复 支持 (9) 反对 (1)
匿名 发表于 2008-10-14 14:57:52
恭喜
回复 支持 (5) 反对 (1)
123 发表于 2007-7-9 21:03:34
能不能介绍通俗一点，边介绍边举例啊？
回复 支持 (5) 反对 (2)
烛光 发表于 2005-1-21 10:32:30
现在打开网页速度变快了，很好！
回复 支持 (4) 反对 (1)
匿名 发表于 2008-10-8 16:58:06
我仅仅看了前两页，并参照说明编写了测试网页，非常感谢作者。受益匪浅！
回复 支持 (3) 反对 (3)
玩儿玩儿 发表于 2008-9-18 10:58:10
好 东西啊 支持
回复 支持 (3) 反对 (2)
xh 发表于 2008-5-8 17:19:14
挺好的
回复 支持 (3) 反对 (2)
基本原理 发表于 2007-11-28 21:53:18
我觉得讲解的例子应该可以运行代码要好点
回复 支持 (3) 反对 (1)
YY 发表于 2006-4-25 9:24:56
介绍的太少了，不够有些用户的使用，再有一点了解html的人，往下再看那些方面的书？
回复 支持 (3) 反对 (1)
风 发表于 2006-4-19 15:21:09
真试很好 啊！
回复 支持 (0) 反对 (0)