上一节:
下一节:

  CSS 列表

  • HTML列表和CSS列表属性

    在HTML中，有两种主要类型的列表：
    • 无序列表（<ul>） - 列表项用子弹标记
    • 有序列表（<ol>） - 列表项用数字或字母标记
    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-image属性将图像指定为列表项标记： 
    ul {
             list-style-image: url('/images/link_icon.jpg');
           }
    尝试一下

  • 列表项标记位置

    list-style-position属性指定列表项标记（项目符号点）的位置。“list-style-position：outside;” 表示项目符号点位于列表项之外。列表项的每一行的开头将垂直对齐。这是默认值：
    • 咖啡 - 由烘焙咖啡豆制成的酿造饮料......
    • 茶
    • 可口可乐
    “list-style-position：inside;” 表示项目符号将位于列表项内。因为它是列表项的一部分，它将成为文本的一部分并在开头推送文本：
    • 咖啡 - 由烘焙咖啡豆制成的酿造饮料......
    • 茶
    • 可口可乐
    ul.a {
             list-style-position: outside;
           }

           ul.b {
             list-style-position: inside;
           }
    尝试一下

  • 删除默认设置

    list-style-type:none属性还可用于移除标记/子弹。请注意，该列表还具有默认边距（外边距）和填充（内边距）。要删除此，添加margin:0和padding:0至<ul>或<ol>： 
    ul.demo {
             list-style-type: none;
             margin: 0;
             padding: 0;
           }
    尝试一下

  • 列表 - 缩写属性

    list-style属性是一个缩写属性。它用于在一个声明中设置所有列表属性： 
    ul {
             list-style: square inside url("/images/link_icon.jpg");
           }
    尝试一下
    使用缩写属性时，属性值的顺序为：
    • list-style-type （如果指定了list-style-image，如果由于某种原因无法显示图像，则会显示此属性的值）
    • list-style-position （指定列表项标记是否应出现在内容流的内部或外部）
    • list-style-image （指定图像作为列表项标记）
    如果缺少上述某个属性值，则将插入缺少属性的默认值（如果有）。

  • 有颜色的列表造型

    我们还可以使用颜色设置列表样式，使它们看起来更有趣。添加到<ol>或<ul>标记的任何内容都会影响整个列表，而添加到<li>标记的属性会影响单个列表项： 
    ol {
             background: #ff9999;
             padding: 20px;
           }

           ul {
             background: #3399ff;
             padding: 20px;
           }

           ol li {
             background: #ffe5e5;
             padding: 5px;
             margin-left: 35px;
           }

           ul li {
             background: #cce5ff;
             margin: 5px;
           }
    尝试一下

  • 所有CSS列表属性

    属性 描述
    list-style 在一个声明中设置列表的所有属性
    list-style-image 指定一个图像作为列表项标记
    list-style-position 指定列表项标记(项目符号)的位置
    list-style-type 指定列表项标记的类型

  • 相关页面

    HTML教程：HTML样式
上一节:
下一节: