CSS list-style属性控制ul标签样式

时间:2023-03-08 16:14:14

试一试

<style type="text/css" media="all">
ul
{
list-style-type: disc;
} ul#circle
{
list-style-type: circle;
} ul#square
{
list-style-type: square;
} ul#decimal
{
list-style-type: decimal;
} ul#decimal-leading-zero
{
list-style-type: decimal-leading-zero;
} ul#lower-roman
{
list-style-type: lower-roman;
} ul#upper-roman
{
list-style-type: upper-roman;
} ul#lower-greek
{
list-style-type: lower-greek;
} ul#lower-latin
{
list-style-type: lower-latin;
} ul#upper-latin
{ } ul#armenian
{
list-style-type: armenian;
} ul#georgian
{
list-style-type: georgian;
} ul#lower-alpha
{
list-style-type: lower-alpha;
} ul#upper-alpha
{
list-style-type: upper-alpha;
} ul#none
{
list-style-type: none;
}
ol
{
list-style-type: lower-roman;
}
</style>
<body>
<ul>
<li>正常模式</li>
<li>草莓</li>
<li>香蕉</li>
<li>苹果</li>
</ul> <ul id="circle">
<li>圆圈模式</li>
<li>草莓</li>
<li>香蕉</li>
<li>苹果</li>
</ul> <ul id="square">
<li>正方形模式</li>
<li>草莓</li>
<li>香蕉</li>
<li>苹果</li>
</ul> <ul id="decimal">
<li>数字模式</li>
<li>草莓</li>
<li>香蕉</li>
<li>苹果</li>
</ul> <ul id="decimal-leading-zero">
<li>以一个0开头的数字模式</li>
<li>草莓</li>
<li>香蕉</li>
<li>苹果</li>
</ul> <ul id="lower-roman">
<li>小写罗马文字模式</li>
<li>草莓</li>
<li>香蕉</li>
<li>苹果</li>
</ul> <ul id="upper-roman">
<li>大写罗马文字模式</li>
<li>草莓</li>
<li>香蕉</li>
<li>苹果</li>
</ul> <ul id="lower-greek">
<li>小写阿拉伯文字模式</li>
<li>草莓</li>
<li>香蕉</li>
<li>苹果</li>
</ul> <ul id="lower-latin">
<li>小写拉丁文模式</li>
<li>草莓</li>
<li>香蕉</li>
<li>苹果</li>
</ul> <ul id="upper-latin">
<li>大写拉丁文模式</li>
<li>草莓</li>
<li>香蕉</li>
<li>苹果</li>
</ul> <ul id="armenian">
<li>亚美尼亚数字模式</li>
<li>草莓</li>
<li>香蕉</li>
<li>苹果</li>
</ul> <ul id="georgian">
<li>乔治亚数字模式</li>
<li>草莓</li>
<li>香蕉</li>
<li>苹果</li>
</ul> <ul id="lower-alpha">
<li>小写拉丁文模式</li>
<li>草莓</li>
<li>香蕉</li>
<li>苹果</li>
</ul> <ul id="upper-alpha">
<li>大写拉丁文模式</li>
<li>草莓</li>
<li>香蕉</li>
<li>苹果</li>
</ul> <ul id="none">
<li>无模式</li>
<li>草莓</li>
<li>香蕉</li>
<li>苹果</li>
</ul> </body>