<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表</title> <style> *{ margin:0; padding: 0; } body{ padding-left: 200px; } ol,ul{ 500px; height: 40px; } li{ 500px; height: 20px; background-color: lightblue; } </style> </head> <body> <!-- 列表： 1 ol：有序列表 <ol> <li></li> </ol> 1.1 自带的列表符号 1.2 列表符号的位置 1.3 使用图片作为图标 1.4 可以使用list-style:将属性简写，便于优化 2 ul：无序列表 --> </body> <h1>列表三个知识点</h1> <hr><br> <!-- 知识点1： 列表自带的列表符号，是居于外侧的，可以用list-style-position:inside/outside 默认是outsid; --> <ol > <li style="list-style-position:outside;">第个一列表</li> <li style="list-style-position:inside;">第个二列表</li> </ol> <br><hr><br> <!-- 知识点2： 使用图标替代列表符号； list-style-image：url(路径); --> <ol style="list-style-image: url(./images/01.jpg);list-style-position:inside;"> <li>第一个列表</li> <li>第二个列表</li> </ol> <br><hr><br> <!-- 知识点3： 列表自带的四种列表样式属性list-style:none/disc/circle/square --> <ul> <li style="list-style:none;">我是列表 清除样式</li> <li style="list-style:disc;">我是列表 实心圆</li> <li style="list-style:circle;list-style-position:inside;">我是列表 空心圆</li> <li style="list-style:square;list-style-position:inside;">我是列表 方块</li> </ul> <br><hr><br> </html>
