在创建列表的时候,可以通过指定type来设置列表项的符号,如下所示:
<body>
<form id="form1" runat="server">
<div>
<%--实心圆--%>
<ul id="ulstyle" type="disc">
<li>jQuery 是一个JavaScript库。 </li>
<li>jQuery 极大简化了JavaScript编程。</li>
<li>jQuery 很容易学习。</li>
</ul> <%--数字--%>
<ul id="ul1" type="decimal">
<li>jQuery 是一个JavaScript库。 </li>
<li>jQuery 极大简化了JavaScript编程。</li>
<li>jQuery 很容易学习。</li>
</ul> <%--数字方块--%>
<ul id="ul2" type="square">
<li>jQuery 是一个JavaScript库。 </li>
<li>jQuery 极大简化了JavaScript编程。</li>
<li>jQuery 很容易学习。</li>
</ul> <%--空心圆--%>
<ul id="ul3" type="circle">
<li>jQuery 是一个JavaScript库。 </li>
<li>jQuery 极大简化了JavaScript编程。</li>
<li>jQuery 很容易学习。</li>
</ul> <%--小写罗马数字--%>
<ul id="ul4" type="lower-roman">
<li>jQuery 是一个JavaScript库。 </li>
<li>jQuery 极大简化了JavaScript编程。</li>
<li>jQuery 很容易学习。</li>
</ul> <%--大写罗马数字--%>
<ul id="ul6" type="upper-roman">
<li>jQuery 是一个JavaScript库。 </li>
<li>jQuery 极大简化了JavaScript编程。</li>
<li>jQuery 很容易学习。</li>
</ul> <%--小写英文--%>
<ul id="ul7" type="lower-alpha">
<li>jQuery 是一个JavaScript库。 </li>
<li>jQuery 极大简化了JavaScript编程。</li>
<li>jQuery 很容易学习。</li>
</ul> <%--大写英文--%>
<ul id="ul8" type="upper-alpha">
<li>jQuery 是一个JavaScript库。 </li>
<li>jQuery 极大简化了JavaScript编程。</li>
<li>jQuery 很容易学习。</li>
</ul> </ul>
</div>
</form>
</body>
效果图:
还有一种就是type="none",即不使用列表符号。
使用自带的符号看起来比较刻板,可以使用jQuery实现自定义的列表符号,并且可以使用图片。
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<style type="text/css">
#ulstyle
{
list-style:none;
}
<%--自定义样式--%>
.list
{
background:url(img/rightrow.jpg) no-repeat;padding-left:20px;
}
</style> <%--jQuery代码--%>
<script type="text/javascript">
$(document).ready(function () {
$("#ulstyle li").each(function () {
$(this).addClass("list");
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ul id="ulstyle">
<li>jQuery 是一个JavaScript库。 </li>
<li>jQuery 极大简化了JavaScript编程。</li>
<li>jQuery 很容易学习。</li>
</ul>
</div>
</form>
</body>
效果图: