NNNの博客

列表样式总结

今天在做项目的时候,用到了li的样式,然后就查了下li列表的样式有哪些。写出来,给大家做个参考~以后不用再找啦~


<!DOCTYPE html>
<html>
<head>
<style>
    ul.a {list-style-type:circle;}
    ul.b {list-style-type:disc;}
    ul.c {list-style-type:square;}
    ol.d {list-style-type:armenian;}
    ol.e {list-style-type:cjk-ideographic;}
    ol.f {list-style-type:decimal;}
    ol.g {list-style-type:decimal-leading-zero;}
    ol.h {list-style-type:georgian;}
    ol.i {list-style-type:hebrew;}
    ol.j {list-style-type:hiragana;}
    ol.k {list-style-type:hiragana-iroha;}
    ol.l {list-style-type:katakana;}
    ol.m {list-style-type:katagana-iroha;}
    ol.n {list-style-type:lower-alpha;}
    ol.o {list-style-type:lower-greek;}
    ol.p {list-style-type:lower-latin;}
    ol.q {list-style-type:lower-roman;}
    ol.r {list-style-type:upper-alpha;}
    ol.s {list-style-type:upper-latin;}
    ol.t {list-style-type:upper-roman;}
    ol.u {list-style-type:none;}
    ol.v {list-style-type:inherit;}
</style>
</head>
<body>
    <ul class="a">
        <li>Circle type</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ul>
    <ul class="b">
        <li>Disc type</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ul>
    <ul class="c">
        <li>Square type</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ul>
    <ol class="d">
        <li>Armenian type</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ol>
    <ol class="e">
        <li>Cjk-ideographic type</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ol>
    <ol class="f">
        <li>Decimal type</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ol>
    <ol class="g">
        <li>Decimal-leading-zero type</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ol>
    <ol class="h">
        <li>Georgian type</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ol>
    <ol class="i">
        <li>Hebrew type</li>
        <li>Tea</li>
        <li>Coca Cola</li>
        </ol>    
    <ol class="j">
        <li>Hiragana type</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ol>
    <ol class="k">
        <li>Hiragana-iroha type</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ol>
    <ol class="l">
        <li>Katakana type</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ol>
    <ol class="m">
        <li>Katakana-iroha type</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ol>
    <ol class="n">
        <li>Lower-alpha type</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ol>
    <ol class="o">
        <li>Lower-greek type</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ol>
    <ol class="p">
        <li>Lower-latin type</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ol>
    <ol class="q">
        <li>Lower-roman type</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ol>
    <ol class="r">
        <li>Upper-alpha type</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ol>
    <ol class="s">
        <li>Upper-latin type</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ol>
    <ol class="t">
        <li>Upper-roman type</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ol>
    <ol class="u">
        <li>None type</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ol>
    <ol class="v">
        <li>inherit type</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ol>
</body>
</html>

大家可以直接把代码粘过去看效果~~