html列表序号为圆点的,HTML列表

下面我们来介绍一下如何实现下图所示的列表

list.png

Step 1

观察所需完成列表的结构和构成

经过前期 html 基础知识的学习，可将列表进行如下简单划分

列表.png

观察所需完成列表可知，该列表由无序列表和有序列表嵌套构成。

Step 2

将整个列表由外到内进行如下分解：

首先，最外层是两个无序列表项，且无序列表前的符号为实心圆点。则第一层代码如下：

• JavaScript
• Java

运行结果：

• JavaScript
• Java

然后，每一个无序列表包含两个有序列表项，且有序列表前的符号为从1开始的阿拉伯数字。则第二层代码如下：

• JavaScript
  1. 第一章
  2. 第二章
• Java
  1. 第一章
  2. 第二章

注意：无序列表的默认符号为实心原点，而有序列表序号默认从1开始，所以以上代码中，无序列表的type 和有序列表的 start 可以不写。

运行结果：

• JavaScript
  1. 第一章
  2. 第二章
• Java
  1. 第一章
  2. 第二章

最后，第二层的每个有序列表包含两个无序列表项，且无序列表前的符号为实心方块。则最终代码如下：

• JavaScript
  1. 第一章
     • const
     • let
  2. 第二章
     • function
     • object
• Java
  1. 第一章
     • class
     • package
  2. 第二章
     • private
     • public

运行结果：

• JavaScript
  1. 第一章
     • const
     • let
  2. 第二章
     • function
     • object
• Java
  1. 第一章
     • class
     • package
  2. 第二章
     • private
     • public

这样整个列表就完成啦！

代码点这里

运行结果点这里