<!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
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
