马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
HTML 列表
列表分有序列表、无序列表和定义列表。
有序列表
例子：
<!DOCTYPE html>
<html>
<head>
<title>列表演示</title>
</head>
<body>
<ol>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ol>
</body>
</html>
显示效果：
可以为有序列表设置 reversed、start、type 属性改变显示样式：
<!DOCTYPE html>
<html>
<head>
<title>列表演示</title>
</head>
<body>
<!-- 设置起始值为 0 -->
<ol start="0">
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ol>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>列表演示</title>
</head>
<body>
<!-- 罗马数字 -->
<ol type="I">
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ol>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>列表演示</title>
</head>
<body>
<!-- 反转列表 -->
<ol reversed>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ol>
</body>
</html>
无序列表
例子：
<!DOCTYPE html>
<html>
<head>
<title>列表演示</title>
</head>
<body>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ul>
</body>
</html>
显示效果：
可以对无序列表设置 CSS 属性改变显示样式：
<!DOCTYPE html>
<html>
<head>
<title>列表演示</title>
</head>
<body>
<ul style="list-style-type: circle;">
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ul>
<ul style="list-style-type: disc;">
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ul>
<ul style="list-style-type: square;">
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ul>
<!-- none 表示不显示 -->
<ul style="list-style-type: none;">
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ul>
</body>
</html>
显示效果：
| 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2020-1-21 21:00:19
置顶卡
千斤顶
显身卡
发表于 2020-1-22 17:39:16
楼主