HTML 支持有序、无序和定义列表
无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。
无序列表始于 <ul> 标签。每个列表项始于 <li>。
同样,有序列表也是一列项目,列表项目使用数字进行标记。
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
代码如下
<!DOCTYPE html>
<html>
<head>
<meta ttp-equiv="Content-Type" content="text/html; charset=GBK"/>
<title>列表</title>
</head>
</html>
<body>
<table>
这是无序列表
<ul>
<li>猴子</li>
<li>狐狸</li>
<li>小短腿</li>
</ul>
这是有序列表
<ol>
<li>猴子</li>
<li>狐狸</li>
<li>小短腿</li>
</ol>
</table>
</body>
列表去点 list-style:none
这是无序列表
<ul style="list-style:none">
<li>猴子</li>
<li>狐狸</li>
<li>小短腿</li>
</ul>
这是有序列表
<ol style="list-style:none">
<li>猴子</li>
<li>狐狸</li>
<li>小短腿</li>
</ol>
如果你的HTML和css是分开的 则在CSS文件里加上
ul li{
list-style: none;
}
嵌套列表
<!DOCTYPE html>
<html>
<head>
<meta ttp-equiv="Content-Type" content="text/html; charset=GBK"/>
<title>列表</title>
</head>
</html>
<body>
<table>
这是嵌套列表ul
<ul style="list-style:none">
<li>猴子
<ul>会走路
<li>没有鞋子穿</li>
<li>因为有爪子</li>
</ul>
<ul>会爬树</ul>
</li>
<li>狐狸
<ul>狡猾</ul>
<ul>好看</ul>
</li>
<li>小短腿</li>
</ul>
这是嵌套列表ol
<ol style="list-style:none">
<li>猴子
<ol>会走路
<li>没有鞋子穿</li>
<li>因为有爪子</li>
</ol>
<ol>会爬树</ol>
</li>
<li>狐狸
<ol>狡猾</ol>
<ol>好看</ol>
</li>
<li>小短腿</li>
</ul>
</ol>
这是嵌套列表ol和ul交叉嵌套
<ol style="list-style:none">
<li>猴子
<ul>会走路
<li>没有鞋子穿</li>
<li>因为有爪子</li>
</ul>
<ul>会爬树</ul>
</li>
<li>狐狸
<ul>狡猾</ul>
<ul>好看</ul>
</li>
<li>小短腿</li>
</ul>
</ol>
</table>
</body>
更多推荐
HTML 无序列表和有序列表(超详细)
发布评论