HTML列表结构
Posted 厦门德仔
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML列表结构相关的知识，希望对你有一定的参考价值。
列表结构
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表结构</title>
<style type="text/css">
ol list-style:none; /*清除默认的序号*/
li:before color:#f00; font-family:Times New Roman; /*设计层级目录序号的字体样式*/
licounter-increment:a 1; /*设计递增函数a，递增起始值为1 */
li:beforecontent:counter(a)". "; /*把递增值添加到列表项前面*/
li licounter-increment:b 1; /*设计递增函数b，递增起始值为1 */
li li:beforecontent:counter(a)"."counter(b)". "; /*把递增值添加到二级列表项前面*/
li li licounter-increment:c 1; /*设计递增函数c，递增起始值为1 */
li li li:beforecontent:counter(a)"."counter(b)"."counter(c)". "; /*把递增值添加到三级列表项前面*/
</style>
</head>
<body>
<ol>
<li>一级列表项目1
<ol>
<li>二级列表项目1</li>
<li>二级列表项目2
<ol>
<li>三级列表项目1</li>
<li>三级列表项目2</li>
</ol>
</li>
</ol>
</li>
<li>一级列表项目2</li>
</ol>
</body>
</html>
效果
以上是关于HTML列表结构的主要内容，如果未能解决你的问题，请参考以下文章