1、首先我们打开DW网页编辑器然后新建一个li.html文件。
![小蔡学Web:[6]网页列表li的用法](https://exp-picture.cdn.bcebos.com/604e9556ad042e6811886e5585f85856d43dd1f4.jpg)
2、然后在<body></body>输入<ul>挢旗扦渌;<li>1</li><li>2</li><li>3</li></ul>
![小蔡学Web:[6]网页列表li的用法](https://exp-picture.cdn.bcebos.com/50a010f85856d53da345e75d47d2bb665059caf4.jpg)
3、当然换个<ol>的标签就能出现一个顺序排列。
![小蔡学Web:[6]网页列表li的用法](https://exp-picture.cdn.bcebos.com/50189b40102a04e22dc305f62b7aa010bd33c2f4.jpg)
4、当然一般情况下 li 用来做导航条的,例如li{ list-style:none;}
![小蔡学Web:[6]网页列表li的用法](https://exp-picture.cdn.bcebos.com/a13bbe10bc33ec382dda265b295f0c14c37b3cf5.jpg)
5、然后将li的表情 浮动起来,全都向左边浮动。编写样式 float:left;<style type="te旌忭檀挢xt/css">li{ list-style:none; float:left;}</style>
![小蔡学Web:[6]网页列表li的用法](https://exp-picture.cdn.bcebos.com/d3c39889a146b7b1cc984009c77c34b33d4135f5.jpg)
6、当然这样看起来不是很好看,我给他加上长宽高,以及背景颜色。调试后得到。
![小蔡学Web:[6]网页列表li的用法](https://exp-picture.cdn.bcebos.com/35f2224133bad3412a1cde83427622bc7cc52cf5.jpg)