CSS Lists

Posted on Edited on In Views: Disqus:

 

列舉可有兩種形式，一為順序列舉二為無序列舉，

範例為

<!DOCTYPE html>
<html>
<head>
    <style>

    </style>
</head>
<body>

    <p>Example of unordered lists:</p>
    <ul class="a">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ul>

    <p>Example of ordered lists:</p>
    <ol class="c">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ol>

</body>
</html>

另外還可控制列舉的位置、標記圖案、標記樣式如下敘述

 

一、list-style-position

可以指定inside與outside樣式，預設值為outside

範例為

<!DOCTYPE html>
<html>
<head>
    <style>
        ul.a {
            list-style-position: inside;
        }

        ul.b {
            list-style-position: outside;
        }
    </style>
</head>
<body>

    <p>The following list has list-style-position: inside:</p>

    <ul class="a">
        <li>Earl Grey Tea - A fine black tea</li>
        <li>Jasmine Tea - A fabulous "all purpose" tea</li>
        <li>Honeybush Tea - A super fruity delight tea</li>
    </ul>

    <p>The following list has list-style-position: outside:</p>

    <ul class="b">
        <li>Earl Grey Tea - A fine black tea</li>
        <li>Jasmine Tea - A fabulous "all purpose" tea</li>
        <li>Honeybush Tea - A super fruity delight tea</li>
    </ul>

    <p>"list-style-position: outside" is the default setting.</p>

</body>
</html>

 

二、list-style-image

用來指定標記圖片

範例為

<!DOCTYPE html>
<html>
<head>
    <style>
        ul {
            list-style-image: url('http://www.w3schools.com/cssrefsqpurple.gif');
        }
    </style>
</head>
<body>

    <ul>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ul>

</body>
</html>

 

三、list-style-type

用來指定標記樣式

範例為

<!DOCTYPE html>
<html>
<head>
    <style>
        ul.a {
            list-style-type: circle;
        }

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

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

        ol.d {
            list-style-type: lower-alpha;
        }
    </style>
</head>
<body>

    <p>Example of unordered lists:</p>

    <ul class="a">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ul>

    <ul class="b">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ul>

    <p>Example of ordered lists:</p>

    <ol class="c">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ol>

    <ol class="d">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ol>

</body>
</html>

更多樣式的選擇請看CSS list-style-type Property

 

四、Shorthand簡寫

其簡寫的語法為

list-style: list-style-type list-style-position list-style-image