CSSで四角いアイテムを含むリストを設定する方法-CSSチュートリアル-php.cn

CSSで四角いアイテムを含むリストを設定する方法

藏色散人

リリース： 2022-12-30 11:12:31

オリジナル

5790 人が閲覧しました

CSS で正方形の項目を含むリストを設定する方法: まず HTML サンプルファイルを作成し、次に ul 順序なしリストタグを使用し、「list-style-type」に「square」を指定して、List of で設定します。四角いアイテム。

CSSで四角いアイテムを含むリストを設定する方法

このチュートリアルの動作環境: Windows 7 システム、HTML5&&CSS3 バージョン、DELL G3 コンピューター。

推奨: css ビデオチュートリアル

css 正方形のアイテムを含むリストを設定するにはどうすればよいですか?

正方形の項目のリストを設定するには、ul 順序なしリストタグを使用し、list-style-type を square として指定する必要があります。

例:

// css
ul.square {
    list-style-type:square; /* 每一项前都是正方形 */
}
// html
<ul class="square">
    <li>eight</li>
    <li>glasses</li>
    <li>of</li>
    <li>water</li>
</ul>

ログイン後にコピー

効果:

CSSで四角いアイテムを含むリストを設定する方法

一般的に使用されるリストスタイルの一部を次に示します: (推奨学習: CSS ビデオチュートリアル)

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Document</title>
     <style>
        ul.circle {
            list-style-type:circle;  /* 每一项前都是圆圈 */
        }
        ul.square {
            list-style-type:square; /* 每一项前都是正方形 */
        }
        ol.upper-roman {
            list-style-type:upper-roman;  /* 每一项前面都是大写罗马数字 */
        }
        ol.lower-alpha {
            list-style-type:lower-alpha; /* 每一项前都是小写字母 */
        }
    </style>
</head>
<body>
    <ul class="circle">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <ul class="square">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <ol class="upper-roman">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ol>
    <ol class="lower-alpha">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ol>
</body>
</html>

ログイン後にコピー

効果:

CSSで四角いアイテムを含むリストを設定する方法