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

最新推荐文章于 2024-06-24 06:37:00 发布

weixin_30565327

最新推荐文章于 2024-06-24 06:37:00 发布

阅读量139

点赞数

原文链接：http://www.cnblogs.com/yingzi1028/p/5663659.html

版权

试一试

<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>