Web速查-索引

Alt text

定义

list-style-type 属性设置或检索对象的列表项所使用的预设标记。

语法

list-style-type：A;

其中，A 支持 20 余种样式，见下表所示。

属性值

值 描述
disc 实心圆
circle 空心圆
square 实心方块
decimal 阿拉伯数字
lower-roman 小写罗马数字
upper-roman 大写罗马数字
lower-alpha 小写英文字母
upper-alpha 大写英文字母
none 不使用项目符号
armenian 传统的亚美尼亚数字
cjk-ideographic 浅白的表意数字
georgian 传统的乔治数字
lower-greek 基本的希腊小写字母
hebrew 传统的希伯莱数字
hiragana 日文平假名字符
hiragana-iroha 日文平假名序号
katakana 日文片假名字符
katakana-iroha 日文片假名序号
lower-latin 小写拉丁字母
upper-latin 大写拉丁字母

实例

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>鱼C-零基础入门学习Web（Html5+Css3）</title>

    <style>

        h1{font-size:16px;font-family:Arial;}

        .disc{list-style-type:disc;}

        .circle{list-style-type:circle;}

        .square{list-style-type:square;}

        .decimal{list-style-type:decimal;}

        .lower-roman{list-style-type:lower-roman;}

        .upper-roman{list-style-type:upper-roman;}

        .lower-alpha{list-style-type:lower-alpha;}

        .upper-alpha{list-style-type:upper-alpha;}

        .none{list-style-type:none;}

        .armenian{list-style-type:armenian;}

        .cjk-ideographic{list-style-type:cjk-ideographic;}

        .georgian{list-style-type:georgian;}

        .lower-greek{list-style-type:lower-greek;}

        .hebrew{list-style-type:hebrew;}

        .hiragana{list-style-type:hiragana;}

        .hiragana-iroha{list-style-type:hiragana-iroha;}

        .katakana{list-style-type:katakana;}

        .katakana-iroha{list-style-type:katakana-iroha;}

        .lower-latin{list-style-type:lower-latin;}

        .upper-latin{list-style-type:upper-latin;}

    </style>

</head>

