Listen mit Aufzählungszeichen. Listen in HTML erstellen So verfolgen Sie das ausgewählte Listenelement in HTML

Der einzige Unterschied besteht darin, dass dieses Tag ausschließlich für Nummerierungslisten gedacht ist. Der Name des Tags leitet sich von der englischen Abkürzung „Ordered List“ ab – einer nummerierten Liste.

Tag-Syntax

    1. Element Nr. 1
    2. Element Nr. 2
    3. Element Nr. 3
    4. ...

    Dabei kann das Attribut type="value" die folgenden Werte annehmen

    • A – setzt Markierungen in Form von lateinischen Großbuchstaben (A, B, C...);
    • a – setzt Markierungen in Form von lateinischen Kleinbuchstaben (a, b, c..);
    • I – setzt Markierungen in Form großer römischer Ziffern (I, II, III, IV..);
    • i – setzt Markierungen in Form kleiner römischer Ziffern (i, ii, iii, iv..);
    • 1 (Standard) – setzt Markierungen in Form arabischer Ziffern (1, 2, 3...);

    Das Attribut start="value" gibt den Anfangswert (Startwert) des Berichts an.

    Das umgekehrte Attribut gibt die umgekehrte Zählung an (falls erforderlich).

    Etikett

      erfordert die obligatorische Verwendung eines schließenden Tags

    Zur Bildung von Listenelementen wird ein gepaartes Tag verwendet

  1. . 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.

    Notiz

    Innerhalb der Liste können Sie das Konto in Ihr eigenes ändern. Zu diesem Zweck gibt es auf dem Tag ein spezielles Attribut value="".

  2. , dem ein numerischer Wert zugewiesen ist. Zum Beispiel

    1. Element Nr. 1
    2. Element Nr. 2
    3. Element Nr. 3

    Beispiele mit nummerierten Listen in HTML (
      )

    Beispiel 1. HTML-nummerierte Liste in lateinischen Buchstaben

    Beispiel mit Großbuchstaben

    1. Element Nr. 1
    2. Element Nr. 2
    3. Element Nr. 3
    1. Element Nr. 1
    2. Element Nr. 2
    3. Element Nr. 3

    Beispiel mit Kleinbuchstaben

    1. Element Nr. 10
    2. Element Nr. 11
    3. Element Nr. 12

    So sieht es auf der Seite aus:

    1. Element Nr. 1
    2. Element Nr. 2
    3. Element Nr. 3

    Beispiel 2. HTML-nummerierte Liste in lateinischen Buchstaben

    Beispiel mit Großbuchstaben

    1. Element Nr. 1
    2. Element Nr. 2
    3. Element Nr. 3

    So sieht es auf der Seite aus:

    1. Element Nr. 1
    2. Element Nr. 2
    3. Element Nr. 3

    Beispiel mit Kleinbuchstaben

    1. Element Nr. 1
    2. Element Nr. 2
    3. Element Nr. 3

    So sieht es auf der Seite aus:

    1. Element Nr. 1
    2. Element Nr. 2
    3. Element Nr. 3

    Beispiel 3. Nummerierte HTML-Liste mit unterschiedlicher Startposition

    Ein Beispiel, das die Fähigkeiten des Startattributs zeigt, mit dem Sie den Startwert des Zählers festlegen können.

    1. Element Nr. 1
    2. Element Nr. 2
    3. Element Nr. 3

    So sieht es auf der Seite aus:

    1. Element Nr. 1
    2. Element Nr. 2
    3. Element Nr. 3

    Beispiel 4. Ändern der Anzahl in nummerierten HTML-Listen

    Unten finden Sie ein Beispiel mit der Möglichkeit, Zählerwerte mithilfe des Wertattributs zu ändern, wenn neue Elemente in Tags angezeigt werden

  3. .

    1. Element Nr. 1
    2. Element Nr. 2
    3. Element Nr. 3
    4. Element Nr. 4

    So sieht es auf der Seite aus:

    1. Element Nr. 1
    2. Element Nr. 2
    3. Element Nr. 3
    4. Element Nr. 4

    Beispiel 5. Umgekehrt nummerierte Liste in HTML

    Nachfolgend finden Sie ein Beispiel für eine umgekehrt nummerierte Liste (Zählung in umgekehrter Reihenfolge).

    1. Element Nr. 1
    2. Element Nr. 2
    3. Element Nr. 3
    4. Element Nr. 4

    So sieht es auf der Seite aus:

    1. Element Nr. 1
    2. Element Nr. 2
    3. Element Nr. 3
    4. Element Nr. 4

    Listen werden aktiv zur automatischen Nummerierung von Inhaltsblöcken verwendet. Bei der Verwendung verschachtelter Listen ist es jedoch unmöglich, eine Nummerierung der Unterabschnitte wie 1.1, 1.2, 1.3 zu erhalten, da jede Liste unabhängig ist. Aber was in SHTML nicht möglich ist, kann man Stilen zuordnen.

    Schauen wir uns zunächst an, wie man allgemein verschachtelte Listen erstellt. Der Hauptcontainer ist das Tag

      , und die Listenelemente werden durch Tags gebildet
    1. . Die verschachtelte Liste beginnt ebenfalls mit
        , aber dieses Tag muss sich innerhalb des Containers befinden
      1. , so bleibt die korrekte Syntax erhalten (Beispiel 1).

        Beispiel 1: Reguläre verschachtelte Liste





        Verschachtelte Liste



        1. Absatz 1

          1. Unterabschnitt 1.1

          2. Unterabschnitt 1.2

          3. Unterabschnitt 1.3



        2. Punkt 2

          1. Unterabschnitt 2.1

          2. Unterabschnitt 2.2







        Das Ergebnis dieses Beispiels ist in Abb. dargestellt. 1. Bitte beachten Sie, dass die Nummerierung verschachtelter Listen jedes Mal von neuem beginnt.

        Reis. 1. Verschachtelte Listenansicht

        Lassen Sie uns nun die integrierte Nummerierung der Listen entfernen und eine neue erstellen, jedoch in der Form, die wir benötigen. Dazu benötigen Sie drei Stilattribute: Zähler-Reset, Zähler-Inkrement und Inhalt.

        counter-reset – legt eine Variable fest, die den Zählerwert speichert;

        Zählerinkrement – ​​erhöht oder verringert den Zählerwert um die angegebene Zahl;

        Inhalt – gibt den Zählerwert aus, wenn das Argument counter(variable) verwendet wird. Funktioniert in Verbindung mit den After- oder Before-Pseudoelementen.

        Für die Liste der ersten Ebene nennen wir die Zählervariable list1 und für die zweite Ebene list2 . Dann erfolgt die Initiierung von Zählern für Listen wie folgt.

        OL (Zähler-Reset: list1;) /* Liste der ersten Ebene */
        OL OL ( Zähler zurücksetzen: list2; ) /* Liste der zweiten Ebene*/

        In diesem Fall helfen Inhaltsselektoren dabei, die verschachtelte Liste von der äußeren Liste zu trennen. Das OL OL-Konstrukt bedeutet, den Stil nur auf das Tag anzuwenden

          , aber nur, wenn es sich innerhalb eines anderen Tags befindet
            .

            Der Zählerwert wird durch den OL LI:before-Selektor erhöht, zu dem die Attribute „Zählerinkrement“ und „Inhaltsstil“ hinzugefügt werden. Das Attribut counter-increment mit dem Wert list1 erhöht den Wert dieses Zählers um eins, und content: counter(list1) „zeigt den Wert des Zählers vor dem Listenelement an. Diese Attribute funktionieren paarweise und müssen daher gleichzeitig aktiviert werden.

            OL LI:vor ( /* Liste der ersten Ebene */
            Zählerinkrement: list1;
            /* Den Wert ausgeben als 1., 2.*/
            }
            OL OL LI:vor ( /* Liste der zweiten Ebene */
            Zählerinkrement: list2; /* Erhöhen Sie den Zählerwert */
            }

            Für eine verschachtelte Liste verwenden wir erneut Inhaltsselektoren (OL OL) und verwenden gleichzeitig die Ausgabe der Zähler list1 und list2. In diesem Fall erhalten wir die Nummerierung des Typs, den wir benötigen.

            Der endgültige Code ist in Beispiel 2 dargestellt.

            Beispiel 2. Verschachtelte Listen mit automatischer Nummerierung





            Verschachtelte Liste




            1. Absatz

              1. Unterabschnitt

              2. Unterabschnitt

              3. Unterabschnitt



            2. Absatz

              1. Unterabschnitt

              2. Unterabschnitt







            Das Ergebnis dieses Beispiels ist in Abb. dargestellt. 2.

            Reis. 2. Art der automatischen Listennummerierung im Opera-Browser

            Kommentar

            Das angegebene Beispiel funktioniert im Browser Internet Explorer bis einschließlich Version 7 nicht, da dieser keine der angegebenen Stileigenschaften unterstützt.

            Da der Browser Internet Explorer viele interessante Stilattribute nicht unterstützt, sollte die übliche Nummerierung in Listen speziell dafür unangetastet bleiben. Entfernen Sie dazu list-style-type: none . Da dies jedoch auch andere Browser betrifft, in denen das Beispiel korrekt funktioniert, müssen Sie einen Hack verwenden – das bedeutet eine Technik, bei der verschiedene Browser einen unterschiedlichen Stilcode erhalten. Sie können beispielsweise das Tag !important verwenden. Das Hinzufügen von !important zum Wert eines Stilattributs erhöht dessen Bedeutung. Wenn Sie dasselbe Attribut ohne !important neu definieren, wird es von Browsern ignoriert. Aber nicht in Internet Explorer Version 6 und niedriger.

            LI (
            Listenstiltyp: keiner !important; /* Nummerierung in den Browsern Opera, Safari, Firefox entfernen */
            Listenstiltyp: dezimal; /* Nummerierung im Browser IE6 und niedriger belassen */
            }

            Wenn wir diese Codes durch die Zeichenfolge mit dem LI-Selektor in Beispiel 2 ersetzen, erhalten wir eine verschachtelte Liste, die in allen Browsern korrekt funktioniert.

            Mit Listen mit Aufzählungszeichen können Sie großen Text in separate Blöcke unterteilen, die jeweils mit einem Aufzählungszeichen beginnen – normalerweise einem kleinen Punkt. Dadurch wird die Aufmerksamkeit des Lesers auf den Text gelenkt und dessen Lesbarkeit erhöht.

            Mit Element

              Folgende Funktionen sind damit verbunden:

              • an dem Ort, an dem es auftritt
                  , fügt der Browser automatisch einen Zeilenumbruch ein;
                • die Liste ist oben und unten eingerückt;
                • Standardmäßig werden Markierungen als gefüllter Kreis angezeigt;
                • Jedes Listenelement wird relativ zum Haupttext nach rechts verschoben.

                Abbildung 1 zeigt das Ergebnis des Beispiels und veranschaulicht die oben genannten Merkmale der Aufzählungsliste.

                Reis. 1. Listenansicht mit Aufzählungszeichen

                Markierungstyp

                Markierungen können eine von drei Formen annehmen: gefüllter Kreis (Standard), offener Kreis und Quadrat. Um den Markierungstyp auszuwählen, verwenden Sie die Eigenschaft list-style-type oder die Eigenschaft universal list-style (Beispiel 1). Es gelten folgende Werte:

                • Scheibe – Markierungen in Form eines gefüllten Kreises;
                • Kreis – Markierungen in Form eines offenen Kreises;
                • quadratisch - quadratische Markierungen.

                Beispiel 1: Das Erscheinungsbild einer Markierung ändern

                Listen

                • Sepulki
                • Sepulcaria
                • Vereinzelung


                Das Beispiel zeigt, wie Sie eine Liste mit Aufzählungszeichen erstellen, indem Sie ein kleines, einfarbiges Quadrat als Aufzählungssymbol verwenden. Obwohl die Anzahl der Werte auf drei begrenzt ist, bedeutet dies nicht, dass uns nur drei Markertypen zur Verfügung stehen. Es gibt viele Sonderzeichen, die erfolgreich als Markierungssymbol fungieren können. Schrauben Sie sie direkt an

              • Es wird nicht funktionieren, also müssen Sie es umgehen. Blenden Sie dazu die Listenmarkierungen über die Eigenschaft list-style mit dem Wert none und im Text vor dem Inhalt aus
              • Wir fügen unseren eigenen Charakter mit dem Pseudoelement ::before hinzu. In Beispiel 2 ist ein solcher Marker ein Dreieck.

                Beispiel 2: Verwendung von::before

                Listen

                • Sepulki
                • Sepulcaria
                • Vereinzelung


                Das Ergebnis dieses Beispiels ist in Abb. dargestellt. 2. Da die Verwendung der list-style-Eigenschaft mit dem Wert none Markierungen überhaupt nicht entfernt, sondern nur aus der Ansicht ausblendet, erscheint die Liste nach rechts verschoben. Um diese Funktion zu entfernen, fügt das Beispiel eine text-indent-Eigenschaft mit einem negativen Wert hinzu. Seine Aufgabe besteht darin, den Text um ein Zeichen nach links zu verschieben.

                Reis. 2. Beliebige Markierungen in der Liste

                Das Zeichen muss nicht im Hexadezimalformat vorliegen; es kann direkt in den Text eingefügt werden. Die Hauptsache ist, dass das Dokument in der UTF-8-Kodierung gespeichert wird und dass der Editor dies unterstützt. Die Zeichen selbst und ihre Codes können beispielsweise dem LibreOffice Writer entnommen werden (Abb. 3).

                Reis. 3. Auswählen eines Symbols in LibreOffice

                Liste mit handgezeichneten Markierungen

                Mit Stilen können Sie über die Eigenschaft list-style-image jedes geeignete Bild als Markierung festlegen. Der Wert ist ein relativer oder absoluter Pfad zur Grafikdatei, wie in Beispiel 3 gezeigt.

                Beispiel 3: Ein Bild als Marker verwenden

                Listen

                • Sepulki
                • Sepulcaria
                • Vereinzelung


                Wählen Sie am besten eine kleine Zeichnung, um die Listenelemente nicht in Bildunterschriften zu verwandeln. In Abb. Abbildung 4 zeigt das Ergebnis eines Beispiels für die Verwendung kleiner Bilder als Markierungen.

                Reis. 4. Zeichnen als Marker

                Die Verwendung von list-style-image hat einige Nachteile:

                • das Muster kann nicht nach oben oder unten verschoben werden;
                • Die Position des Bildes relativ zum Text kann in verschiedenen Browsern unterschiedlich sein.

                Diese Mängel lassen sich mit der Eigenschaft „background“ vermeiden, sie legt das Hintergrundbild fest. Für jedes Listenelement

              • Wir entfernen die ursprünglichen Markierungen und legen das Hintergrundbild fest, ohne es zu wiederholen. Und damit der Text nicht über dem Bild erscheint, verschieben wir ihn mit padding-left nach rechts (Beispiel 4).

                Beispiel 4: Hintergrund verwenden

                Ul ( margin-left: -1em; ) li ( list-style: none; Hintergrund: url(images/bullet.png) no-repeat 0 2px; padding-left: 20px; )

                Position von Text und Aufzählungszeichen

                Es gibt zwei Möglichkeiten, eine Markierung relativ zum Text zu platzieren: Die Markierung wird über den Rand der Listenelemente hinaus verschoben oder um den Text gewickelt (Abb. 5).



                innendraußen

                Reis. 5. Platzierung von Markierungen relativ zum Text

                Um die Position von Markierungen zu steuern, verwenden Sie die Eigenschaft list-style-position. Es hat zwei Bedeutungen: Außen – Aufzählungszeichen werden außerhalb des Textblocks platziert (dies ist der Standardwert) und Innen – Aufzählungszeichen sind Teil des Textblocks und werden im Listenelement angezeigt (Beispiel 5).

                Beispiel 5: Position von Markern ändern

                Listen

                • Bevor Sie beginnen, prüfen Sie, ob die im 3BM-Kit enthaltene Ausrüstung enthalten ist.
                • Sollten ein oder mehrere Peripheriegeräte fehlen, sollten Sie sich umgehend an das technische Personal des CC wenden.
                • Nach einer visuellen Inspektion Ihres Arbeitsbereichs können Sie den 3BM vorsichtig einschalten.


                Das Ergebnis dieses Beispiels ist in Abb. dargestellt. 6.

                Listen werden häufig auf Webseiten verwendet, daher ist dieses Problem sehr relevant. In HTML gibt es zwei Arten von Listen: nummerierte und nicht nummerierte Listen (mit Aufzählungszeichen). Zum Erstellen von Listen werden spezielle Tags verwendet. In dieser Lektion werden wir uns mit den wichtigsten Tags vertraut machen. Schauen wir uns die Listentypen in HTML der Reihe nach an und nutzen reale Beispiele, um zu verstehen, wie sie sich unterscheiden und wie sie ausgegeben werden.

                Nummerierte Listen in HTML

                Nummerierte Listen in HTML sind eine geordnete Folge von Elementen. In einer nummerierten Liste wird jedem Element automatisch eine fortlaufende Nummer vorangestellt. Die nummerierte Liste sieht so aus:

                1. Erstes Element der Liste
                2. Zweites Element der Liste
                3. Drittes Element der Liste
                4. Viertes Element der Liste
                5. Fünftes Element der Liste

                In diesem Beispiel wird die Liste in arabischen Ziffern angezeigt. Nummerierte Listen verfügen über Attribute, mit denen das Format für die Anzeige der Listennummerierung festgelegt werden kann:

                1. Attribute „I“ oder „i“ – die Liste ist in römischen Buchstaben (Groß- oder Kleinschreibung) nummeriert;
                2. Attribute „A“ oder „a“ – Nummerierung in lateinischen Buchstaben (Groß- oder Kleinbuchstaben);
                3. Das „Start“-Attribut wird verwendet, um sicherzustellen, dass die Nummerierung nicht mit dem ersten Element beginnt, aus dem die Liste generiert werden soll.

                Beispiel. Eine nummerierte Liste, die aus römischen Buchstaben gebildet wird und mit dem zweiten Element beginnt:

                1. Erstes Element der Liste
                2. Zweites Element der Liste
                3. Drittes Element der Liste
                4. Viertes Element der Liste
                5. Fünftes Element der Liste

                Aufzählungslisten in HTML

                Ungeordnete Listen werden auch ungeordnete oder Aufzählungslisten genannt. Um Elemente einer solchen Liste hervorzuheben, werden Sonderzeichen (Marker) verwendet. Die Art der Listenmarkierungen wird im HTML-Code über spezielle Attribute festgelegt. Beispiel einer Aufzählungsliste in HTML:

                • Erstes Element der Liste
                • Zweites Element der Liste
                • Drittes Element der Liste
                • Viertes Element der Liste
                • Fünftes Element der Liste

                In diesem Fall wird die Liste aus Markierungen in Form eines fetten Punktes gebildet. Die Attribute einer ungeordneten Liste sind:

                1. „Scheibe“ – Markierungen in Form eines gefüllten Kreises
                2. „Kreis“ – Markierungen in Form eines leeren Kreises
                3. „Quadrat“ – Markierungen in Form eines gefüllten Quadrats

                Ein Beispiel für die Angabe einer bestimmten Markierung in einer Liste:

                • Erstes Element der Liste
                • Zweites Element der Liste
                • Drittes Element der Liste
                • Viertes Element der Liste
                • Fünftes Element der Liste

                Sie können auch grafische Bilder als Listenmarkierungen verwenden, was Ihnen eine schöne Gestaltung Ihres HTML-Dokuments ermöglicht. In der Praxis wird dies sehr häufig verwendet. Um diese Aufgabe umzusetzen, müssen Sie in den Code den Pfad zum Bild schreiben, das als Markierung dient:

                  Erstes Element der Liste
                  Zweites Element der Liste
                  Drittes Element der Liste
                  Viertes Element der Liste
                  Fünftes Element der Liste

                Listen können auch verschachtelt sein; sie bestehen aus mehreren Listen:

                1. Erstes Element der Liste
                2. Zweites Element der Liste
                  • Erster Unterpunkt der Liste
                  • Zweiter Unterpunkt der Liste
                3. Drittes Element der Liste
                4. Viertes Element der Liste
                5. Fünftes Element der Liste

                Das ist wahrscheinlich alles, was ich Ihnen über Listen in HTML sagen wollte. Listen kommen auf Webseiten sehr häufig vor. Um sie zu bilden, müssen Sie bestimmte Inferenzregeln kennen.

                In HTML gibt es zwei Arten von Listen: nummerierte und nicht nummerierte. Ihre Entstehung ist fast gleich. Sogar die Tags unterscheiden sich um ein Zeichen. Sie können auch erstellen, die sowohl nummerierte als auch Markierungen enthalten können.

                Diese Listen können beliebig umgewandelt werden. Es hängt alles von Ihrer Vorstellungskraft ab. Zuerst schauen wir uns Standardlisten an, genau wie im Word-Editor, und dann verbessern wir sie und gestalten sie bis zur Unkenntlichkeit.

                HTML-nummerierte Liste

                Mit den folgenden Tags kann eine reguläre Nummer erstellt werden:

              • Erstes Listenelement
              • Zweiter Punkt auf der Liste
              • Dritter Punkt auf der Liste
              • Einfache Listen sehen so aus

                Gemäß den Standards muss sich jedes Listenelement in einem öffnenden und schließenden li-Tag befinden. Wenn Sie jedoch das schließende Tag nicht einfügen, ist das Ergebnis genau das gleiche. Der Prozessor ist ziemlich intelligent. Während der Listenkonvertierung werden die öffnenden Tags analysiert. Wenn er ein neues sieht

              • , wird dann automatisch davor platziert
              • .

                Somit können Listen wie unten gezeigt erstellt werden.

                Aus Sicht von Fachleuten ist dies jedoch falsch.

                Nicht nummerierte Listen (oder Aufzählungslisten) werden auf die gleiche Weise erstellt, nur dass anstelle des ol-Tags ul geschrieben wird.

                Es gibt keine Zahlen oder Buchstaben, sondern nur verschiedene Symbole, sogenannte Markierungen.

                Mehrstufige nummerierte HTML-Liste

                Viele Benutzer sind an dieser Möglichkeit interessiert. Daher ist zu beachten, dass jede nummerierte HTML-Liste mehrstufig erstellt werden kann. Zusätzliche Ebenen können gleich oder beschriftet sein.

                Um die im obigen Beispiel gezeigte Liste zu erstellen, müssen Sie Folgendes schreiben.

                Bitte beachten Sie, dass in diesem Code im Gegensatz zu den ersten Beispielen das Typattribut hinzugefügt wird. Dadurch können Sie den Sortiertyp sowohl für nummerierte als auch für Aufzählungslisten festlegen.

                Bei Nummern geben wir das Alphabet oder die Art der Nummern an, in anderen Fällen die Art der Markierung.

                Wenn Sie ein spezielles HTML-Tag verwenden, kann die nummerierte Liste beliebig werden.

                Sie können das Typattribut mit einem beliebigen Wert aus der Tabelle angeben. Oder geben Sie in der CSS-Stilklasse list-style-type mit dem gewünschten Sortiertyp an.

                Die Übersetzung von Werten ist ganz einfach. Grundkenntnisse in Englisch sind ausreichend. Aber auch wenn Sie die Wörter „Kreis“, „Quadrat“ usw. nicht übersetzen können, können Sie visuell verstehen, wie das Ergebnis aussehen wird, wenn Sie diese Werte im Typattribut angeben.

                Verwenden Sie für nummerierte Listen die folgenden Optionen:

                • 1 - Arabische Ziffern;
                • A – Großbuchstaben;
                • a - lateinische Kleinbuchstaben;
                • I – große römische Ziffern;
                • i – römische Kleinbuchstaben.

                Der Standardwert ist immer eine Liste mit. Das heißt, wenn Sie nichts angeben, ist es dasselbe wie type="1".

                Darüber hinaus können nummerierte Listen an jeder beliebigen Position beginnen. Standardmäßig beginnt die Ausgabe bei 1. Wenn Sie möchten, können Sie jedoch mindestens bei Hundert beginnen. Dazu müssen Sie das Startattribut mit einem beliebigen Wert angeben.

                Darüber hinaus können Sie die Schlussfolgerung auch in umgekehrter Reihenfolge ziehen. Dazu müssen Sie umgekehrt schreiben.

                Gestaltung von Listen

                Eine nummerierte HTML-Liste kann so schön gestaltet werden, dass Sie möglicherweise nicht sofort erkennen, dass es sich um eine normale Liste und nicht um ein in Photoshop erstelltes Bild handelt.

                Hier finden Sie Beispiele für schöne Listen.

                Wie aus dem Beispiel hervorgeht, können Sie das Aussehen der Nummerierung und der Elemente selbst ändern.

                Sie können eine reguläre Liste wie diese erstellen.

                In CSS-Stilen müssen Sie das Design für die OL-Tags angeben. Bitte beachten Sie, dass in diesem Fall die Einstellungen auf alle Listen auf der gesamten Site angewendet werden, auf denen diese Stildatei verwendet wird.

                Betrachten wir zunächst die Option mit einem runden Listendesign. Kehren Sie zum Listencode zurück. Dort wird die gerundete Klassenliste angezeigt. Dies ist die Klasse, an der Sie herumbasteln müssen, um solch eine Schönheit zu schaffen. Sie können der Klasse einen beliebigen Namen geben.

                Schauen wir uns nun das quadratische Design an.

                Die Stile sind recht ähnlich. Der Unterschied besteht darin, dass das Element im ersten Fall mithilfe von CSS-Funktionen gerundet wird.

                Ein professioneller Layout-Designer muss vorhersehen und verstehen, dass nicht alle Benutzer moderne Computer verwenden. Nicht jeder hat Windows 7, 8, 10 installiert. Es gibt einen Prozentsatz der Benutzer, die noch Windows XP verwenden und alte Versionen des Internet Explorer-Browsers verwenden.

                In der Regel werden fast alle modernen Designverbesserungen von Elementen dadurch nicht unterstützt. Für den Benutzer wird es so aussehen, als ob am Design der Website überhaupt nicht gearbeitet wurde. Dass alles weggezogen ist. Elemente kollidieren miteinander. Um dies zu vermeiden, müssen Sie alle Optionen in Betracht ziehen.

                Einige Webmaster verschließen die Augen davor, da ihr Anteil am modernen Markt immer kleiner wird. Aber für einen Fachmann ist jeder Besucher wichtig, insbesondere wenn es sich um eine kommerzielle Website handelt.

                Machen Sie für jeden etwas Passendes oder berücksichtigen Sie alle Browservarianten.



Aktie