HTML 列表

实现如下的列表

  • 首先了解一下什么是html 列表,可以分为有序,无序和自定义的,要实现上图的列表,需要将有序和无序列表相结合。
  • 无序列表如何定义
<ul>
   <li> 内容</li>
   <li> 内容</li>
   ···
</ul>
  • 效果如下
  • 有序列表的定义
<ol>
    <li> 内容</li>
    <li> 内容</li>
  ...
</ol>
  • 效果如下
  • 自定义列表定义
<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>
  • 效果如下
  • 最后我自己实现该效果的代码


  • 附上实现代码

<ul>    
    <li>javascript</li>    
    <ol>        
        <li>第一章            
          <ul>                
            <li>const</li>                
            <li>let</li>            
          </ul>        
         </li>        
    <li>第二章            
      <ul>                
          <li>function</li>                
          <li>object</li>            
      </ul>        
    </li>    
    </ol>    
    <li>java</li>    
        <ol>        
          <li>第一章            
            <ul>                
              <li>class</li>                
              <li>package</li>            
            </ul>        
          </li>        
     <li>第二章            
        <ul>                
          <li>private</li>                
          <li>public</li>            
        </ul>        
    </li>    
    </ol>
</ul>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • HTML 是用来描述网页内容的一种语言。全称超文本标记语言 (Hyper Text Markup Language...
    TW张苗阅读 3,880评论 1 2
  • 下面我们来介绍一下如何实现下图所示的列表 Step 1 观察所需完成列表的结构和构成经过前期 html 基础知识的...
    杨慧莉阅读 4,140评论 1 1
  • html有三种列表:有序列表、无序列表、自定义列表 有序列表:有序列表是一列项目,列表项目使用数字进行标记。 有序...
    __Qiao阅读 3,153评论 0 1
  • 什么是html列表 html列表分为有序列,无序列表和自定义列表。 1.无序列表:无序列表是一个项目的列表,此列项...
    zj_zxj阅读 3,514评论 0 1
  • 一.有序列表 (ordered list) 格式: 语义及运用:给一堆数据添加列表语义,数据有先后之分。常运用于歌...
    饥人谷_刘冲阅读 5,612评论 0 1

友情链接更多精彩内容