首页 > 其他 > 详细

标签之美九——列表

时间:2015-06-28 23:09:58      阅读:389      评论:0      收藏:0      [点我收藏+]

标签之美——列表

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

一、无序列表

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>

效果如下:

技术分享

标签之美九——列表

原文:http://my.oschina.net/u/2340880/blog/471723

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!