标签之美九——列表

简介: 标签之美九——列表

标签之美——列表

   列表是网页排序中时常会用到的一个元素。

一、无序列表

1、无序列表的标签

无序列表使用<ul></ul>来定义标签的开始和结束。使用<li></li>来设置标签项,示例如下:

<body>
<ul>
<li>title1</li><li>title2</li><li>title3</li>
</ul>
</body>

效果如下:

image.png

2、无序列表标签的样式

标签的type属性可以设置其样式:

实心圆样式:disc

这个样式就是默认的样式,效果如上图

空心圆样式:circle

示例如下:

<body>
<ul type="circle">
<li>title1</li><li>title2</li><li>title3</li>
</ul>
</body>

效果如下:

image.png

方块样式:square

效果如下:

image.png

二、有序列表

1、有序列表的标签

有序列表的开始和结束使用<ol></ol>来定义,同样使用<li></li>来定义列表项,示例如下:

<body>
<ol type="square">
<li>title1</li><li>title2</li><li>title3</li>
</ol>
</body>

效果如下:

image.png

2、有序列表的样式

数字标号的样式:type=1

这个样式为默认的样式,效果如上。

大写字母的标签:type=A

效果如下:

image.png

小写字母样式:type=a

image.png

大写罗马数字样式:type=I

image.png

小写罗马数字样式:type=i

image.png

三、列表的嵌套

列表可以进行嵌套,形式如下:

<body>
<ol type="i">
<li>title1</li>
<ul type="disc">
<li>subTitle1</li><li>subTitle2</li>
</ul>
<li>title2</li><li>title3</li>
</ol>
</body>

效果如下:

image.png


目录
相关文章
|
6月前
|
Kubernetes Perl 容器
k8s标签
k8s标签
|
3月前
|
索引
for标签
【8月更文挑战第6天】for标签。
35 4
|
5月前
|
Python
if标签
【6月更文挑战第29天】if标签。
49 5
|
6月前
with标签
with标签
45 2
|
6月前
|
移动开发 HTML5
基本标签
基本标签
50 2
|
移动开发 前端开发 JavaScript
HTML+CSS常用的标签总结
HTML+CSS常用的标签总结
120 0
HTML教程6——列表标签
无序列表用<ul>标签表示,无序列表的每一项前默认都是用圆点标识,<ul>标签中比较重要的属性为type(列表前的符号),默认为disc(圆点),还有circle(空心圆),square(实心正方形),<ul>标签中只能有<li>标签,<li>标签的元素代表列表每一行的内容,<ul>标签中可以允许有任意个<li>标签。
HTML教程6——列表标签
|
容器
08 # 列表标签
08 # 列表标签
56 0
11. 列表标签及其应实例
11. 列表标签及其应实例
85 0
11. 列表标签及其应实例