CSS--リスト

2377 ワード

1.一般的なリストタイプ
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8">
    <title> This is my HTML</title>
    <!--      -->
    <style type="text/css">
        /***     ***/
        ul.none {list-style-type: none;}
        /***   ***/
        ul.disc {list-style-type: disc;}
        /***   ***/
        ul.circle {list-style-type: circle;}
        /***   ***/
        ul.square {list-style-type: square;}
        /***    ***/
        ul.decimal {list-style-type: decimal;}
        /***    ***/
        ul.lower-alpha {list-style-type: lower-alpha;}
    </style>
</head>
<body>
    <ul class="none">
        <li>"none"  </li>
        <li>  </li>
        <li>  </li>
    </ul>
    <ul class="disc">
        <li>"disc"  </li>
        <li>  </li>
        <li>  </li>
    </ul>
    <ul class="circle">
        <li>"circle"  </li>
        <li>  </li>
        <li>  </li>
    </ul>
    <ul class="square">
        <li>"square"  </li>
        <li>  </li>
        <li>  </li>
    </ul>
    <ul class="decimal">
        <li>"decimal"  </li>
        <li>  </li>
        <li>  </li>
    </ul>
    <ul class="lower-alpha">
        <li>"lower-alpha"  </li>
        <li>  </li>
        <li>  </li>
    </ul>
</body>
</html>

2.画像をリスト項目としてマークする
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8">
    <title> This is my HTML</title>
    <style type="text/css">
        ul {list-style-image: url(file:///C:/Documents%20and%20Settings/Administrator/%E6%A1%8C%E9%9D%A2/1.jpg);}
    </style>
</head>
<body>
    <ul>
        <li>  </li>
        <li> </li>
        <li>    </li>
    </ul>
</body>
</html>