美文网首页
多级列表

多级列表

作者: small柚子君 | 来源:发表于2016-12-09 22:52 被阅读72次

    下面这个列表是怎么实现的呢?

    多级列表多级列表
    <ul> 
      <li>Javascript</li> 
      <ol> 
        <li>第一章</li> 
        <ul> 
          <li>const</li> 
          <li>let</li> 
        </ul> 
        <li>第二章</li> 
        <ul> 
          <li>function</li> 
          <li>object</li> 
        </ul> 
     </ol> 
     <li>Java</li> 
     <ol> 
        <li>第一章</li> 
        <ul> 
          <li>class</li> 
          <li>package</li> 
        </ul> 
        <li>第二章</li> 
        <ul> 
          <li>private</li> 
          <li>public</li> 
        </ul> 
      </ol>
    </ul>```
    上面是我的实现,首先我说一下我做这个多级列表的思路是什么哈。其实这个多级列表一看就思路很清晰了。
    1. 首先有两个同级的大的列表
    2. 最外层是一个无序列表
    3. 第二层是一个有序列表
    4. 最里层的是一个无序列表
    
    然后我给大家依次讲一下上面我用到的标签分别都是什么意思,都有什么用法。
    上面提到了几个概念:
    #### 无序列表
    无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。
    无序列表使用 ```<ul>``` 标签。浏览器中显示的结果就是下面这个造型:
    
    ![无序列表](https://img.haomeiwen.com/i3122121/e472434b8be4f76d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
    #### 有序列表
    有序列表也是一列项目,列表项目使用数字进行标记。 
    有序列表使用 ```<ol>``` 标签。浏览器中显示的结果就是下面这个造型:
    
    ![有序列表](https://img.haomeiwen.com/i3122121/1719bc128d5fb917.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
    #### ```<li>``` 标签
    可以看到上面两个标签中都有用到 ```<li>``` 标签。```<li>``` 标签定义列表项目。
    ```<li>``` 标签可用在有序列表 (```<ol>```) 和无序列表 (```<ul>```) 中。
    
    **注意**:```<ul>```、```<ol>``` 和 ```<li>``` 标签可以任意嵌套。

    相关文章

      网友评论

          本文标题:多级列表

          本文链接:https://www.haomeiwen.com/subject/ubzsmttx.html