菜单 学习猿地 - LMONKEY

VIP

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练！告别无效练习

接私单赚外块

VIP优先接，累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

开通VIP

领取更多软件工程师实用特权

 入驻

搜索

类型： 全部 | 视频教程 | 实战项目 | 项目源码 | 技术手册 | 课件 | 测试题 | 技术文章 | 软件下载 | 问答求助
水平： 全部 | 入门 | 普通 | 进阶

历史记录 清除记录

    你还没搜索过喔。

近期热搜

项目开发全程实录（电商EW_Shop）

8713 人 2年前

轻松学会Laravel-项目篇（商城API）

2030 人 2年前

Python数据分析2.0-金融

329 人 3年前

Python办公自动化2.0

243 人 3年前
阅读(54) 书签 赞(0) 我要纠错

CSS 列表样式 (ul)

原创
CSS教程
05/13 14:22 更新
尊享10+项VIP特权
会员卡
开通学习猿地会员卡

CSS 列表

CSS 列表属性作用如下：

  • 设置不同的列表项标记为有序列表
  • 设置不同的列表项标记为无序列表
  • 设置列表项标记为图像

列表

在 HTML 中，有两种类型的 HTML列表：

  • 无序列表 - 列表项的标记使用特殊图形（如小黑点、小方框等）
  • 有序列表 - 列表项的标记使用数字或字母

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

不同的列表项标记

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

实例

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;}

一些值是无序列表，以及有些是有序列表。

下列是对 list-style-type 属性的常见属性值的描述：

  • none：不使用项目符号
  • disc：实心圆
  • circle：空心圆
  • square：实心方块
  • decimal：阿拉伯数字
  • lower-alpha：小写英文字母
  • upper-alpha：大写英文字母
  • lower-roman：小写罗马数字
  • upper-roman：大写罗马数字

作为列表项标记的图像

要指定列表项标记的图像，使用列表样式图像属性：

实例

ul  
{  
list-style-image: url('sqpurple.gif');  
}

上面的例子在各大主流浏览器中的显示有所差异，IE 和 Opera 显示图像标记比火狐（ Firefox ），Chrome 和 Safari 更高一点点。

**提示：

  • 利用 list-style-position 可以确定标志出现在列表项内容之外还是内容内部。
  • 如果你想在所有的浏览器放置同样的形象标志，就应使用浏览器兼容性解决方案，方法如下。

**

浏览器兼容性解决方案

同样在所有的浏览器，下面的例子会显示的图像标记：

实例

ul {  
  list-style-type: none;  
  padding: 0px;  
  margin: 0px;  
}  
ul li {  
  background-image: url(sqpurple.gif);  
  background-repeat: no-repeat;  
  background-position: 0px 5px;  
  padding-left: 14px;  
}

例子解释：

  • ul :
    • 设置列表样式类型为没有列表项标记
    • 设置填充和边距 0px（浏览器兼容性）
  • ul 中所有 li :
    • 设置图像的 URL ，并设置它只显示一次（无重复）
    • 您需要的定位图像位置（左 0px 和上下 5px ）
    • 用 padding-left 属性把文本置于列表中

列表 -简写属性

在单个属性中可以指定所有的列表属性。这就是所谓的简写属性。

为列表使用简写属性，列表样式属性设置如下：

实例

ul {  
  list-style: square url("sqpurple.gif");  
}

如果使用缩写属性值的顺序是：

1.list-style-type
2.list-style-position (有关说明，请参见下面的CSS属性表)
3.list-style-image

在简写属性时，如果上述值丢失一个，其余仍在指定的顺序，就没关系。

更多实例

