色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

CSS 列表

HTML中有三種類型的列表。

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

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

列表標(biāo)記

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

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

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

下面顯示了正在使用的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屬性使用圖像作為標(biāo)記。

以下代碼使用圖像作為列表標(biāo)記。

<!DOCTYPE HTML>
<html>
<head>
<style>
ul  {
   list-style-image:  url("https://www.w3cschool.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屬性指定標(biāo)記相對于li元素的內(nèi)容框的位置。

允許的值在內(nèi)部（標(biāo)記在內(nèi)容框內(nèi)）和外部（標(biāo)記在內(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è)置為列表項目標(biāo)記1
list-style-position將列表項目標(biāo)記設(shè)置為內(nèi)部或外部1
list-style-type設(shè)置列表項目標(biāo)記的類型1
list-style在一個聲明中設(shè)置列表屬性1