最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

酷狗列表页的html代码,html

运维笔记admin63浏览0评论

酷狗列表页的html代码,html

酷狗列表页的html代码,html

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

目标列表

列表实现的源代码参见github

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

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

  • JavaScript
  • Java

结果长成这样:

第一步结果图

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

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

第二步实现结果图:

第二步结果图

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

JavaScript
  1. 第一章
    • const
    • let
  2. 第二章
    • function
    • object

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

第三步结果

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

小知识:

实现下面这样的无序列表在ul标签中加type="disc"或省略type不写

黑点无序列表

实现这样的无序列表在ul标签中加type="circle"

圆圈无序列表

实现这样的无序列表在ul标签中加type="square"

方块无序列表

发布评论

评论列表(0)

  1. 暂无评论