CSS, wie man eine Liste mit quadratischen Elementen erstellt-CSS-Tutorial-php.cn

CSS, wie man eine Liste mit quadratischen Elementen erstellt

藏色散人

Freigeben： 2022-12-30 11:12:31

Original

5816 Leute haben es durchsucht

So legen Sie eine Liste mit quadratischen Elementen in CSS fest: Erstellen Sie zunächst eine HTML-Beispieldatei. Verwenden Sie dann das Tag „ul unordered list“ und geben Sie „list-style-type“ als „square“ an, um eine Liste mit quadratischen Elementen festzulegen.

CSS, wie man eine Liste mit quadratischen Elementen erstellt

Die Betriebsumgebung dieses Tutorials: Windows 7-System, HTML5- und CSS3-Version, DELL G3-Computer.

Empfohlen: css-Video-Tutorial

css Wie erstelle ich eine Liste mit quadratischen Elementen?

Um eine Liste quadratischer Elemente festzulegen, müssen wir das Tag ul unsordered list verwenden und den Listenstiltyp als quadratisch angeben.

Beispiel:

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

Nach dem Login kopieren

Effekt:

CSS, wie man eine Liste mit quadratischen Elementen erstellt

Im Folgenden sind einige häufig verwendete Listenstile aufgeführt: (Empfohlenes Lernen: CSS-Video-Tutorial)

<!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>

Nach dem Login kopieren

Effekt:

CSS, wie man eine Liste mit quadratischen Elementen erstellt

Das obige ist der detaillierte Inhalt vonCSS, wie man eine Liste mit quadratischen Elementen erstellt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!