<body>

    <h1>disc：</h1>

    <ul class="disc">

        <li>零基础入门学习Web开发（HTML5 & CSS3）</li>

        <li>零基础入门学习Web开发(JavaScript)</li>

        <li>零基础入门学习Web开发(JQuery)</li>

    </ul>

    <h1>circle：</h1>

    <ul class="circle">

        <li>零基础入门学习Web开发（HTML5 & CSS3）</li>

        <li>零基础入门学习Web开发(JavaScript)</li>

        <li>零基础入门学习Web开发(JQuery)</li>

    </ul>

    <h1>square：</h1>

    <ul class="square">

        <li>零基础入门学习Web开发（HTML5 & CSS3）</li>

        <li>零基础入门学习Web开发(JavaScript)</li>

        <li>零基础入门学习Web开发(JQuery)</li>

    </ul>

    <h1>decimal：</h1>

    <ul class="decimal">

        <li>零基础入门学习Web开发（HTML5 & CSS3）</li>

        <li>零基础入门学习Web开发(JavaScript)</li>

        <li>零基础入门学习Web开发(JQuery)</li>

    </ul>

    <h1>lower-roman：</h1>

    <ul class="lower-roman">

        <li>零基础入门学习Web开发（HTML5 & CSS3）</li>

        <li>零基础入门学习Web开发(JavaScript)</li>

        <li>零基础入门学习Web开发(JQuery)</li>

    </ul>

    <h1>upper-roman：</h1>

    <ul class="upper-roman">

        <li>零基础入门学习Web开发（HTML5 & CSS3）</li>

        <li>零基础入门学习Web开发(JavaScript)</li>

        <li>零基础入门学习Web开发(JQuery)</li>

    </ul>

    <h1>lower-alpha：</h1>

    <ul class="lower-alpha">

        <li>零基础入门学习Web开发（HTML5 & CSS3）</li>

        <li>零基础入门学习Web开发(JavaScript)</li>

        <li>零基础入门学习Web开发(JQuery)</li>

    </ul>

    <h1>upper-alpha：</h1>

    <ul class="upper-alpha">

        <li>零基础入门学习Web开发（HTML5 & CSS3）</li>

        <li>零基础入门学习Web开发(JavaScript)</li>

        <li>零基础入门学习Web开发(JQuery)</li>

    </ul>

    <h1>none：</h1>

    <ul class="none">

        <li>零基础入门学习Web开发（HTML5 & CSS3）</li>

        <li>零基础入门学习Web开发(JavaScript)</li>

        <li>零基础入门学习Web开发(JQuery)</li>

    </ul>

    <h1>armenian：</h1>

    <ul class="armenian">

        <li>零基础入门学习Web开发（HTML5 & CSS3）</li>

        <li>零基础入门学习Web开发(JavaScript)</li>

        <li>零基础入门学习Web开发(JQuery)</li>

    </ul>

    <h1>cjk-ideographic：</h1>

    <ul class="cjk-ideographic">

        <li>零基础入门学习Web开发（HTML5 & CSS3）</li>

        <li>零基础入门学习Web开发(JavaScript)</li>

        <li>零基础入门学习Web开发(JQuery)</li>

    </ul>

    <h1>georgian：</h1>

    <ul class="georgian">

        <li>零基础入门学习Web开发（HTML5 & CSS3）</li>

        <li>零基础入门学习Web开发(JavaScript)</li>

        <li>零基础入门学习Web开发(JQuery)</li>

    </ul>

    <h1>lower-greek：</h1>

    <ul class="lower-greek">

        <li>零基础入门学习Web开发（HTML5 & CSS3）</li>

        <li>零基础入门学习Web开发(JavaScript)</li>

        <li>零基础入门学习Web开发(JQuery)</li>

    </ul>

    <h1>hebrew：</h1>

    <ul class="hebrew">

        <li>零基础入门学习Web开发（HTML5 & CSS3）</li>

        <li>零基础入门学习Web开发(JavaScript)</li>

        <li>零基础入门学习Web开发(JQuery)</li>

    </ul>

    <h1>hiragana：</h1>

    <ul class="hiragana">

        <li>零基础入门学习Web开发（HTML5 & CSS3）</li>

        <li>零基础入门学习Web开发(JavaScript)</li>

        <li>零基础入门学习Web开发(JQuery)</li>

    </ul>

    <h1>hiragana-iroha：</h1>

    <ul class="hiragana-iroha">

        <li>零基础入门学习Web开发（HTML5 & CSS3）</li>

        <li>零基础入门学习Web开发(JavaScript)</li>

        <li>零基础入门学习Web开发(JQuery)</li>

    </ul>

    <h1>katakana：</h1>

    <ul class="katakana">

        <li>零基础入门学习Web开发（HTML5 & CSS3）</li>

        <li>零基础入门学习Web开发(JavaScript)</li>

        <li>零基础入门学习Web开发(JQuery)</li>

    </ul>

    <h1>katakana-iroha：</h1>

    <ul class="katakana-iroha">

        <li>零基础入门学习Web开发（HTML5 & CSS3）</li>

        <li>零基础入门学习Web开发(JavaScript)</li>

        <li>零基础入门学习Web开发(JQuery)</li>

    </ul>

    <h1>lower-latin：</h1>

    <ul class="lower-latin">

        <li>零基础入门学习Web开发（HTML5 & CSS3）</li>

        <li>零基础入门学习Web开发(JavaScript)</li>

        <li>零基础入门学习Web开发(JQuery)</li>

    </ul>

    <h1>upper-latin：</h1>

    <ul class="upper-latin">

        <li>零基础入门学习Web开发（HTML5 & CSS3）</li>

        <li>零基础入门学习Web开发(JavaScript)</li>

        <li>零基础入门学习Web开发(JQuery)</li>

    </ul>

</body>

</html>

Alt text

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

Safari Chrome FireFox IE
6.0 4.0 2.0 6.0