CSS列表用法参考指南和示例

2021年4月10日12:05:31 发表评论 800 次浏览

CSS中存在两种类型的列表, 即无序列表和有序列表

  1. 无序列表
    在无序列表中, 列表项用项目符号标记。
  2. 有序列表
    在有序列表中, 列表项用数字和字母标记。

列表项目标记:

此属性指定项目标记的类型, 即无序列表或有序

语法如下:

list-style-type:value;

现在, 值可以如下:

  • circle
  • 小数, 例如:1、2、3等
  • 十进制前导零, 例如:01, 02, 03, 04等
  • 罗马小写
  • 罗马大写
  • 小写字母, 例如:a, b, c等
  • 大写字母, 例如:A, B, C等
  • square

例子:

<!DOCTYPE>
<html>
    <head>
       <style>
          ul.a
          {
          list-style-type:square;
          }
          ol.c
          {
          list-style-type:lower-alpha;
          }
       </style>
    </head>
    <body>
       <h2>
          lsbin
       </h2>
       <p>
          Unordered lists
       </p>
       <ul class = "a">
          <li>one</li>
          <li>two</li>
          <li>three</li>
       </ul>
       <ul class = "b">
          <li>one</li>
          <li>two</li>
          <li>three</li>
       </ul>
       <p>
          Ordered Lists
       </p>
       <ol class = "c">
          <li>one</li>
          <li>two</li>
          <li>three</li>
       </ol>
       <ol class = "d">
          <li>one</li>
          <li>two</li>
          <li>three</li>
       </ol>
    </body>
</html>
OUTPUT:

图像作为列表标记:

此属性为图像指定作为列表项标记。

例子:

<!DOCTYPE>
<html>
    <head>
       <style>
          ul.a
          {
          list-style-image:url(d.jpg);
          }
       </style>
    </head>
    <body>
       <h2>
          lsbin
       </h2>
       <p>
          Unordered lists
       </p>
       <ul class = "a">
          <li>one</li>
          <li>two</li>
          <li>three</li>
       </ul>
    </body>
</html>
OUTPUT:

列表标记位置:

此属性指定列表项标记的位置。位置标记器有2种类型:

1.list-style-position: outside

在这种情况下, 项目符号点将位于列表项之外。列表的每一行的开头将垂直对齐。

例子:

<!DOCTYPE>
<html>
    <head>
       <style>
          ul.a
          {
          list-style-position:outside;
          }
       </style>
    </head>
    <body>
       <h2>
          lsbin
       </h2>
       <p>
          Unordered lists
       </p>
       <ul class = "a">
          <li>one <br>In this the bullet points will be outside the list item.</li>
          <li>two<br>
             The start of each line of the list will be aligned vertically.
          </li>
          <li>three</li>
       </ul>
    </body>
</html>
COPY TO
OUTPUT:

2. list-style-position:inside

在此, 要点将位于列表内。该线和项目符号点将垂直对齐。

例子:

<!DOCTYPE>
<html>
    <head>
       <style>
          ul.a
          {
          list-style-position:inside;
          }
       </style>
    </head>
    <body>
       <h2>
          lsbin
       </h2>
       <p>
          Unordered lists
       </p>
       <ul class = "a">
          <li>one <br>In this the bullet points will be inside the list item.</li>
          <li>two<br>
             The line along with the bullet points will be aligned vertically..
          </li>
          <li>three</li>
       </ul>
    </body>
</html>
OUTPUT:

速记属性:

此属性使我们可以在一个命令中设置所有列表属性。属性的顺序是类型, 位置和图像。

如果缺少任何属性, 则会插入默认值。

例子:

<!DOCTYPE>
<html>
    <head>
       <style>
          ul.a
          {
          list-style:square inside;
          }
       </style>
    </head>
    <body>
       <h2>
          lsbin
       </h2>
       <p>
          Unordered lists
       </p>
       <ul class = "a">
          <li>one</li>
          <li>two</li>
          <li>three</li>
       </ul>
    </body>
</html>
OUTPUT:

样式列表:

列表可以用CSS格式化。可以为列表设置不同的颜色, 边框, 背景和填充。

例子:

<!DOCTYPE>
<html>
    <head>
       <style>
          ul.a
          {
          list-style:square;
          background:hotpink;
          padding:20px;
          }
       </style>
    </head>
    <body>
       <h2>
          lsbin
       </h2>
       <p>
          Unordered lists
       </p>
       <ul class = "a">
          <li>one</li>
          <li>two</li>
          <li>three</li>
       </ul>
    </body>
</html>
OUTPUT:

嵌套列表:

列表也可以嵌套。我们有用于各节的子节, 因此我们需要嵌套列表。

例子:

<!DOCTYPE>
<html>
    <head></head>
    <body>
       <h2>
          lsbin
       </h2>
       <ul>
          <li>
             one
             <ul>
                <li>sub one</li>
                <li>sub two</li>
             </ul>
          </li>
          <li>
             two
             <ul>
                <li>sub one</li>
                <li>sub two</li>
             </ul>
          </li>
          <li>
             three
             <ul>
                <li>sub one</li>
                <li>sub two</li>
             </ul>
          </li>
       </ul>
    </body>
</html>
OUTPUT:

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: