Zusammenfassung des allgemeinen Wissens über das CSS-Seitenlayout (Listenstil)

In CSS steckt viel Wissen, und es ist für uns unmöglich, uns alles zu merken. In meiner Freizeit habe ich einige allgemeine Kenntnisse über das CSS-Seitenlayout zusammengestellt. Dieser Artikel wird Ihnen das allgemeine Wissen über den CSS-Listenstil vermitteln. Freunde in Not können darauf verweisen, ich hoffe, es kann Ihnen helfen.

1. Ungeordnete Liste

Eine ungeordnete Liste bedeutet, dass die Spaltensymbole Punkte oder andere Grafiken anstelle von Zahlen sind. Die Syntax einer ungeordneten Liste lautet:

<ul>
    <li>**</li>
    <li>**</li>
    ......
</ul>

Die Funktion von ul besteht darin, anzugeben, dass die darin enthaltene Liste eine ungeordnete Liste ist, und jede Gruppe von li wird verwendet, um ein Listenelement zu enthalten.

2. Geordnete Liste

Das Listensymbol der geordneten Liste ist eine Zahl. Die Syntax einer geordneten Liste lautet:

<ol>
    <li>**</li>
    <li>**</li>
    ......
</ol>

Die Funktion von ol besteht darin, anzugeben, dass die darin enthaltene Liste eine geordnete Liste ist, und jede Gruppe von li wird verwendet, um ein Listenelement zu enthalten.

3. Definitionsliste

Die Definitionsliste wird selten verwendet:

<dl>
   <dt>
      <dd>**</dd>
   </dt>
   ......
</dl>

Die Funktion von dl besteht darin, dies anzuzeigen enthält Die Liste ist eine Liste von Definitionen. Im Allgemeinen definiert dt ein Konzept und dd ist die Erklärung des Konzepts.

4. Ändern Sie den Stil von Listensymbolen

CSS bietet Listenstil-Typ-, Listenstil-Bild- und Listenstil-Positionsattribute, um den Stil zu ändern Stil der Listensymbole.

Verwenden Sie das integrierte Listensymbol

Syntax:

list-style-type：type;

Wenn Typ=none, verfügt die Liste nicht über das Listensymbol. Häufig verwendete Typen sind:

Quadrat (ausgefülltes Quadrat)

Scheibe (ausgefüllter Kreis)

Cicle (hohler Kreis)

Dezimal (arabische Ziffern)

lower-roman (kleine römische Buchstaben)

upper-roman (große römische Buchstaben)

Hintergrundbilder als Listensymbole verwenden

Wie Wird manchmal benötigt. Das Listensymbol kann durch ein kleineres Bild ersetzt werden. Die Syntax lautet:

list-style-image：url(picture.png);

Ändern Sie die Position des Listensymbols

Das Listensymbol kann in den Text eingebettet werden oder außerhalb Textinhalt. Die Syntax lautet:

list-style-position：inside/outside;

Abkürzung des Listenattributs

Der folgende Code:

list-style-image：url(picture.png);
list-style-position：inside/outside;

kann abgekürzt werden als:

list-style: url(picture.png) inside/outside;

Hinweis: In general, list-style-type und list-style-image können nicht gleichzeitig verwendet werden, da letzteres das erstere überschreibt.

Das obige ist der detaillierte Inhalt vonZusammenfassung des allgemeinen Wissens über das CSS-Seitenlayout (Listenstil). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!