所有不同的列表项标记
这个例子演示了所有不同的 CSS 列表项标记。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>学习猿地</title> 
<style>
    ul.a {list-style-type:circle;}
    ul.b {list-style-type:disc;}
    ul.c {list-style-type:square;}
    
    ol.d {list-style-type:armenian;}
    ol.e {list-style-type:cjk-ideographic;}
    ol.f {list-style-type:decimal;}
    ol.g {list-style-type:decimal-leading-zero;}
    ol.h {list-style-type:georgian;}
    ol.i {list-style-type:hebrew;}
    ol.j {list-style-type:hiragana;}
    ol.k {list-style-type:hiragana-iroha;}
    ol.l {list-style-type:katakana;}
    ol.m {list-style-type:katagana-iroha;}
    ol.n {list-style-type:lower-alpha;}
    ol.o {list-style-type:lower-greek;}
    ol.p {list-style-type:lower-latin;}
    ol.q {list-style-type:lower-roman;}
    ol.r {list-style-type:upper-alpha;}
    ol.s {list-style-type:upper-latin;}
    ol.t {list-style-type:upper-roman;}
    
    ol.u {list-style-type:none;}
    ol.v {list-style-type:inherit;}

</style>
</head>

<body>
    <ul class="a">
        <li>Circle 样式</li>
        <li>茶</li>
        <li>可口可乐</li>
    </ul>
    
    <ul class="b">
        <li>Disc 样式</li>
        <li>茶</li>
        <li>可口可乐</li>
    </ul>
    
    <ul class="c">
        <li>Square 样式</li>
        <li>茶</li>
        <li>可口可乐</li>
    </ul>
    
    <ol class="d">
        <li>Armenian 样式</li>
        <li>茶</li>
        <li>可口可乐</li>
    </ol>
    
    <ol class="e">
        <li>Cjk-ideographic 样式</li>
        <li>茶</li>
        <li>可口可乐</li>
    </ol>
    
    <ol class="f">
        <li>Decimal 样式</li>
        <li>茶</li>
        <li>可口可乐</li>
    </ol>
    
    <ol class="g">
        <li>Decimal-leading-zero 样式</li>
        <li>茶</li>
        <li>可口可乐</li>
    </ol>
    
    <ol class="h">
        <li>Georgian 样式</li>
        <li>茶</li>
        <li>可口可乐</li>
    </ol>
    
    <ol class="i">
        <li>Hebrew 样式</li>
        <li>茶</li>
        <li>可口可乐</li>
    </ol>
    
    <ol class="j">
        <li>Hiragana 样式</li>
        <li>茶</li>
        <li>可口可乐</li>
    </ol>
    
    <ol class="k">
        <li>Hiragana-iroha 样式</li>
        <li>茶</li>
        <li>可口可乐</li>
    </ol>
    
    <ol class="l">
        <li>Katakana 样式</li>
        <li>茶</li>
        <li>可口可乐</li>
    </ol>
    
    <ol class="m">
        <li>Katakana-iroha 样式</li>
        <li>茶</li>
        <li>可口可乐</li>
    </ol>
    
    <ol class="n">
        <li>Lower-alpha 样式</li>
        <li>茶</li>
        <li>可口可乐</li>
    </ol>
    
    <ol class="o">
        <li>Lower-greek 样式</li>
        <li>茶</li>
        <li>可口可乐</li>
    </ol>
    
    <ol class="p">
        <li>Lower-latin 样式</li>
        <li>茶</li>
        <li>可口可乐</li>
    </ol>
    
    <ol class="q">
        <li>Lower-roman 样式</li>
        <li>茶</li>
        <li>可口可乐</li>
    </ol>
    
    <ol class="r">
        <li>Upper-alpha 样式</li>
        <li>茶</li>
        <li>可口可乐</li>
    </ol>
    
    <ol class="s">
        <li>Upper-latin 样式</li>
        <li>茶</li>
        <li>可口可乐</li>
    </ol>
    
    <ol class="t">
        <li>Upper-roman 样式</li>
        <li>茶</li>
        <li>可口可乐</li>
    </ol>
    
    <ol class="u">
        <li>None 样式</li>
        <li>茶</li>
        <li>可口可乐</li>
    </ol>
    
    <ol class="v">
        <li>inherit 样式</li>
        <li>茶</li>
        <li>可口可乐</li>
    </ol>

</body>
</html>

所有的CSS列表属性

属性 描述
list-style 简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image 将图象设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。

推荐文章

推荐教程

推荐课程

    © 著作权归作者所有

    举报
    综合评分：9.9 评分 请对本文进行纠错，及学习过程中有困难疑惑可在此进行讨论

    学习猿地
    程序员学习的地方

    扫码关注

    成就自己的只需一套精品