列表和表格

目录

有序列表

⛳快捷生成写法

⛳去序号方式

⛳嵌套使用

无序列表

⛳快捷生成写法

⛳嵌套使用

表格

⛳常用标签

⛳常用属性

合并单元格

⛳格内文字对齐

⛳​编辑

⛳隔行变色


有序列表

ol和li的配合使用。

快捷生成写法

列表和表格_第1张图片

列表和表格_第2张图片

默认下有序列表的需要为数字1,2,3....,我们也可以通过type属性设置排列的序号格式。

列表和表格_第3张图片

有序列表的序号格式有5种

去序号方式

在head中通过选择器将列表的序号设置为none。

列表和表格_第4张图片

列表和表格_第5张图片

嵌套使用

列表下面还有列表,在语法合理的情况下,HTML的标签是可以嵌套使用的。

列表和表格_第6张图片

列表和表格_第7张图片

无序列表

ul和li的配合使用

快捷生成写法

列表和表格_第8张图片

列表和表格_第9张图片

默认情况下的无序列表的符号为实心圆。同样我们可以通过type进行修改

列表和表格_第10张图片

一共是由三种格式。

嵌套使用

列表和表格_第11张图片

列表和表格_第12张图片

表格

常用标签

列表和表格_第13张图片

列表和表格_第14张图片

列表和表格_第15张图片

常用属性

列表和表格_第16张图片

列表和表格_第17张图片

列表和表格_第18张图片

合并单元格

例如:实现这个表格:

列表和表格_第19张图片

列表和表格_第20张图片

注意:合并的两个单元格时,需要将后面的单元格删掉

格内文字对齐

例如:

列表和表格_第21张图片

列表和表格_第22张图片

可以通过选择器,选择第一列,设置居中,选择第二列,设置右对齐。

列表和表格_第23张图片

隔行变色

同理文字居中,可以通过选择器选择奇数行和偶数行进行变颜色修改。

列表和表格_第24张图片

列表和表格_第25张图片

你可能感兴趣的:(HTML,html,前端)