当前位置:软件学堂 > 资讯首页 > 网络编程 > DIV+CSS > CSS列表综合属性list-style

CSS列表综合属性list-style

2012/11/26 12:30:44作者:佚名来源:网络

移动端

【实例介绍】

CSS列表综合属性list-style

列表综合属性(1ist-style)用来统一定义列表的各种显示效果。在列表综合属性中,可以同时定义列表的标签位置、使用图片、列表符号等属性。

【基本语法】

list-style:list-style-image  |   list-style-position  |   list-style-type

【语法介绍】

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

【实例代码】

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css" media="all"> ul#test1 { list-style:square inside url("images/list.png");} ul#test2 { list-style:none;} </style> </head> <body> <ul id="test1"> <li>list-style示例</li>    <li>list-style示例</li> <li>list-style示例</li> <li>list-style示例</li> </ul> </body> </html>

【代码分析】

在代码中,加粗部分的标签用来设置列表复合属性,如图所示。

列表综合属性list-style运行效果

 【素材及源码下载】

请点击:CSS列表综合属性list-style 下载本实例相关素材及源码