CSS之列表样式
来源：互联网 发布：海参偶尔吃 知乎 编辑：程序博客网 时间：2024/04/29 10:50
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Css列表</title><style type="text/css">/*列表类型 list-style-type*none:没有标志;**/.li{list-style-type:none;}/*列表项图片 list-style-image*url**/.li2 li{list-style-image:url(http://www.w3school.com.cn/i/eg_arrow.gif);}/*列表标志位置 list-style-position*inside:在内容之类*outside：在内容之外*默认值为outside*/.li3{list-style-position:inside;}</style></head><body><ul><li>列表类型list-style-type:none</li><li>列表类型list-style-type:none</li><li>列表类型list-style-type:none</li></ul><ul class="li"><li>列表类型list-style-type:none</li><li>列表类型list-style-type:none</li><li>列表类型list-style-type:none</li></ul><ul class="li2"><li>列表项图片</li><li>列表项图片</li><li>列表项图片</li></ul><ul><li>标志出现在内容之外：list-style-position:outside</li><li>标志出现在内容之外：list-style-position:outside</li><li>标志出现在内容之外：list-style-position:outside</li></ul><ul class="li3"><li>标志出现在内容之内：list-style-position:inside</li><li>标志出现在内容之内：list-style-position:inside</li><li>标志出现在内容之内：list-style-position:inside</li></ul></body></html>在以前的项目中list-style-type用处比较大，在ul>li做菜单时效果明显，如果要做成横排的效果，则需要使用属性display:inline
