CSS で順序付きリスト項目と順序なしリスト項目のスタイルを設定する方法

順序なしリストでは、順序なしリストのシンボルは各リストの前に表示されるドットです。順序付きリスト ol>li では、デフォルトで先頭に数字があります。リストの先頭の箇条書きを変更するには、list-style で調整するだけです。一般的な記号には、(/*コンテンツコメント部分*/) list-style-type:circle;/*白抜きの円*/list-style:none;/*記号を削除*/list-style:square;/*正方形*/list-style:upper-roman;/*ローマ数字*/list-style:lower-alpha;/*list-style-type:upper-alpha;大文字*/ などがあります。

コードは次のようになります。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>CSS で順序付きリスト項目と順序なしリスト項目を操作する方法</title>
    <スタイル タイプ="text/css">
    ul.box1{
        list-style-type:circle;/*中空の円*/
    }
    .box1 li{
        list-style:none;/*ロゴを削除*/
        background-image: url("https://pic.cnblogs.com/avatar/1350951/20200208114706.png");/*画像とテキストの組み合わせ、リストの前に画像を追加*/
        高さ: 50px;
        背景繰り返し: 繰り返しなし;
        背景サイズ: 20px;
        /*背景画像のサイズを設定します。画像は元のサイズのままにすることも、新しいサイズに拡大することも、元の比率を維持しながら要素内の使用可能なスペースに合わせて拡大縮小することもできます。 */
        padding: 0px 25px 10px;/*内側の余白（上、左、右、下）を調整します*/
    }
    ul.box2{
        リストスタイル:square;/*square*/
    }
    ul.box3{
        list-style:upper-roman;/*ローマ数字*/
    }
    ul.box4{
        list-style:lower-alpha;/*list-style-type:upper-alpha;大文字*/
    }
    ol.box5{
        リストスタイル: なし;
        リストスタイル:大文字;
        色: インディアンレッド;
    }
    </スタイル>
</head>
<本文>
    <!-- ワイヤレス リスト -->
    <ul class="box1">
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
    </ul>
    <ul class="box2">
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
    </ul>
    <ul class="box3">
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
    </ul>
    <ul class="box4">
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
    </ul>
    <!-- 順序なしリストは ul>li を ol>li 順序付きリストに置き換えます。デフォルトでは先頭に数字が付きます -->
    <ol class="box5">
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
    </ol>
</本文>
</html>

要約する

記載されているスタイルはエディターが紹介しているCSSでの順序付きリスト項目と順序なしリスト項目のリストスタイル設定方法です。皆様のお役に立てれば幸いです！

<<: jsシミュレーションでJingdongの詳細ページで画像を拡大する効果を実現

>>: Mac で docker と kubectl の自動補完コマンドを追加する方法