ul和ol的区别以及经验总结

一.ul是无序列表

网页中最为常见的列表，各个列表项之间为并列关系，没有顺序级别之分，如导航栏，新闻话题展示区等。

默认示例表现为（默认带有实心圆）：

<ul><li>无序列表项1</li><li>无序列表项2</li><li>无序列表项3</li>
</ul>

常见问题：

1.去除默认样式的实心圆：

<style>/* 嵌入式使用css,一般写在head中 */ul li {list-style-type: none; }
</style>

/* list-style-type的其它取值

none 无标记。

disc 实心圆（默认值）

circle 空心圆

square 实心方块

decimal 阿拉伯数字

decimal-leading-zero 0开头的阿拉伯数字(01,02……)

cjk-ideographic 汉字小写数码（一，二）

lower-roman 小写罗马数字

upper-roman 大写罗马数字

lower-alpha 小写英文字母

upper-alpha 大写英文字母

2.使用图片替代实心圆点：

<style>
/* 嵌入式使用css,一般写在head中 */ul li {/* 小括号里为图片的相对路径 */list-style-image: url(./picture.png); }
</style>

二.ol是有序列表

各个列表项会按照一定顺序排列，如网页中常见的游戏排行榜，歌曲排行榜等。

默认示例表现为（默认带有数字）：

<ol><li>有序列表项1</li><li>有序列表项2</li><li>有序列表项3</li>
</ol>

样式修改方法与ul类似。

常见问题：

1.修改有序列表的起始数字由（默认的1变成2）

<ol start="2"><li>有序列表项1</li><li>有序列表项2</li><li>有序列表项3</li>
</ol>

扩展：

ul 和ol都是是块级元素可以定义宽和高。

<li>表示行排列不要单独使用，需要放在<ul>和<ol>里面配合使用，不然会导致代码混乱，不好维护等其他问题。

HTML5不再支持<ul> type 属性，请使用 CSS替代。

CSS 语法:<ul style="list-style-type:square">

ul和ol的区别以及经验总结相关推荐

html中dl标签和ul标签,html中dl,dt,dd,ul,li,ol标签区别和使用
html中dl,dt,dd,ul,li,ol标签区别和使用时间:2013-04-12 21:48 来源:未知 | 作者:易享学习网 | 本文已影响人 ul: unordered lists ol: ...
标签ul与ol的区别及使用方法
ul是无序列表,所谓的无序列表只要举个例子,大家就会明白了. ●这是第一个列表 ●这是第二个列表 ●这是第三个列表 ol是有序列表,同样举个例子. 1.这是第一个 ...
HTML 列表中的dl,dt,dd,ul,li,ol区别及应用
HTML 列表中的dl,dt,dd,ul,li,ol区别及应用 HTML 列表中的dl,dt,dd,ul,li,ol区别及应用工具/原料 html,dw软件方法/步骤 1 无序列表无序列表是 ...
dl,dt,dd,ul,li,ol区别
dl.dt.dd也是列表项,不过它们被忽视得比较厉害,人们只知道ul.ol.li,却经常漠视它们的存在,其实有时候,dl.dt.dd也是非常好用的,这两个家族是近亲,很多地方都是一模一样. dl类似u ...
论ul、ol和dl的区别
1.ul是无序列表,也就是说没有排列限制可以随意加li: <ul> <li>可以随意放置</li> <li>可以随意放置</li> < ...
lable、ul、ol、dl和table、fieldset标签
lable标签有时候,我们希望点击文件的时候,鼠标的光标自动跳到输出框中.这需要使用lable功能 <div><label for="name2">姓名: ...
ul 、ol li 继承原有样式的问题
如: 1.为什么我的服务器无法远程了? 2.为什么我的服务器总是自动重启? 3.为什么我的服务器总是自动重启? 以前写这种类型的列表,都是自己用键盘输入这些数字,其实不然,ul .ol li本身就自带 ...
html语言dl与ul,HTML中DL、UL、OL用哪个比较好
大家好~ 我是一枚正直纯洁的苦逼程序员!!!!! ul,ol,dl标签是CSS网页布局中常用的列表元素. 列表将具有相似特征或先后顺序的内容按照从上到下的顺序排列起来. 1.ul标签:无序列表始于 ...
众说纷纭的ul、ol、li
(1)提到ul ol li,大家都知道,就是三个列表标签,ul表示无需列表(unordered list),ol表示有序列表(oredr list), li 表示列表项(list item),之前我也 ...

ul和ol的区别以及经验总结

一.ul是无序列表

常见问题：

1.去除默认样式的实心圆：

2.使用图片替代实心圆点：

二.ol是有序列表

常见问题：

1.修改有序列表的起始数字由（默认的1变成2）

扩展：

ul和ol的区别以及经验总结相关推荐

最新文章

热门文章