标签之美九——列表

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

标签之美——列表

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

一、无序列表

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


目录
相关文章
|
2月前
|
Python
for...in...标签
for...in...标签。
11 1
|
2月前
|
移动开发 HTML5
基本标签
基本标签
19 2
|
6月前
|
移动开发
常用的不常见标签
常用的不常见标签
30 1
|
7月前
|
移动开发 前端开发 JavaScript
HTML+CSS常用的标签总结
HTML+CSS常用的标签总结
64 0
|
容器
08 # 列表标签
08 # 列表标签
42 0
04 - 字体标记+段落标签+有序列表+无序列表+自定义列表
04 - 字体标记+段落标签+有序列表+无序列表+自定义列表
HTML教程6——列表标签
无序列表用<ul>标签表示,无序列表的每一项前默认都是用圆点标识,<ul>标签中比较重要的属性为type(列表前的符号),默认为disc(圆点),还有circle(空心圆),square(实心正方形),<ul>标签中只能有<li>标签,<li>标签的元素代表列表每一行的内容,<ul>标签中可以允许有任意个<li>标签。
HTML教程6——列表标签
11. 列表标签及其应实例
11. 列表标签及其应实例
69 0
11. 列表标签及其应实例
|
移动开发 前端开发 HTML5
web前端学习(七)——HTML5中列表(无序列表、有序列表、嵌套列表、自定义列表)及列表项的相关标签设置
web前端学习(七)——HTML5中列表(无序列表、有序列表、嵌套列表、自定义列表)及列表项的相关标签设置
web前端学习(七)——HTML5中列表(无序列表、有序列表、嵌套列表、自定义列表)及列表项的相关标签设置