css属性之列表属性

来源：互联网发布：辽宁软件行业协会编辑：程序博客网时间：2024/05/17 21:38

本篇小结css属性的列表属性的一些使用方法。

<!doctype html><html><head><title>CSS常见属性(列表属性)</title><meta charset="utf-8"><style type="text/css">/*ul{list-style-type:upper-alpha;}ol{list-style-type:disc;}ul.inside{list-style-position:inside;}ul.outside{list-style-position:outside;}ul.gif{list-style-image:url(images/arr.gif);  images/arr.gif是图片路径，可将前面的小圆点换成我们需要的图片}ul.png{list-style-image:url(images/arr.png);}*/ul{list-style:circle outside url(images/arr.png); /*简写的方式*/}</style></head><body><p>无序列表无序列表无序列表无序列表inside</p><ul class="gif"><li>无序列表</li><li>无序列表</li><li>无序列表</li><li>无序列表<ul class="png"><li>无序列表</li><li>无序列表</li><li>无序列表</li><li>无序列表</li><li>无序列表</li><li>无序列表</li></ul></li><li>无序列表</li><li>无序列表</li></ul><p>无序列表无序列表无序列表无序列表outside</p><ul class="outside"><li>无序列表</li><li>无序列表</li><li>无序列表</li><li>无序列表</li><li>无序列表</li><li>无序列表</li></ul><!--ol><li>有序列表</li><li>有序列表</li><li>有序列表</li><li>有序列表</li><li>有序列表</li><li>有序列表</li></ol--></body></html>

最后，再附上一张list-style-type属性值的图片总结。

0 0