运维开发之路:带你解剖html列表,一个看似简单而又不简单的知识点。

写在开篇

html列表热身

HTML支持有序、无序和定义列表,本篇笔者对每个知识点进行剖析,跟紧步伐,我们一起出发吧!

无序列表

无序列表以ul标签开始,每个列表项都以li标签开始,无序列表是一个项目的列表,默认情况下,此列项目使用粗体圆点(典型的小黑圆圈)进行标记

废话不说,直接看下面小栗子,代码如下:



    
        
        陪你复习巩固,攻破前端技能
    
    
        

彩虹运维技术栈社区,公众号ID:TtrOpsStack

我们目前在做:

  • 分享数据库方面技术文章
  • 分享监控方面技术文章
  • 分享Linux方面技术文章

效果如下图:

运维开发之路:带你解剖html列表,一个看似简单而又不简单的知识点。_第1张图片

有序列表

有序列表以ol标签开始,每个列表项以li标签开始,列表项目使用数字进行标记

废话不说,直接看下面小栗子,代码如下:



    
        
        陪你复习巩固,攻破前端技能
    
    
        

彩虹运维技术栈社区,公众号ID:TtrOpsStack

我们目前在做:

  1. 分享数据库方面技术文章
  2. 分享监控方面技术文章
  3. 分享Linux方面技术文章
注意到了吗?只是将ul变成了ol,就是辣么简单。

效果图下图:

运维开发之路:带你解剖html列表,一个看似简单而又不简单的知识点。_第2张图片

自定义列表

自定义列表以dl标签开始,每个自定义列表项以dt开始,每个自定义列表项的定义以dd开始。

废话不说,直接看下面小栗子,代码如下:



    
        
        陪你复习巩固,攻破前端技能
    
    
        

彩虹运维技术栈社区,公众号ID:TtrOpsStack

欢迎广发盆友来稿,知识点不限!

Linux知识点:
route
iptable
LVM
等等
编程语言:
Go
Python
Shell
云原生:
Docker
K8S
监控:
Prometheus
Zabbix
数据库:
Oracle
MySql

效果如下图:

关于列表标签的知识点做个小总结

    是定义无序列表
      是定义有序列表
    1. 是定义列表项
      是定义定义列表
      是定义定义项目
      是定义定义的描述
接下来我们继续进阶,深入剖析和实战

HTML无序列表解剖

通过css来控制无序列表的样式

先看小栗子,通过css的list-style-type:disc;属性来控制了样式,不过这个是默认的样式,哪怕不指定,也是这样的效果。



    
        
        陪你复习巩固,攻破前端技能
    
    
        

彩虹运维技术栈社区,公众号ID:TtrOpsStack

运维开发工程师必须掌握的语言

  • Go
  • Python
  • Shell

效果如下图:

运维开发之路:带你解剖html列表,一个看似简单而又不简单的知识点。_第3张图片

接着,来个不一样的小栗子,看下面代码:



    
        
        陪你复习巩固,攻破前端技能
    
    
        

彩虹运维技术栈社区,公众号ID:TtrOpsStack

运维开发工程师必须掌握的语言

  • Go
  • Python
  • Shell

效果如下图:

运维开发之路:带你解剖html列表,一个看似简单而又不简单的知识点。_第4张图片

这会无序列表的样式是变了吧?变成了空心的圆圈。嘿嘿!

再来个小栗子,我们让它变成正方形,看下面代码:



    
        
        陪你复习巩固,攻破前端技能
    
    
        

彩虹运维技术栈社区,公众号ID:TtrOpsStack

运维开发工程师必须掌握的语言

  • Go
  • Python
  • Shell

效果如下图:

看到效果了吗?真变成了正方形的无序列表,这就是通过CSS属性来控制的样式

再看一个粒子,如果CSS的属性是none,是什么效果?看下面代码:



    
        
        陪你复习巩固,攻破前端技能
    
    
        

彩虹运维技术栈社区,公众号ID:TtrOpsStack

运维开发工程师必须掌握的语言

  • Go
  • Python
  • Shell

效果如下图:
运维开发之路:带你解剖html列表,一个看似简单而又不简单的知识点。_第5张图片

字体有限,喜欢的盆友关注公众,本文转载于:https://mp.weixin.qq.com/s/CW...

你可能感兴趣的