閱讀(9.6k) 書簽贊(3) 我要糾錯

CSS 列表

2018-11-01 17:39 更新

HTML中有三種類型的列表。

有序列表
無序列表
定義列表

使用CSS，我們可以用不同的方式來設(shè)計它們。

列表標記

您可以使用 list-style-type 屬性來設(shè)置列表的標記樣式。

此屬性的允許值如下所示。

none - 不顯示任何標記。
box
check
circle
diamond
disc
dash square - 使用指定的形狀作為標記。請注意，并非所有瀏覽器都支持所有形狀。
decimal - 使用十進制數(shù)字作為標記。
binary - 為標記使用二進制數(shù)。
lower-alpha - 對標記使用小寫字母字符。
upper-alpha - 對標記使用大寫字母字符。

下面顯示了正在使用的list-style-type屬性。

<html>
<head>
<style rel="stylesheet" type="text/css">
li.a {
    list-style-type: none;
}

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

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

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

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

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

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

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

li.i {
    list-style-type: upper-roman;
}
</style>
</head>

<body>
    <ul>
        <li class="a">Point one</li>
        <li class="b">Point two</li>
        <li class="c">Point three</li>
        <li class="d">Point four</li>
        <li class="e">Point five</li>
        <li class="f">Point six</li>
        <li class="g">Point seven</li>
        <li class="h">Point eight</li>
        <li class="i">Point nine</li>
    </ul>
</body>
</html>

您可以將此屬性應(yīng)用于整個列表或單個列表項。

列表樣式圖像

您可以通過list-style-image屬性使用圖像作為標記。

以下代碼使用圖像作為列表標記。

<!DOCTYPE HTML>
<html>
<head>
<style>
ul  {
   list-style-image:  url("http://m.hgci.cn/style/download.png");
}
</style>
</head>
<body>
    <ul>
        <li>XML</li>
        <li>CSS</li>
        <li>Javascript</li>
        <li>Java</li>
        <li>SQL</li>
        <li>HTML</li>
    </ul>
</body>
</html>

列表樣式位置

您可以使用list-style-position屬性指定標記相對于li元素的內(nèi)容框的位置。

允許的值在內(nèi)部（標記在內(nèi)容框內(nèi)）和外部（標記在內(nèi)容框外部）。

以下代碼顯示了list-style-position屬性及其使用的值。

<!DOCTYPE HTML>
<html>
<head>
<style>
li.inside {
    list-style-position: inside;
}
li.outside {
    list-style-position:  outside;
}
li {
    background-color: lightgray;
}
</style>
</head>
<body>
    <ul>
        These  are   the   inside items:
        <li class="inside">A</li>
        <li class="inside">B</li>
        <li class="inside">C</li>
        These  are   the   outside items:
        <li class="outside">D</li>
        <li class="outside">E</li>
        <li class="outside">F</li>
    </ul>
</body>
</html>

簡寫屬性

list-style是設(shè)置所有列表特性的簡寫屬性。

列表樣式簡寫屬性的格式如下：

list-style: <list-style-type>  <list-style-position>  <list-style-image>

以下代碼顯示如何使用簡寫列表樣式屬性。

<html>
<head>
<style type="text/css">
li {
    background: mistyrose;
}
li#arrow {
    list-style: square url("arrow.png") outside;
}
li#arrow-inside {
    list-style: url("arrow.png") inside;
}
li#marker-inside {
    list-style: square inside;
}
li#marker-image {
    list-style: square url("arrow.png");
}
li#arrow-only {
    list-style: url("arrow.png");
}
li#marker {
    list-style: circle;
}
li#position {
    list-style: inside;
}
</style>


</head>
<body>
    <ul>
        <li id="arrow">All three styles can be provided.</li>
        <li id="arrow-inside">The image and the position.</li>
        <li id="marker-inside">The marker and the position.</li>
        <li id="marker-image">The marker and the image.</li>
        <li id="arrow-only">Just the image.</li>
        <li id="marker">Just the marker.</li>
        <li id="position">Just the position.</li>
    </ul>
</body>
</html>

屬性	描述	CSS
line-height	設(shè)置行高	1
list-style-image	將圖像設(shè)置為列表項目標記	1
list-style-position	將列表項目標記設(shè)置為內(nèi)部或外部	1
list-style-type	設(shè)置列表項目標記的類型	1
list-style	在一個聲明中設(shè)置列表屬性	1

CSS 列表

HTML中有三種類型的列表。

列表標記

列表樣式圖像

列表樣式位置

簡寫屬性

相關(guān)屬性

推薦文章

推薦教程

推薦課程

HTML中有三種類型的列表。