html-列表实现

今天,我要实现的列表是这样的:


目标列表

列表实现的源代码参见github

完成这个列表我们来拆分一下任务吧,这个列表从外向里可划分为3层。

1.实现最外层的无序列表,代码是这样的:

<ul>   
   <li>JavaScript</li>    
   <li>Java</li>
</ul>

结果长成这样:


第一步结果图

2.实现中间层的有序列表,代码是这样的:

<ul>    
     <li>JavaScript        
         <ol>          
             <li>第一章</li>           
             <li>第二章</li>       
       </ol>   
    </li>    
    <li>Java        
         <ol>           
             <li>第一章</li> 
             <li>第二章</li>    
         </ol>   
    </li>
</ul>

第二步实现结果图:


第二步结果图

3.实现第三层的无序列表,代码长这样(这里是部分代码哦,在第二步的基础上增加):

<li>JavaScript 
  <ol>       
     <li>第一章           
          <ul type="square">
              <li>const</li>        
              <li>let</li>     
          </ul> 
     </li>  
     <li>第二章 
          <ul type="square">
              <li>function</li>
              <li>object</li>
         </ul>      
     </li>   
   </ol>
</li>

第三步的实现的结果是这样的:

第三步结果

好了,就这样三步这个简单的列表就完成了

小知识:
  • 实现下面这样的无序列表在ul标签中加type="disc"或省略type不写
    黑点无序列表
  • 实现这样的无序列表在ul标签中加type="circle"
    圆圈无序列表
  • 实现这样的无序列表在ul标签中加type="square"
    方块无序列表
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML 是用来描述网页内容的一种语言。全称超文本标记语言 (Hyper Text Markup Language...
    TW张苗阅读 666评论 1 2
  • 今天来讲一讲怎样用 HTML 来实现下面的列表。 第一步 可以看到第一层 JavaScript 和 Java 两个...
    ittianbao阅读 306评论 3 3
  • 一. 初步了解#### 先简单了解下(有序列表)和(无序列表)的实现吧。 无序列表 浏览器显示如下:CoffeeM...
    元气满满321阅读 426评论 6 4
  • 作业内容 使用HTML实现如下列表 知识点 : HTML列表使用 无序列表 无序列表是一个项目的列表,此列项目使用...
    z嘉嘉嘉阅读 755评论 0 1
  • 一.明确目标: 二.拆分列表:分析列表的嵌套层数,以及每层之间的关系;明确每层都属于无序还是有序列表; 三.写实现...
    葶寳寳阅读 385评论 1 3