2013-08-10li列表在网页中常见应用例举(一)

    您现在的位置是:首页 > 学无止境 > 心得笔记

    一、list-style-type语法:

    list-style-type: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

    默认值:disc

    下面列举一些常用的,list-style-type属性的每个值请参考w3cschool网站css列表

    CSS代码:

    .disc{list-style-type:disc;} /* 实心圆 */

    html代码:

    <ul class="disc">

    <li>这是一个实心圆项目列表</li>

    <li>这是一个实心圆项目列表</li>

    <li>这是一个实心圆项目列表</li>

    </ul>

    显示结果:

    • 这是一个实心圆项目列表
    • 这是一个实心圆项目列表
    • 这是一个实心圆项目列表

    还有两个常用的是decimal(阿拉伯数字)、square(实心方块)

    .disc{list-style-type:decimal;} /* 阿拉伯数字  */

    • 这是一个阿拉伯数字项目列表
    • 这是一个阿拉伯数字项目列表
    • 这是一个阿拉伯数字项目列表

    .disc{list-style-type:square;} /* 实心方块 */

    • 这是一个实心方块项目列表
    • 这是一个实心方块项目列表
    • 这是一个实心方块项目列表

    二、list-style-image:属性使用图像来替换列表项的标记,li列表前面用图片来展示。

    ul {list-style-image: url(/images/li.gif)}

    • 咖啡
    • 可口可乐

    完整代码:

    <!doctype html>

    <html>

    <head>

    <style type="text/css">

    ul 

    {

    list-style-image: url(/images/li.gif)

    }

    </style>

    </head>

    <body>

    <ul>

    <li>咖啡</li>

    <li>茶</li>

    <li>可口可乐</li>

    </ul>

    </body>

    </html>

关键字词:li,li 图片