上一节:
下一节:

  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样式
上一节:
下一节: