[分享]css做的ulb第三阶段

在CSS中，是无序列表的标记，是列表项的标记。你可以使用CSS样式来美化这些标记，从而创建一个精美的列表。下面是创建一个有三个层级的无序列表的代码： 一级列表项1 二级列表项1 二级列表项2 二级...

在CSS中，<ul>是无序列表的标记，<li>是列表项的标记。你可以使用CSS样式来美化这些标记，从而创建一个精美的列表。

下面是创建一个有三个层级的无序列表的代码：

 <ul class="first-level">
    <li>一级列表项1
      <ul class="second-level">
        <li>二级列表项1</li>
        <li>二级列表项2</li>
        <li>二级列表项3
          <ul class="third-level">
            <li>三级列表项1</li>
            <li>三级列表项2</li>
            <li>三级列表项3</li>
          </ul>
        </li>
        <li>二级列表项4</li>
      </ul>
    </li>
    <li>一级列表项2</li>
    <li>一级列表项3
      <ul class="second-level">
        <li>二级列表项5</li>
        <li>二级列表项6</li>
      </ul>
    </li>
  </ul> 

上面的代码中，.first-level是一级列表的CSS类名，.second-level是二级列表的CSS类名，.third-level是三级列表的CSS类名。我们可以为每个CSS类名添加样式。

例如，我们可以使用以下CSS样式来对三级列表进行样式设置：

 .third-level {
    list-style-type: square;
    margin-left: 2rem;
  } 

上面的代码将在三级列表中使用一个方形符号作为列表项的标记，并增加左外边距。

使用CSS设置无序列表的样式使得您可以在没有图像或图形的情况下轻松美化其外观。