标签之美九——列表 原

标签之美——列表

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

一、无序列表

1、无序列表的标签

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

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

效果如下:

2、无序列表标签的样式

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

实心圆样式:disc

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

空心圆样式:circle

示例如下:

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

效果如下:

方块样式:square

效果如下:

二、有序列表

1、有序列表的标签

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

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

效果如下:

2、有序列表的样式

数字标号的样式:type=1

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

大写字母的标签:type=A

效果如下:

小写字母样式:type=a
大写罗马数字样式:type=I
小写罗马数字样式:type=i

三、列表的嵌套

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

<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>

效果如下:

专注技术,热爱生活,交流技术,也做朋友。 ——珲少 QQ群:203317592

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏极乐技术社区

wxss学习系列《三》背景(Background)与颜色(Color),边框(Border)

一、背景(Background)与颜色(Color) 一、背景:background。 设置对象的背景特性。一个元素可以设置多重背景图像,每组之间用逗号隔开,如...

2665
来自专栏Android干货

自定义控件详解(五):onMeasure()、onLayout()

1582
来自专栏无所事事者爱嘲笑

居中方案

1164
来自专栏卡少编程之旅

用CSS实现居中的总结

28712
来自专栏前端说吧

css笔记 - 张鑫旭css课程笔记之 margin 篇

relative可定位,但是不改变容器尺寸和占据的空间 margin不同,margin也在盒模型中。 从border开始往里边,是可视尺寸clientWidth...

1202
来自专栏林德熙的博客

win10 uwp 获得元素绝对坐标

有时候需要获得一个元素,相对窗口的坐标,在修改他的位置可以使用。 那么 UWP 如何获得元素坐标? 我提供了一个方法,可以获得元素的坐标。

1132
来自专栏进击的君君的前端之路

CSS理解之margin

1632
来自专栏从零开始学 Web 前端

从零开始学 Web 之 jQuery(二)获取和操作元素的属性

DOM中有很多方式获取元素,比如通过id,通过标签名,通过类名,通过name的值,通过选择器等方式。

1384
来自专栏Android干货

自定义控件详解(一):Paint类与Canvas类

1954
来自专栏Java帮帮-微信公众号-技术文章全总结

与Ajax同样重要的jQuery(1)

jQuery框架 jQuery 1.4 是企业主流版本,从jQuery1.6 开始引入大量新特性。最新版本 2.1.1,这里讲解以1.8.3为主(新版本主要是浏...

3246

扫码关注云+社区

领取腾讯云代金券