Hallo, liebe Leser der Blogseite. Heute möchte ich in diesem Abschnitt über verschiedene HTML-Listen sprechen, die basierend auf speziell dafür entwickelten UL-, OL-, LI- und DL-Tags erstellt werden können. Die UL- und LI-Paare erstellen Aufzählungslisten, die OL- und LI-Paare erstellen nummerierte Listen und die DL-, DT- und DD-Elemente erstellen sogenannte Definitionslisten. Wir werden auch kurz die Prinzipien der Erstellung verschachtelter Strukturen betrachten.
Ich möchte Sie daran erinnern, dass es uns bereits gelungen ist, über die Grundlagen des modernen sowie des tabellarischen Layouts () zu sprechen. Darüber hinaus haben wir die Grundlagen angesprochen und daraus gelernt.
Aufzählungslisten basierend auf UL- und LI-Tags
Das UL-Tag wird zum Erstellen von Aufzählungslisten und das OL-Tag zum Erstellen nummerierter Listen verwendet. Diese Tags sind paarweise und Block-Tags, genau wie das LI-Element.
Zwischen den öffnenden und schließenden Tags befinden sich einzelne Listenelemente, die wiederum in einem öffnenden und schließenden LI-Element eingeschlossen sind. Der Browser fügt oben und unten in HTML-Listen einzeilige Einzüge ein, ähnlich dem Einzug, der durch ein Absatz-Tag erzeugt wird.
Schauen wir uns zum Beispiel eine Option mit Aufzählungszeichen an, die so aussehen könnte:
- Erste Linie
- Zweite
- Letztes Element
Innerhalb der öffnenden und schließenden UL-Tags können sich nur LI-Elemente befinden, und innerhalb dieser Elemente (Klauseln) selbst können Sie beliebige Inhalte (Text, Bilder, Überschriften, Absätze, Links und sogar andere Listen) einfügen.
Diese. Die UL dient nur dazu, eine Auflistung mit Aufzählungszeichen (nicht geordnet) und alles, was Sie darauf sehen, bereitzustellen Website darin enthalten ist, wird mithilfe der Inhalte von LI-Elementen implementiert.
Bei UL können Sie die Art der Markierung ändern, indem Sie darauf schreiben unterschiedliche Bedeutungen für das Attribut „Typ“. Wenn „Typ“ (Steuerung der Darstellung von Markierungen) für das UL-Element nicht angegeben ist, wird die Standarddarstellung der Markierung angezeigt (Scheibe – ein Kreis, der mit der Farbe des Textes gefüllt ist):
- — gefüllter Kreis (Standard);
- - ungefüllter Kreis;
- - Quadrat
In den obigen Beispielen haben wir das Attribut „Type“ im UL-Element mit angegeben dieser Typ Markierungen für alle Artikel. Das Attribut „Typ“ kann aber auch für jedes einzelne LI-Tag angegeben werden, wodurch für dieses Element ein eigener Markierungstyp festgelegt wird.
Beispiel Liste mit Aufzählungszeichen Mit verschiedene Arten Markierung für jedes Element:
- Marker in Form einer gefüllten Scheibe
- Marker in Form einer unbemalten Scheibe
- Quadrat
Nummerierte Listen in HTML basierend auf dem OL-Tag
Um eine nummerierte Auflistung zu erstellen, werden OL-Tags verwendet, in denen sich wiederum LI-Elemente befinden. OL und LI sind, wie ich bereits erwähnt habe, blockbasiert (das heißt, sie nehmen in der Regel den gesamten ihnen zur Verfügung stehenden Platz in der Breite ein) und außer LI-Elementen können nur LI-Elemente innerhalb von OL platziert werden.
Es stellt sich heraus, dass OL und UL Service-Tags sind, die nur benötigt werden, um dem Browser anzuzeigen, welche Art von Liste wir erstellen (mit Aufzählungszeichen oder nummeriert). Bei einem nummerierten Element sehen wir links neben jedem Element keine Markierung, sondern eine Zahl und einen Punkt dahinter:
- Erste Linie
- Zweiter Punkt
- Dritte Zeile
Wie ich gerade oben erwähnt habe, können die Elemente UL, OL und LI das Attribut TYPE verwenden. Hier können Sie den Markierungstyp konfigurieren oder angeben, welche Zahlen oder Buchstaben zum Nummerieren von Listenelementen verwendet werden sollen. Für eine nummerierte Liste können die Parameter dieses Attributs die folgenden Werte annehmen:
- — Die Nummerierung erfolgt in regulären arabischen Ziffern (dieselbe Option wird standardmäßig verwendet, wenn das Attribut „Typ“ nicht vorhanden ist);
- — Großbuchstaben als Nummerierung;
- - Kleinbuchstaben;
- - große römische Ziffern;
- - römische Kleinbuchstaben;
Ein Beispiel für eine nummerierte Liste mit unterschiedlichen Nummerierungsarten für jedes Element:
- nummeriert mit großen römischen Ziffern
- Nummerierung in kleinen lateinischen Buchstaben
- Nummerierung mit kleinen römischen Ziffern
Beim Erstellen nummerierter Listen ist es auch möglich, die Nummerierung nicht bei eins, sondern bei der im START-Attribut angegebenen Nummer zu beginnen. Zum Beispiel:
- Das erste Element, dessen Nummer im OL-Tag mit dem Attribut start="23" angegeben ist
- Der nächste Punkt, mit einer Nummer eins höher
- Noch einer
Für OL können Sie auch eine neue Nummerierung ab einem beliebigen Wert, beginnend mit einem beliebigen Element, beginnen, indem Sie das VALUE-Attribut mit der erforderlichen Nummer in die Eröffnungs-LI dieses Elements schreiben. Zum Beispiel:
- Erster Punkt mit Nummer eins
- Dieses Element erhält die im Attribut value="32" angegebene Zahl
- Artikel mit einer großen Anzahl
Gestaltung des Erscheinungsbildes von Listen in CSS (Stylesheets)
Aber normalerweise jetzt Aussehen Markierungen werden nicht über das TYPE-Attribut angegeben, sondern , für die die entsprechenden Eigenschaften angegeben werden.
Hier gebe ich lediglich ein Beispiel für verschiedene Markierungen für nicht nummerierte Listen, deren Erscheinungsbild über eine separate Datei mit Cascading Style Sheets festgelegt wird.
- Erster Punkt
- Zweite
- Zuletzt
Aber darüber werden wir in den folgenden Artikeln sprechen. So wird das Erscheinungsbild der UL-Marker in diesem Blog festgelegt. Bilder werden als Markierungen verwendet: für reguläre Elemente einer nicht nummerierten Liste – , für verschachtelte Elemente einer nicht nummerierten Liste – .
Spezielle und verschachtelte Listen im HTML-Code
Der dritte und letzte Typ heißt „Definitionslisten“ und wird mit drei Tags spezifiziert – DL, DT und DD. DL teilt dem Browser mit, dass es sich bei dem Folgenden um eine Liste von Definitionen handelt.
Typischerweise wird dieser Typ zum Schreiben von Wörterbucheinträgen verwendet (oder sollte verwendet werden), die aus Begriffen (in DT-Tags eingeschlossen) und ihren Beschreibungen (in DD-Tags eingeschlossen) bestehen.
- Erste Amtszeit
- Beschreibung
- Zweites Semester
- Seine Beschreibung
Wenn Sie sich das obige Beispiel ansehen, werden Sie feststellen, dass das DD-Element (die Beschreibung des Begriffs) relativ zum DT-Element (dem Begriff selbst) um 40 Pixel versetzt ist.
Im Allgemeinen sind DL, DT und DD Block-Tags, und nur Inhalte mit Inline-Tags können in ein DT-Element eingefügt werden (es stellt sich heraus, dass Blockelemente von Überschriften und Absätzen nicht in DT verwendet werden können). Und innerhalb von DD-Tags können Sie beliebige Elemente einfügen, sowohl Inline- als auch Block-Elemente.
Verschachtelte Liste In HTML wird es analog zu einem einfachen erstellt, aber innerhalb der Hauptliste sind einige Elemente erneut in das öffnende und schließende Tag UL oder OL eingeschlossen.
Bitte beachten Sie, dass der schließende LI des Elements, in dem das verschachtelte Element erstellt wird, nur nach dem gesamten Code der verschachtelten Liste platziert wird (dies ist sehr wichtig für die korrekte Anzeige auf der Webseite). Die verschachtelte Liste könnte etwa so aussehen:
- Der erste Absatz des Hauptteils ist nummeriert
- Zweiter Punkt
- Erstes Element eines verschachtelten Aufzählungszeichens
- Zweite
- Dritter und letzter Aufzählungspunkt
- Drittes Element nummeriert
Viel Erfolg! Bis bald auf den Seiten der Blog-Site
Du könntest interessiert sein
So fügen Sie ein HTML-Link und ein Bild (Foto) - IMG- und A-Tags Select, Option, Textarea, Label, Fieldset, Legend – HTML-Tags für die Form von Dropdown-Listen und Textfeldern 
HTML-Formulare für die Site – Tags Form, Input and Select, Option, Textarea, Label und andere zum Erstellen von Webformularelementen 
Wie Farben im HTML- und CSS-Code eingestellt werden, Auswahl von RGB-Farbtönen in Tabellen, Yandex-Ausgabe und andere Programme 
Einbetten und Objekt - HTML-Tag und zur Anzeige von Medieninhalten (Video, Flash, Audio) auf Webseiten 
Tags und Attribute der Überschriften H1-H6, horizontale Linie Hr, Zeilenumbruch Br und Absatz P von HTML-Standard 4.01
Tabellen in HTML – Table-, Tr- und Td-Tags sowie Colspan, Cellpadding, Cellspacing und Rowspan für deren Erstellung 
Was ist Hypertextsprache? HTML-Markup und wie man eine Liste aller Tags im W3C-Validator anzeigt 
Schriftart (Gesicht, Größe und Farbe), Blockquote und Pre-Tags – alte Textformatierung in reinem HTML (ohne mit CSS)
Iframe und Frame – was sind sie und wie verwendet man Frames am besten in HTML? 
Img – HTML-Tag zum Einfügen eines Bildes (Src), zum Ausrichten und Umschließen von Text darum (align) sowie zum Festlegen des Hintergrunds (background)
Aufgabe
Zeigt eine Liste mit Aufzählungszeichen horizontal ohne Aufzählungszeichen an.
Lösung
Bullet-Tag
- Zeigt standardmäßig Elemente an
- vertikal übereinander. Um Navigationselemente zu erstellen, ist es in manchen Fällen praktisch, die Liste horizontal anzuzeigen. Es gibt mehrere Möglichkeiten, diese Listenanzeige zu erreichen.
Sie sollten bereits wissen, dass HTML Block- und Inline-Elemente hat. Inline-Elemente erstellen keine eigenen Blöcke; ein Beispiel für solche Elemente sind Tags oder . Blockelemente werden in einer neuen Zeile angezeigt und bilden einen rechteckigen Block, ein Beispiel für solche Tags
oderHier ist also das Tag
- ist auch ein Blockelement.
Zu markieren
- verhielt sich nicht wie ein Blockelement, das ist mit möglich CSS-Hilfe Machen Sie es klein.
Verantwortlich dafür, wie das Element im Dokument angezeigt wird CSS-Eigenschaft Anzeige. Betrachten wir drei seiner Bedeutungen (obwohl es noch mehr gibt):
- Block – das Element wird als Blockelement angezeigt.
- inline – das Element wird als inline angezeigt.
- inline-block – Blockzeilenelement. Lesen Sie weiter unten mehr über diesen Elementtyp, wir werden ihn verwenden.
Erstellen wir zunächst eine horizontale Liste, indem wir ihre Aufzählungspunkte in Inline-Elemente umwandeln. IN CSS-Stil Schreiben wir eine Regel, in der der li-Selektor auf die display-Eigenschaft mit dem Wert inline gesetzt wird.
Horizontal auflisten
Dieser Stil hat also funktioniert und wir haben eine horizontale Anordnung der Listenelemente erhalten:
Abbildung 1. Beispiel Nr. 1 bei der Arbeit.
Diese Methode hat Nachteile. Tatsache ist, dass Inline-Elemente im Vergleich zu Blockelementen einige Einschränkungen haben. Beispielsweise können ihnen keine Breite und Höhe zugewiesen werden, Block-Varianten hingegen schon.
Beispielsweise muss das von uns erstellte Menüelement eine Breite von 150 Pixel und eine Höhe von 40 Pixel haben. Versuchen wir, den Stil wie folgt zu ändern, d. h. zwei Regeln hinzuzufügen, die die Größe des Menüelements festlegen:
Diese Änderungen führen zu keinen Änderungen. Damit Menüpunkte horizontal positioniert werden und ihre Breite und Höhe eingestellt werden können, müssen sie den Typ auf inline-block setzen. Ändern wir unseren Beispielcode:
Horizontal auflisten
Dieser Code funktioniert und die Änderungen sind sichtbar:
Abbildung 2. Beispiel Nr. 2 in Aktion. Es kann aber auch andere Optionen geben, zum Beispiel müssen wir verschachtelte Listen im Menü anzeigen:
Verschachtelte Liste.
Hier ist das Ergebnis dieses Codes:
Abbildung 3. Beispiel Nr. 3 bei der Arbeit. Wir sehen, dass die Blöcke in der Höhe nicht so ausgerichtet sind, wie wir es gerne hätten. Natürlich können Sie für alle Blöcke die gleiche Höhe angeben, aber wir kennen den genauen Wert nicht immer im Voraus und er kann sich ändern.
Aber warum passiert das eigentlich?
Unsere Blöcke haben eine Anzeigeeigenschaft, die auf inline-block eingestellt ist. Das bedeutet, dass sie die Eigenschaften sowohl von Blockelementen (die Möglichkeit, Breite und Höhe anzugeben) als auch von Inline-Elementen haben. Was wir sehen, ist die Qualität der Inline-Elemente.
Schauen wir uns eine Zeichenfolge mit „A“-Zeichen unterschiedlicher Größe an:
A A A A A A A
Wir sehen, dass alle Buchstaben entlang der unteren Zeile vertikal ausgerichtet sind. Genauer gesagt, entlang der Grundlinie, aber lassen Sie uns jetzt nicht auf das Unkraut eingehen. Das Gleiche geschah also mit unseren Blöcken.
Um Text vertikal auszurichten, verwenden Sie die Eigenschaft Vertical-Align. In unserem Beispiel Nr. 3 müssen wir den Wert top verwenden, der den oberen Rand des Elements an der Oberseite des höchsten Elements in der Linie ausrichtet.
Wenden wir es zunächst auf eine Zeichenfolge mit „A“-Zeichen unterschiedlicher Größe an:
A A A A A A A
Die Buchstaben scheinen ein wenig zu „springen“. Ich habe den CSS-Rahmen auf den höchsten Buchstaben gesetzt, um zu zeigen, dass es tatsächlich keine Sprünge gibt, sondern nur leeren Raum zwischen dem oberen Rand (wo die Ausrichtung erfolgt) und dem oberen Punkt des „A“.
Die Vertical-Align-Eigenschaft muss auf jedes Inline-Element angewendet werden, sie wird nicht vererbt. Weitere Informationen zu dieser Eigenschaft finden Sie unter: Vertical-Align.
Nach diesem Exkurs werden wir die Listenelemente weiterhin horizontal platzieren.
Zweiter Weg
Mit der Float-Eigenschaft können Sie Listenelemente horizontal platzieren. Diese Eigenschaft gibt an, auf welcher Seite das Element ausgerichtet ist, und hat zwei Positionen: links und rechts.
Hier ist ein Beispiel mit diesem Code:
Horizontal auflisten
Hier ist das Ergebnis des Codes:
Abbildung 4. Beispielarbeit. Das Beispiel scheint zu funktionieren. Es gibt jedoch eine Einschränkung bei der Nutzung dieser Eigenschaft. Jetzt werden wir es uns ansehen. Nehmen wir zum Beispiel einen Code, in dem es zwei horizontale Listen mit unterschiedlichen Möglichkeiten zur horizontalen Anordnung von Elementen gibt: display und float :
Horizontal auflisten
Hier ist das Ergebnis des Codes:
Abbildung 5. Beispielarbeit. In diesen Beispielen die Listencontainer
- haben einen roten Rand mit einer Dicke von 1 Pixel. Die oberste Liste, die die Anzeigeeigenschaft verwendet, enthält jedoch Listenelemente. Aber die Elemente einer Liste, die mit der Float-Eigenschaft erstellt wurde, fallen aus ihrem Container.
- befinden sich weiterhin außerhalb des Containers
-
.
- (Listenelement).
Browserunterstützung
Attribut
Oper
IExplorer
Randstarten, eingeben Ja Ja Ja Ja Ja Ja umgedreht Ja Ja Ja Ja Nein Nein Attribute
Attribut Bedeutung Beschreibung kompakt kompakt Wird in HTML5 nicht unterstützt.
Gibt an, dass die Liste kleiner als normal sein soll (Zeilenhöhe: 80 %).
Verwenden Sie CSS anstelle dieses Attributs.umgedreht Gibt an, dass die Reihenfolge in einer nummerierten (sortierten) Liste absteigend sein soll. Das Attribut wird von Browsern nicht unterstützt Internet Explorer und Kante. Start Nummer Definiert den Startwert einer nummerierten (geordneten) Liste. Die Werte müssen ganzzahlig sein, können aber verwendet werden negative Werte. Bei Verwendung mit Buchstaben (Typ = „A“ und Typ = „a“) ist die im Attributwert angegebene Zahl die Ordnungszahl des Buchstabens im Alphabet. Beispielsweise entspricht start = „4“ dem Buchstaben "D" und die Liste beginnt mit ihr. Bei Verwendung des Wertes start = „27“ wird der Zähler auf Null zurückgesetzt und die Liste wird zweistellig („27“ = „AA“, „28“ = „AB“, „29“ = „AC“. .). Typ 1 (Default)
Ein großer)
a (Kleinbuchstabe)
I (römisch groß)
i (römisch klein)Definiert den Aufzählungstyp, der beim Erstellen einer nummerierten (geordneten) Liste verwendet wird. Anwendungsbeispiel
Beispiel für die Verwendung eines Tags <ol> <span> - Erster PunktZweiter Punkt
- Dritter Punkt
- Erster Punkt.
- Zweiter Punkt.
- Dritter Punkt.
Auf der Seite wird es so aussehen:
Wenn Sie möchten, dass die Liste bei einer bestimmten Zahl beginnt (nicht bei 1), müssen Sie das Startattribut für das Tag angeben
-
.
Zum Beispiel:
Ein weiteres interessantes Attribut ist type , mit dem Sie eine alphabetische Nummerierung („A“ – Großbuchstabe, „a“ – Kleinbuchstabe) oder eine Nummerierung mit römischen Ziffern („I“ – Großbuchstabe, „i“ – Kleinbuchstabe) festlegen können.
Schauen wir uns ein Beispiel an, das alle möglichen Werte für das Typattribut darstellt (außer dem Standardwert):
Beispiel für die Verwendung des Typattributs eines HTML-Tags<оl> - >
- Dritter Punkt
- Erster PunktZweiter Punkt
- Dritter Punkt
- Erster PunktZweiter Punkt
- Dritter Punkt
- Erster PunktZweiter Punkt
- Dritter Punkt
- ):
Beispiel einer nummerierten Liste, die in einer anderen nummerierten Liste verschachtelt ist <span> -
Erster Punkt
- Dritter Punkt Zweiter Punkt
-
Erster Punkt
- Dritter Punkt
- Element Nr. 1
- Element Nr. 2
- Element Nr. 3
- ...
- Element Nr. 1
- Element Nr. 2
- Element Nr. 3
- Element Nr. 1
-
- Punkt Nr. 2-1
- Element Nr. 2-2
- Element Nr. 2-3
- Element Nr. 3
- ...
- Element Nr. 1
- Element Nr. 2
- Element Nr. 1
- Element Nr. 2
- Element Nr. 1
- Element Nr. 2
- Element Nr. 1
- Element Nr. 2
- ...
- Scheibe – Markierung in Form eines Kreises (Beispiel oben)
- Kreis – Markierung in Form eines transparenten Kreises (Beispiel oben)
- Quadrat – Markierung in Form eines Quadrats (Beispiel oben)
- Dezimalzahl - Markierung in Form einer nummerierten Liste in arabischen Ziffern: 1, 2, 3, ...
- decimal-leading-zero – eine Markierung in Form einer nummerierten Liste in arabischen Ziffern mit einer führenden Null: 01, 02, 03, ...
- niederromanisch – eine Markierung in Form einer nummerierten Liste im römischen Alphabet in Kleinbuchstaben: i, ii, iii, iv, v
- Oberrömisch - Markierung in Form einer nummerierten Liste im römischen Alphabet in Großbuchstaben: I, II, III, IV, V
- Niederlatein - Markierung in Form einer Liste im lateinischen Alphabet in Kleinbuchstaben: a, b, c, d, ...
- Oberlatein - Markierung in Form einer Liste im lateinischen Alphabet in Großbuchstaben: A, B, C, D, ...
- Niedergriechisch – eine Markierung in Form einer Liste im griechischen Alphabet in Kleinbuchstaben
- Obergriechisch – eine Markierung in Form einer Liste im griechischen Alphabet in Großbuchstaben
- . Beim Festlegen eines Attributs für ein Tag
- Alle Listenelemente werden wie durch das Attribut angegeben angezeigt. Aber wir können diesem oder jenem Element eine eigene Darstellung geben. Beispiel im Bild:
- Element Nr. 1
- Element Nr. 2
- Element Nr. 3
- Element Nr. 1
- Element Nr. 2
- Element Nr. 3
- Element Nr. 1
- Element Nr. 2
- Element Nr. 3
- Element Nr. 1
- Element Nr. 2
- Element Nr. 3
- Absatz 1
- Punkt 2
- Punkt 3
- Absatz 1
- Absatz 1
- Absatz 1
- Absatz 1
- Punkt 2
- Punkt 3
- Überschrift 1
- Überschrift 2
- Überschrift 3
Der Code sieht so aus:
Tag-Markierungen ändern
- mit CSS
Nach Tag erstellte Aufzählungslistenelemente
- , kann mit beliebigen Bildern markiert werden. CSS wird verwendet, um den Markierungstyp zu ändern. Zum Beispiel
Und so sieht es auf der Seite aus:
Mithilfe von CSS können wir andere Arten der Markierungsanzeige festlegen. Aber Sie müssen das bedenken, wenn Sie einen Stil für ein Tag angeben
- , gilt es für alle Elemente der Liste.
Listen können nummeriert oder nicht nummeriert sein.
Nummerierte Listen werden mit dem Code ausgegeben:
- Liste mit Zahlen
Nicht nummerierte Listen werden mit folgendem Code angezeigt:
- Liste mit Häkchen oder anderen Symbolen
Jedes Element in einer Liste ist in ein li-Tag eingeschlossen. Alle Listenelemente sind in einem gemeinsamen ul- oder ol-Tag eingeschlossen. Die Stile dieser Tags werden im Stylesheet geschrieben.
Jedem Tag sind bestimmte Designstile zugeordnet. Sie kennzeichnen Einzüge aus dem Text.
Für eine nummerierte Liste werden Nummerierungsstile für jedes Element angegeben.
Standardarabische Ziffern werden durch den Wert dezimal beschrieben.
Listenstiltyp: dezimal; /*Arabische Ziffern*/
Geben Sie für eine Liste mit Aufzählungszeichen den Zeichenstil an – Quadrate oder Kreise.
Listenstiltyp: Kreis; /*Kreise*/
Listenstiltyp: Quadrat; /*Quadrate*/Jedem Menüpunkt kann ein Bild zugeordnet werden.
list-style-image: url('Pfad zum Bild');
Typischerweise wird in Vorlagen eine nummerierte Liste mit einfachen Zahlen formatiert und eine nicht nummerierte Liste mit schwarzen Quadraten und Kreisen. Es ist langweilig und ausdruckslos. Lassen Sie uns das beheben.
Wo sind die Listenstile in der Twenty Eleven-Vorlage geschrieben?
Öffnen Sie die Datei style.css. Suchen Sie den Abschnitt mit dem Namen /* Textelemente */
Der Standardcode sieht so aus:
Wie erstelle ich eine nummerierte Liste?
Nummerierte Liste mit Hintergrund
Schauen Sie sich dieses niedliche nummerierte Listendesign an.
Gefällt? Wiederholen wir es.
Finden Sie Stile für das ol-Tag. Fügen Sie neue Eigenschaften hinzu.
Ol ( Innenabstand: 0px 0 0 20px; Rand: 0,5em 0 1,571em 1,9em; Farbe: #2E2E2E; Listenstiltyp: keine; Schriftart: 15px/17px Verdana, Arial, Helvetica, serifenlos; Z-Index : 2; Zähler zurücksetzen: Punkt; ) ol li ( margin-bottom: 4px; line-height: 1,6; color: #2E2E2E; position: relative; ) ol li:before ( margin-bottom: 4px; counter-increment: Punkt 1; Zeilenhöhe: 1,6; Höhe: 24px; Rand links: -36px; links: 0px; Breite: 24px; Rand oben: 1px; Hintergrund: #BDC3C7; Inhalt: Zähler(Punkt); Textausrichtung: zentriert; Position: absolut; Schriftstärke: fett; )
Damit Sie verstehen, wo und was Sie ändern müssen, um es an Ihr Design anzupassen, lassen Sie uns diesen Code Stück für Stück aufschlüsseln.
Listenstiltyp: keiner; — deaktiviert die Ausgabe von Standardzahlen
Zähler-Reset: Punkt; – legt eine Variable für den Nummerierungszähler fest
Position: relativ; – Platziert die Nummerierung neben den Artikeln selbstbefore ist ein Pseudoelement für das ol li-Tag. Hat die folgenden Stile:
Inhalt: Zähler(Punkt); – Zeigt den Wert einer Variablen an
Gegenschritt: Punkt 1; – erhöht den Zähler um 1
Position: absolut;
Hintergrund: #BDC3C7; — Hintergrund für Zahlen (der Hintergrund kann mit einer Farbe oder einem schönen Symbol festgelegt werden
Marge – externe Margen
Polsterung – Innenpolsterung
Farbe – Elementtextfarbe
Hintergrund – Hintergrund
text-align – Textausrichtung
Schriftstärke – Schriftstärke (Sättigung)In Ihren Stilen können Sie beliebige Farben, Ausrichtungen, Schriftgrößen und Einzüge festlegen.
Nummerierte Liste mit einem eindeutigen Bild für jeden Artikel
Eine Frauenseite hat sehr attraktive nummerierte Listen.
Wie wird dies umgesetzt? Schauen wir uns den folgenden Code an:
/*erste Zahl*/ ol li:first-child ( list-style-image: url(Pfad zum Bild mit Nummer 1); ) /*zweite Zahl*/ ol li:nth-child(2n) ( list-style- image: url(Pfad zum Bild mit der Nummer 2); ) /*dritte Nummer*/ ol li:nth-child(3n) ( list-style-image: url(Pfad zum Bild mit der Nummer 3); ) /*vierte Nummer */ ol li:nth-child(4n) ( list-style-image: url(path to the image with the number 4); ) /*Als nächstes schreiben wir genau das Gleiche, nur für die nächsten Elementnummern* /
Im Code für eine solche nummerierte Liste müssen Sie alle Artikelnummern auflisten und jeder von ihnen ein eindeutiges Symbol zuweisen.
Wenn Sie bis zu 20 nummerierte Elemente in Listen in Artikeln verwenden, müssen Sie die Pseudoklasse nth-child(An) 20 Mal schreiben. Das letzte in den Stilen ist also die Pseudoklasse nth-child(20n).
Suchen Sie in der Stildatei nach den Zeilen, die das Design der nummerierten Liste beschreiben (ol li-Tags).
Fügen Sie die Pseudoklasse des ersten Kindes hinzu. Kopieren Sie es und fügen Sie es einmal ein. Ändern Sie dann diese Eigenschaft in „nth-child(An)“ und kopieren Sie so viele Zahlen, wie Sie möchten, um ein eigenes Symbol zu erhalten. Geben Sie die Artikelnummern ein.
Fügen Sie für jede Zahl die Eigenschaft „list-style-image“ mit einem eigenen eindeutigen Symbol hinzu.
Wenn sich die Symbole auf der Website weit von den Elementen entfernt befinden oder diese überlappen, müssen Sie die Ausrichtung und Einrückung der digitalen Symbole oder den Text der Elemente bearbeiten.
Wie erstelle ich eine Liste mit Aufzählungszeichen (nicht nummeriert)?
Aufzählungsliste ul li mit wechselnden Symbolen
Diese Liste mit Aufzählungszeichen hat mir sehr gut gefallen.
Ul ( padding: 11px 0 5px 0; ) ul li ( padding-left: 32px; margin-bottom: 10px; Schriftart: normal 15px Verdana, serifenlos; Farbe: #2E2E2E; line-height: 1,6; border-bottom: 1px gestrichelt #ccc; padding-bottom: 10px; ) ul li:before ( Inhalt: ""; Position: absolut; Breite: 27px; Höhe: 24px; Rand links: -35px; Rand oben: -2px; Hintergrund: url("images/sprite.jpg") 0px 2px no-repeat; list-style-type: circle; ) ul li:nth-child(2n):before ( content: ""; position: absolute; width: 27px; Höhe: 43px; Rand links: -35px; Rand oben: -2px; Hintergrund: url("images/sprite.jpg") 0px -17px keine Wiederholung; Listenstiltyp: Kreis; )
Anstelle des standardmäßigen Listenstiltyps können Sie die Eigenschaft „Pfad zum Symbol“ zuweisen – list-style-image:url. Dann müssen Sie jedoch einen externen linken Rand von den Rändern der Site angeben – ohne ihn werden die Symbole nicht angezeigt und gehen über den Inhaltsbereich hinaus.
Für das Experiment können Sie Einrückungen zuweisen:
Ul li( list-style-image: url(images/radio.png); margin-left: 30px; )
Der Wechsel der Symbole kann mit der Eigenschaft nth-child(An) eingestellt werden. Das obige Beispiel verwendet das Before-Pseudoelement.
Der Code enthält eine Pseudoklasse nth-child(2n). Sein Wert ist 2. Es stellt sich heraus, dass jeder Punkt mit gerader Nummer einem anderen Symbol entspricht. Wenn Sie statt 2n 2n+1 schreiben, erscheint an ungeraden Punkten ein weiteres Symbol.
Für jedes Listenelement können Sie einen Unterstrich angeben. Im obigen Beispiel sind die Punkte mit gepunkteten Linien unterstrichen.
Sie können jedem Element auch Rahmen, Hintergründe und Symbole zuweisen. Übertreibe es einfach nicht. Unser Ziel ist es nicht, alle mit einem ausgefallenen Design umzuhauen, sondern die Qualität der Inhaltswahrnehmung zu verbessern.
Wie zeige ich mehrere Listen mit unterschiedlichen Designs auf einer Seite an?
Manchmal müssen Sie mehrere Listen mit unterschiedlichen Stilen platzieren.
Wenn Sie gemeinsame Stile zuweisen, wird allen Listen das gleiche Design zugewiesen. Verschiedene Listen können angezeigt werden, wenn Sie dem ol- oder ul-Tag eine separate ID zuweisen und diese im HTML-Modus der Artikelbearbeitung eingeben. Nun, in der Stildatei für diese ID müssen Sie separate Stile schreiben.
Hier ist zum Beispiel eine schöne Möglichkeit zur Inhaltsgestaltung:
In HTML würden Sie die Liste so schreiben:
- Inhalt
In CSS würden Sie Stile wie diesen schreiben:
Ol#sod( padding: 0px 20px 10px 51px; margin: 0.5em 0 0em 1em; color: #2E2E2E; list-style-type: none; background: #f1f4f5; border-left: #BDC3C7 4px solid; display: inline- block; ) ol#sod li() ol#sod li:before( font-weight:normal !important )
Der neue Stil unterscheidet sich vom Hauptstil durch das Design des ol-Tags: Hintergrund, Anzeigestil, Zeile links vom Inhalt.
Durch die Verwendung mehrerer unterschiedlich gestalteter Listen im Text gestalten Sie die Informationsdarstellung noch interessanter. Beim Auflisten von Elementen können Sie einige Symbole festlegen und beim Auflisten von Aktionen können Sie andere festlegen. Hier sind der Gestaltung nur Ihre Vorstellungskraft Grenzen gesetzt.
Diese Methoden sind auch bei der Gestaltung von Menüpunkten, Überschriften und anderen Elementen der Website anwendbar.
Wie erstelle ich Ankerlinks in einer Inhaltsliste?
Wie schreibe ich sie in HTML-Code? Ein Codeteil umrahmt den Anker des Links und ein weiterer Codeteil wird neben der Stelle platziert, an die wir weitergeleitet werden müssen, wenn wir auf den Link klicken.
- Inhalt
Und im Text des Artikels müssen Sie Folgendes schreiben:
Überschrift 1… Überschrift 2… Überschrift 3…
Vielleicht können mich erfahrenere Webmaster in etwas korrigieren. Ich rate lediglich, was ich selbst in der Praxis ausprobiert habe.
Wenn Sie noch Fragen haben, freue ich mich über diese in den Kommentaren.
Ageeva Veronica.
Das könnte Sie auch interessieren:
Lesen Sie auch
Abbildung 7. Beispielarbeit. Darüber hinaus wissen wir bei der Arbeit nicht immer, welches Element dem Element mit Float folgt. Die ideale Option wäre, die Operation der Float-Eigenschaft in demselben Block zu schließen, in dem sie geöffnet ist.
Dies geschieht über ein Pseudoelement. Hier ist der Code:
Horizontal auflisten
Jetzt haben wir 100 % funktionierenden Code.
Abbildung 8. Beispielarbeit. Diese Technik mit Float-Eigenschaft Wird normalerweise im Website-Layout verwendet, um durch Tags erstellte Spalten auszurichten
. Auf diese Weise erhalten wir eine normale Stützenkonstruktion mit der erforderlichen Höhenausrichtung. Wenn wir ein Menü erstellen, ist uns die Höhe der Blöcke in den meisten Fällen nicht wichtig, sie ist fast immer gleich. Daher ist die Verwendung der Regel (display: inline-block) in diesen Fällen durchaus gerechtfertigt.Der Vollständigkeit halber haben wir uns jedoch mit allen vertraut gemacht Möglichkeiten. Obwohl es auch andere Möglichkeiten gibt, beispielsweise die Verwendung von CSS-Tabellen, empfehlen Suchmaschinen dringend, Tabellen nur für den vorgesehenen Zweck zu verwenden und nicht zum Organisieren von Navigationselementen oder anderen Zwecken.
HTML-TagsBedeutung und Anwendung
Eine nummerierte (geordnete) Liste enthält Elemente, die in einer bestimmten Reihenfolge angezeigt werden. Eine nummerierte Liste beginnt mit einem Tag
- (kurz für Englisch Bestellliste- Bestellliste). Jedes Listenelement beginnt mit einem Tag
- >
- >
- >
Bitte beachten Sie, dass es erlaubt ist, nummerierte (geordnete) Listen zu erstellen, die in anderen nummerierten Listen (innerhalb eines Listenelements) verschachtelt sind
Auf der Seite wird es so aussehen.
Die Hypertext-Auszeichnungssprache HTML verfügt über ein Tag
- , wird zum Erstellen von Listen mit Aufzählungszeichen verwendet. Es wird von allen modernen Browsern unterstützt und ermöglicht die Anzeige von Elementen in einer Reihenfolge, die keine Nummerierung erfordert. Beispielsweise werden sehr oft Menüpunkte und alles, was mit Listen zu tun hat, auf der Seite angezeigt: Gerichte, Produkte, Geräte, Werkzeuge und vieles mehr, was aufgelistet werden muss, ohne die Priorität eines bestimmten Artikels anzugeben.
Tag-Syntax
Dieser Code wird in eine Liste mit Aufzählungszeichen auf der Website übersetzt:
Etikett
- erfordert die obligatorische Verwendung eines schließenden Tags
Um Listenelemente zu bilden, wird ein gepaartes Tag verwendet. Zwischen den öffnenden und schließenden Tags befinden sich einzelne Wörter, Phrasen, Absätze, Bilder, Codeteile und vieles mehr, die den Inhalt der Aufzählungsliste bilden.
Was kann der Inhalt einer Aufzählungsliste sein?Dabei kann es sich um eine Vielzahl von Texten handeln, darunter einzelne Wörter, Phrasen und Absätze, Bilder, verschachtelte Listen, Teile von PHP-Code und vieles mehr, die einer einfachen Markierung bedürfen.
Jedes Listenelement mit Aufzählungszeichen ist standardmäßig um 40 Pixel nach rechts eingerückt. Mithilfe von CSS-Stilen können wir die Darstellung dieser Liste nach Belieben ändern. Etikett
- ist blockbasiert, nimmt also die gesamte ihm zur Verfügung stehende Fläche ein, begrenzt durch den Bildschirmrand, den Tabellenrahmen oder andere Seitenelemente.
Listenanhänge innerhalb einer Liste sind zulässig.
Zum Beispiel
Tag-Attribute und -Eigenschaften
Weit verbreitetes Tag-Attribut
- ist ein Typattribut, das angibt, wie die Listenmarkierung aussehen wird. Kann die folgenden Werte annehmen
1. type="disc" – Markierung in Form eines gefüllten Kreises (dieser Wert ist der Standardwert). Das Festplattenbeispiel war etwas höher.
2. type="circle" – Markierung in Form eines transparenten Kreises
Zum Beispiel:
3. type="square" – Markierung in Form eines Quadrats
Zum Beispiel:
Und so sieht es auf der Seite aus:
In CSS wird der Aufzählungstyp mithilfe des list-style-type-Attributs angegeben:
Schauen wir uns an, welche Werte list-style-type annehmen kann:
Anmerkung 2
Das Attribut kann dem Tag selbst zugewiesen werden
- , und Tags
- (Listenelement).
Auf den ersten Blick funktioniert alles. Aber lasst uns unsere Listen austauschen. Platzieren wir die Liste mit der Klasse „Menü-1“ im Code vor der Liste mit der Klasse „Menü-2“ (jetzt ist sie niedriger).
Das erhalten wir als Ergebnis:
Abbildung 6. Beispiellauf. Die Elemente im unteren Menü umschließen auch das obere Menü, da die Wirkung der Float-Eigenschaft nicht aufgehoben wurde und auf alle nachfolgenden Elemente angewendet wird.
Wie kann dieses Problem gelöst werden?
Dazu müssen Sie die Eigenschaft „clear“ verwenden. Sie hebt den Umbruch des Elements um ein anderes Element auf, wenn für dieses die Eigenschaft „float“ festgelegt ist.
Hier ist ein modifiziertes Beispiel mit der Eigenschaft „clear“:
Horizontal auflisten
Es ist zu erkennen, dass die untere Liste die obere nicht mehr umschließt und die Elemente nicht miteinander kollidieren. Aber in der ersten Liste gibt es Tags
- ist auch ein Blockelement.
