购物车
登陆 / 注册
微信扫码登陆

推荐手册

CSS 列表样式(ul)

CSS 列表样式(ul)
CSS 列表样式可以设置不同列表项标记的有序列表,不同列表项标记的无序列表或者是设置列表的标记为图像。
编辑:前端控 前端控 更新时间:2019-03-22 14:02:57

CSS 列表样式(ul) 

CSS列表属性作用如下:

  • 设置不同列表项标记的有序列表

  • 设置不同列表项标记的无序列表

  • 设置列表项标记为图像

列表类型

在HTML中,有两种类型的列表:

无序列表:列表项标记用特殊图形(如小黑点、小方框等)来表示

有序列表 :列表项的标记有数字或字母

使用CSS,可以列出进一步的样式,并可用图像作列表项标记

不同的列表项标记

list-style-type属性用于指定列表项标记的类型

  • :circle:

  • :square

实例

<style>
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
</style>
</head>
<body>
<p>无序列表实例:</p>
<ul class="a">
  <li>HTML中文网</li>
</ul>
<ul class="b">
  <li>HTML中文网</li>
</ul>
<p>有序列表实例:</p>
<ol class="c">
  <li>HTML中文网</li>
</ol>
<ol class="d">
  <li>HTML中文网</li>
</ol>

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

作为列表项标记的图像

list-style-image属性用于指定列表项标记的图像,使用列表样式图像属性

实例

<style>
li{
list-style-image:url("images/xing.jpg");
}
</style>
</head>

<body>
<ul>
  <li>HTML中文网</li>
  <li>HTML中文网</li>
  <li>HTML中文网</li>
</ul>

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

简写列表样式

为简单起见,可以将 3 个列表样式属性合并为一个方便的属性:list-style

实例

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

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

Image 14.jpg

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

所有的CSS属性

属性描述
list-style简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image将图象设置为列表项标志。
list-style-position设置列表中列表项标志的位置。
list-style-type设置列表项标志的类型。
网站导航
网站首页
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ交流群
微信公众号
微信公众号