Im Folgenden werden die verschiedenen HTML-Listenstile erläutert.
Hier müssen wir uns nicht um die Reihenfolge der Anzeige des Inhalts kümmern; Wir müssen die Dinge nur gut platzieren, so dass die HTML-Seite sie gut formatiert und klar vor dem Benutzer platziert.
Es gibt zwei Tags in der HTML-Sprache, die diese Listen verarbeiten, und wahrscheinlich können Sie nur mit diesen Tags eine Navigationsleiste und eine vertikale Seitenleiste erstellen.
Jetzt sehen wir uns einen Code für
Beispielausschnitt –
Code:
<html> <head> HTML Lists </head> <body> <h2> list of pizzas <h2> <ul> <li style="color:red"> farmhouse </li> <li style="color:green"> peppy paneer </li> <li style="color:blue"> onion pizza </li> </ul> </body> </html>
Ausgabe:
Jetzt sehen wir einen Fall, in dem wir versuchen, die Schüler basierend auf ihren Rängen in der Klasse geordnet einzuordnen, und dies wird sortiert angezeigt, indem wir das
Für diesen Fall sehen wir uns auch ein Beispiel an, und Sie müssen dieses wie oben beschrieben speichern.
Code:
<html> <head> HTML Lists </head> <body> <h2> list of students <h2> <ol> <li style="color:red"> John </li> <li style="color:green"> Harris </li> <li style="color:blue"> Plunket </li> </ol> </body> </html>
Ausgabe/HTML-Seite
Sehen wir uns nun einige Varianten davon an, bei denen wir diese Listen anpassen oder gut formatieren können, indem wir einfach einige CSS-Eigenschaften zur HTML-Seite hinzufügen, wodurch das Erscheinungsbild der Seite besser aussieht.
Beispiel –
Code:
<html> <head> HTML Lists </head> <body> <h2> list of students <h2> <ul style="list-style-type:none"> <li style="color:red"> John </li> <li style="color:green"> Harris </li> <li style="color:blue"> Plunket </li> </ul> </body> </html>
Ausgabe/HTML-Seite –
Die Kreisgeschosse existieren also nicht mehr; Sie können sie mit den oben angegebenen Optionen anpassen.
Ebenso besteht die Möglichkeit zu wählen, ob die Bestelllistenwerte in den Bestelllisten mit Ziffern, römischen Buchstaben oder Buchstaben angezeigt werden.
Sie können den Eigenschaftstyp in
Typ: „1“, „A“, „a“, „I“, „i“
Sehen wir uns den entsprechenden Beispielcode an –
Code:
<html> <head> HTML Lists </head> <body> <h2> list of students <h2> <ol type = "i"> <li style="color:red"> John </li> <li style="color:green"> Harris </li> <li style="color:blue"> Plunket </li> </ol> </body> </html>
Ausgabe/HTML-Seite –
Ähnlich haben wir auch Beschreibungslisten, in denen wir den Artikel definieren können, für den wir eine Beschreibung platzieren müssen; Nehmen wir an, Sie erstellen eine Seite, auf der Sie einige Definitionen für einige Schlüsselwörter platzieren müssen. Dann können Sie die Beschreibungslisten auswählen.
Wir haben die folgenden Tags, um dasselbe zu handhaben.
– Dieses Tag definiert die Beschreibungsliste
– dieses Tag gibt den Beschreibungsbegriff an
– this tag carries the description of each term
Example –
Code:
<html> <head> HTML Lists </head> <body> <h2> list of students <h2> <dl> <dt style="color:red"> Docker </dt> <dd> -: this is used to make environment portable application containers </dd> <br> <dt style="color:green"> Kubernetes </dt> <dd> -: this is an orchestrator for those containers make by docker </dd> </dl> </body> </html>
Output/HTML page –
You can also define the start property in the ordered lists in
Code:
<html> <head> HTML Lists </head> <body> <h2> list of students <h2> <ol type = "1" start="10"> <li style="color:red"> John </li> <li style="color:green"> Harris </li> <li style="color:blue"> Plunket </li> </> </body> </html>
Output:
So we saw various lists in which we can place data; this data can be rendered from the model to view using javascript frameworks; what we have shown is a static page, and it can be made dynamic with JS. These lists can be formatted with bootstrap to make them look like navbars or sidebars too.
Das obige ist der detaillierte Inhalt vonHTML-Listenstile. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
