Pulldown-Menü
Sonderaussage: Da der Interaktionseffekt der Bootstrap -Komponente auf Plugins basiert, die von der Jquery -Bibliothek verfasst wurden, müssen Sie zunächst jQuery.min.js laden, bevor Sie Bootstrap.min.js verwenden, um Effekte zu erzeugen.
<div> <button type = "button" id = "dropdownMenu1" data-toggle = "Dropdown"> Dropdown-Menü <Pan> </span> </button> <ul rollen = "Menü" aria-labelledby ROLLE = "Präsentation"> <a rollen = "Menuitem" tabindex = "-1" href = "#"> Dropdown-Menüelement </a> </li> <li rollen = "Präsentation"> <a rollen = "Menuitem" tabindex = "-1" href = "#"> Dropdown-Menüpunkte </a> <li> <li> <li rollen = "> <"> <"> <"> <"> <"> <"> <"> <"> <"> <"> <"> <"> <"> <a "> <"> <"> <"> <"> <"> <"> <"> <"> <a" <A. "> <a" <A. href = "#"> Dropdown-Menüelemente </a> </li> </ul> </div> <!-JQuery muss vor dem Bootstrap importiert werden, der letztere auf der Basis des ersteren-> <scription src = "http://libs.baidu.com/jquery/1.9.0/js.js"> </script> </script> </script src = "// maxcdn.bootStrappcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script>
Reproduktionsbild:
Implementierungsprinzip:
Am Anfang gab es ein Display: Keine in der Klasse; Schauen Sie sich CSS unten an
.dropdown-menu {Position: absolut;/*Setzen Sie die absolute Positionierung, relativ zum übergeordneten Element Div.Dropdown*/Top: 100%;/*Lassen Sie den Menüelement Dropdown-Menü am Ende des übergeordneten Menüelements. Wenn das übergeordnete Element keine relative Positionierung festlegt, ist das Element relativ zum Körperelement*/links: 0; Z-Index: 1000;/*Setzen Sie das Dropdown-Menüelement nicht von anderen Elementen*/Anzeige: Keine;/*Hauen Sie das Dropdown-Menüelement für Standardeinstellungen*/float: links; min-width: 160px; padding: 5px 0; margin: 2px 0; none;background-color: #fff;background-clip: padding-box;border: 1px solid #ccc;border: 1px solid rgba(0, 0, 0, .15);border-radius: 4px;-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);box-shadow: 0 6px 12px rgba(0, 0, 0, .175);}Verwenden Sie dann das Klickereignis, um das Entfernen und Zugabe der Tag -Klasse zu steuern, um Anzeige zu erreichen, und auszublenden
Fügen Sie über JS-Technologie den Klassennamen "Open" zum übergeordneten Container "div.Dropdown" hinzu oder entfernen Sie die Anzeige oder Versteck des Dropdown-Menüs. Das heißt standardmäßig,
"Div.Dropdown" hat den Klassennamen "Open" nicht. Wenn der Benutzer zum ersten Mal klickt, wird der Klassenname "geöffnet" dem Klassennamen "Open" hinzugefügt. Wenn der Benutzer erneut klickt, wird der Klassenname "Öffnen" im Container "Div.Dropdown" erneut entfernt. Wir können den gesamten Prozess durch den Firebug des Browsers anzeigen:
Standard:
Der Benutzer klickt zum ersten Mal:
Der Benutzer klickt erneut:
Offene CSS
.Open> .dropdown-menu {display: block;}Pull Down Menü geteilt
Schauen wir uns das obige Beispiel an und fügen Sie dann den Code ein! Schauen Sie sich den Effekt an, Sie müssen die JS -Datei noch vorstellen! Danach gibt es nicht viele Dinge!
<div> <button type = "button" id = "dropdownMenu1" data-toggle = "Dropdown"> Dropdown-Menü <Pan> </span> </button> <ul rollen = "Menü" aria-labelledby ROLLE = "Präsentation"> <a rollen = "Menuitem" tabindex = "-1" href = "#"> Dropdown-Menüelement </a> </li> <li rollen = "Präsentation"> <a rollen = "Menuitem" Tabindex = "-1" href = "#"> Drop-Down-Menüelement </a> <li> <li. tabindex = "-1" href = "#"> Dropdown-Menüelement </a> </li> </ul> </div>
Reproduktionsbild:
Eigentlich gibt es noch eine Codezeile
<li rollen = "Präsentation"> </li>
Dropdown-Menümenüentitel
Laden Sie den Code direkt hoch hoch
<Div> <button type = "button" id = "DropdownMenu1" data-toggle = "Dropdown"> Dropdown-Menü <Pan> </span> </button> <ul rollen = "Menü" aria-labelledby href="#">Dropdown Menu Item</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Dropdown Menu Item</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Drop down menu item</a></li><li role="presentation"></li><li role="presentation">Part 2 Menu Header</li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Drop down menu item</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Drop down menu Element </a> </li> <li rollen = "Präsentation"> <a rollen = "Menuitem" tabindex = "-1" href = "#"> Dropdown-Menüelement </a> </li> </ul> </div>
Reproduktionsbild:
Tatsächlich wird nur ein Code hinzugefügt:
<li rollen = "Präsentation"> Teil 2 Menüheader </li>
Pulldown-Menüausrichtung
<h4> Verwenden Sie die Pull-Light-Klasse, um das Dropdown-Menü mit der rechten Seite des übergeordneten Containers auszurichten.
Pulldown-Menü
<span> </span> </button> <ul rollen = "Menü" Aria-labelledBy = "DropdownMenu1"> <li rollen = "Präsentation"> <a rollen = "Menuitem" tabindex = "-1" href = "#"> Dropdown-Menüelemente </a> </li> <li rollen = "> <a rollen-tabindex"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#" | Item </a> </li> <li rollen = "Präsentation"> <a rollen = "Menuitem" tabindex = "-1" href = "#"> Dropdown-Menüelement </a> </li> <li rolle = "Präsentation"> <a rollen = "Menuitem" tabindex = "-1" href = "#"> drop down-Menüpunkt. ROLLE = "Präsentation"> <a rol = "Menuitem" tabindex = "-1" href = "#"> Dropdown-Menüelemente </a> </li> </ul> </div> <br/> <br/> <H4> Verwenden Sie die Dropdown-Menu-Rechtsklasse, um das Dropdown-Menü mit der rechten Seite des Parents-Contors-Schalttyps zu richten. id = "DropdownMenu1" data-toggle = "Dropdown">
Pulldown-Menü
<span> </span> </button> <ul rollen = "Menü" Aria-labelledBy = "DropdownMenu1"> <li rollen = "Präsentation"> <a rollen = "Menuitem" tabindex = "-1" href = "#"> Dropdown-Menüelemente </a> </li> <li rollen = "> <a rollen-tabindex"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#" | Item </a> </li> <li rollen = "Präsentation"> <a rollen = "Menuitem" tabindex = "-1" href = "#"> Dropdown-Menüelement </a> </li> <li rolle = "Präsentation"> <a rollen = "Menuitem" tabindex = "-1" href = "#"> drop down-Menüpunkt. rollen = "Präsentation"> <a rol = "Menuitem" tabindex = "-1" href = "#"> Dropdown-Menüelemente </a> </li> </ul> </div> <br/> <br/> <h4> Das Dropdown-Menü ist mit der linken Seite des Eltern-Containers </h4> <divMen style = "float:"> <button "button" button "button" button Data-Toggle = "Dropdown">
Pulldown-Menü
<span> </span> </button> <ul rollen = "Menü" Aria-labelledBy = "DropdownMenu1"> <li rollen = "Präsentation"> <a rollen = "Menuitem" tabindex = "-1" href = "#"> Dropdown-Menüelemente </a> </li> <li rollen = "> <a rollen-tabindex"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#" | Item </a> </li> <li rollen = "Präsentation"> <a rollen = "Menuitem" tabindex = "-1" href = "#"> Dropdown-Menüelement </a> </li> <li rolle = "Präsentation"> <a rollen = "Menuitem" tabindex = "-1" href = "#"> drop down-Menüpunkt. rollen = "Präsentation"> <a rollen = "Menuitem" tabindex = "-1" href = "#"> Dropdown-Menüelement </a> </li> </ul> </div>
Fügen Sie tatsächlich einen "Pull-Right "- oder" Dropdown-Menu-Rechts "-Klassnamen auf" Dropdown-Menu "hinzu, wobei der Stilcode von CSS
.dropdown-menu.pull-right {rechts: 0; links: auto;}. Dropdown-menu-right {rechts: 0; links: auto;}Pulldown-Menü (Menüpunktstatus)
Der Standardzustand des Dropdown-Menüelements (keine Einstellung) hat einen suspendierten Zustand (: Schwebe) und einen Fokuszustand (: Fokus)
Zusätzlich zu den beiden oben genannten Zuständen verfügen die Dropdown-Menüelemente auch über den aktuellen Status (.aktiv) und den deaktivierten Zustand (.Disabled).
<div> <button type = "button" id = "dropdownMenu1" data-toggle = "Dropdown"> Dropdown-Menü <Pan> </span> </button> <ul rollen = "Menü" aria-labelledby ROLLE = "Präsentation"> <a rollen = "Menuitem" tabindex = "-1" href = "#"> Dropdown-Menüelement </a> </li> <li rollen = "Präsentation"> <a rollen = "Menuitem" Tabindex = "-1" href = "#"> Drop-Down-Menüelement </a> <li> <li. tabindex = "-1" href = "#"> Dropdown-Menüelement </a> </li> </ul> </div>
Legen Sie die Maus darauf ein und ein verbotenes Schild wird auf dem deaktivierten angezeigt. Der Screenshot kann nicht eingefügt werden!
Tasten (Tastegruppe)
Die Verwendung einzelner Schaltflächen auf Webseiten entspricht manchmal nicht unseren Geschäftsanforderungen. Wir sehen oft mehrere Tasten zusammen, wie z. B. eine Reihe kleiner Symbolschaltflächen in einem reichen Texteditor.
<Div> <button type = "button"> <span> </span> </button> <button type = "button"> <spannung type = "button"> <span> </span> </button> <button> <button type = "button"> <span> </button> <button> <button type = "button"> <span> </span> </button> <button> <button type "button type = "button"> <span> </span> </button> <button type = "button"> <span> </span> </button> </div>
Reproduktionsbild:
Hier können Sie unterschiedliche Symboltasten entsprechend verschiedenen Symbolen generieren! Sie können es auf dieser Website anzeigen: http://getbootstrap.com/components/#glyphicons
Knöpfe (Schaltflächen -Symbolleiste)
In einem reichhaltigen Texteditor, Gruppenknopfgruppen zusammen, z. B. eine Gruppe kopieren, schneiden und einfügen; Linksausrichtung, Mittelausrichtung, Rechtsausrichtung und beenden eine Gruppe, wie in der folgenden Abbildung gezeigt:
Anschließend bietet die Taste -Symbolleiste der Bootstrap -Rahmen auch eine solche Erstellung. Sie müssen nur die Knopfgruppe "BTN-Gruppe" in Gruppen in einem großen Container "Btn-Toolbar" einfügen, wie unten gezeigt:
<Div> <div> <button type = "button"> <span> </span> </button> <button type = "button"> <span> </span> </button> <button type = "button"> <span> </span> </button> </div> <button <taste = "button type = "button"> <span> </span> </button> </div> <div> <button type = "button"> <span> </span> </button> </div> <div> <button type = "button"> <span> </span> </button> <button type="button"><span></span></button><button></button><button><button type="button"><span></span></button><button type="button"><span></span></button></div><div><button type="button"><span></span></button></div>
Reproduktionsbild:
Der zweite Satz von Symbolen in der Abbildung wird mit einer Klasse hinzugefügt:
BTN-Group-LG: große Knopfgruppe
BTN-Gruppen-SM: kleine Knopfgruppe
BTN-Group-XS: Ultra-Small-Knopfgruppe
Fügen Sie einfach den entsprechenden Klassennamen zum Klassennamen der ".BTN-Gruppe" hinzu, um Tastengruppen verschiedener Größen zu erhalten.
Knöpfe (verschachtelte Gruppierung)
Oft arrangieren wir häufig das Dropdown-Menü und die gewöhnlichen Knopfgruppen, um einen Effekt zu erzielen, der dem Navigationsmenü ähnelt.
Bei der Verwendung müssen Sie nur den Container ändern, der ursprünglich die "Dropdown" des Dropdown-Menüs in "BTN-Gruppen" erstellt und auf der gleichen Ebene wie die normale Taste platzieren.
<div><button type="button">Home</button><button type="button">Product Display</button><button type="button">Case Analysis</button><button type="button">Contact Us</button><div><button data-toggle="dropdown" type="button">About us<span></span></button><ul><li><a href="##">Company Profile</a></li><li><a href="##">Corporate Culture</a></li><li><a href="##">Organizational Structure</a></li><li><a href="##">Customer Service</a></li></ul></div></div>
Reproduktionsbild:
Tasten (vertikale Gruppierung)
In dem zuvor gesehenen Beispiel wird die Schaltflächengruppe horizontal angezeigt. Im tatsächlichen Gebrauch wird jedoch immer der vertikale Anzeigeeffekt angetroffen. Dieser Stil ist auch im Bootstrap -Framework bereitgestellt. Wir müssen nur den Namen "BTN-Gruppen" der horizontalen Gruppierung in "BTN-Gruppen-vertikal" ändern.
<div><button type="button">Home</button><button type="button">Product Display</button><button type="button">Case Analysis</button><button type="button">Contact Us</button><div><button data-toggle="dropdown" type="button">About us<span></span></button><ul><li><a href="##">Company Profile</a></li><li><a href="##">Corporate Culture</a></li><li><a href="##">Organizational Structure</a></li><li><a href="##">Customer Service</a></li></ul></div></div>
Reproduktionsbild:
Taste (gleiche Schaltfläche)
Der Effekt der gleichberechtigten Segment -Taste ist besonders praktisch auf mobilen Terminals. Die gesamte Knopfgruppenbreite beträgt 100% des Containers, und jede Taste in der Knopfgruppe unterteilt die gesamte Containerbreite. Wenn Sie beispielsweise fünf Schaltflächen in einer Knopfgruppe haben, ist jede Taste 20% Breite, wenn es vier Tasten gibt, ist jede Taste 25% Breite und so weiter.
Die Equalization -Taste wird auch häufig als adaptive Gruppierungs -Taste bezeichnet. Die Implementierungsmethode ist ebenfalls sehr einfach. Sie müssen der unten gezeigten Schaltfläche "Btn-Gruppe" nur einen "BTN-Gruppen-zu-Gereinigungs-Namen" -Kassame hinzufügen:
<div> <div> <a href = "#"> home </a> <a href = "#"> Produktanzeige </a> <a href = "#"> Fallanalyse </a> <a href = "#"> Kontaktieren Sie uns </a> </div> </div>
Ändern Sie die Breite des Bildschirms
Sonderaussage: Wenn Sie die Aliquot -Schaltflächengruppe erstellen, versuchen Sie bitte das <a> Tag -Element, um Schaltflächen zu erstellen. Wenn Sie das <tasten -Tag -Tag -Element verwenden, ist die Tabelle nicht freundlich, um es in einigen Browsern zu unterstützen.
Das Abwärtsdreieck nach oben des Knopfes
Das Abwärtsdreieck der Taste fügen wir dem Etikett ein "Label -Element" hinzu und nennen es "Caret":
Manchmal wird unser Dropdown-Menü angezeigt (im nächsten Abschnitt wird es vorgestellt). Zu diesem Zeitpunkt muss unsere Dreieck -Richtung nach oben angezeigt werden. Implementierungsmethode: Sie müssen den Namen "Dropup" zur Klasse ".BTN-Gruppen" hinzufügen (dies ist auch der Klassenname, der für das Drop-up-Menü nach oben verwendet wird).
<Div> <button data-toggle = "Dropdown" type = "button"> Taste Dropdown-Menü <Pan> </span> </button> <ul> <li> <a href = "##"> Taste Dropdown-Menüpunkt </a> </li> <li> <a href = "##"> Taste Drop-Down-Menü-Menü-Menü-Menüpunkt. Artikel </a> </li> </ul> </div>
Reproduktionsbild:
Navigation (Grundstil)
Die Navigation ist kein Fremder für eine Front-End-Person. Es kann gesagt werden, dass die Navigation eines der wichtigsten Elemente einer Website ist, mit der Benutzer die verschiedenen von der Website bereitgestellten Funktionsdienste finden können. Die Navigationsmethode ist auch sehr vielfältig und vielfältig.
Die Navigationsstangen werden hauptsächlich im Bootstrap -Framework über den ".nav" -Stil hergestellt. Der Standard -Stil ".nav" bietet nicht den Standardnavigationsstil. Ein anderer Stil muss an ihn verbunden sein, um effektiv zu sein, z. B. "NAV-TABs", "Nav-Pills" usw. Zum Beispiel gibt es in der rechten Seite ein Beispiel für eine Tab-Navigationsleiste im Code-Editor. Seine Implementierungsmethode besteht darin, dem UL-Tag.nav und Nav-Tabs zwei Klassenstile hinzuzufügen.
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> css3 </a> </li> <li> <a href = "##"> sass </a> </li> <a href = ## " href = "##"> Reaktionsschnur </a> </li> </ul>
Navigation (Tag-förmige Tab-Navigation)
Tag-förmige Navigation, auch als Tab Navigation bezeichnet. Insbesondere wenn viele Inhalte in Stücken angezeigt werden, ist es sehr geeignet, diese Registerkarte zu verwenden, um sie zu gruppieren.
Die Tag-förmige Navigation wird über den "Nav-Tabs" -Stil implementiert. Beim Erstellen von Tag-förmigen Navigation müssen Sie diese Art von Namen zur ursprünglichen Navigation "NAV" hinzufügen
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> css3 </a> </li> <li> <a href = "##"> sass </a> </li> <a href = ## " href = "##"> Reaktionsschnur </a> </li> </ul>
Tatsächlich stimmt der Effekt des obigen Beispiels nicht mit den Registerkarten -Effekten überein, die wir normalerweise sehen. Im Allgemeinen lehrt die Registerkarte eine aktuelle Auswahl. Tatsächlich wird das Bootstrap -Framework entsprechend ebenfalls bereitgestellt. Angenommen, wir möchten, dass das "Home" -Punkt das aktuell ausgewählte Element ist. Fügen Sie einfach den Klassennamen "class =" active "" zu seinem Tag hinzu.
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> css3 </a> </li> <li> <a href = "##"> sass </a> </li> <a href = ## " href = "##"> Reaktionsschnur </a> </li> </ul>
Reproduktionsbild:
Zusätzlich zum aktuellen Element haben einige Registerkarten auch einen behinderten Zustand. Um diesen Effekt zu erzielen, müssen Sie dem Tag -Element nur "class =" deaktiviert "hinzufügen:
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> css3 </a> </li> <li> <a href = "##"> sass </a> </li> <a href = ## " href = "##"> Reaktionsschnur </a> </li> </ul>
Reproduktionsbild:
Navigation (Pillen) Navigation)
Die Navigation der Kapselform (Pillen) klingt etwas umständlich, weil sie ein bisschen wie eine Kapselform aussieht. Aber es ist eher der Massennavigation, die wir normalerweise sehen. Der aktuelle Element wird mit einem abgerundeten Eckeffekt hervorgehoben. Die Implementierungsmethode ähnelt "nav-tabs". Mit der gleichen Struktur müssen Sie den Klassennamen "Nav-Tabs" nur durch "Nav-Pills" ersetzen:
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> css3 </a> </li> <li> <a href = "##"> sass </a> </li> <a href = ## " href = "##"> Reaktionsschnur </a> </li> </ul>
Reproduktionsbild:
Das gleiche wie oben erwähnt!
Navigation (vertikal gestapelte Navigation)
In der tatsächlichen Verwendung gibt es zusätzlich zur horizontalen Navigation auch die vertikale Navigation, genau wie die zuvor eingeführten vertikalen Anordnungstasten. Die vertikale Stack-Navigation erfordert nur das Hinzufügen eines "Nav-gestapelten" Klassennamens basierend auf "Nav-Pills"
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> css3 </a> </li> <li> <a href = "##"> sass </a> </li> <a href = ## " href = "##"> Reaktionsschnur </a> </li> </ul>
Reproduktionsbild:
Im Abschnitt "Dropdown-Menü" befindet sich ein Teiler zwischen der Dropdown-Menügruppe und der Gruppe. Tatsächlich hat die vertikale Stapelnavigation auch diesen Effekt, Sie müssen nur hinzufügen. "
" Nur:
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> css3 </a> </li> <li> <a href = "##"> sass </a> </li> <a href = ## " href = "##"> Reaktionsschnur </a> </li> </ul>
Reproduktionsbild:
Adaptive Navigation (Verwendung)
Die adaptive Navigation bezieht sich auf die Navigation, die die gesamte Breite des Behälters einnimmt, und die Menüelemente können sich an die Breite wie die Zellen einer Tabelle anpassen. Die adaptive Navigation entspricht der adaptiven Knopfgruppe, die mit "BTN-Gruppen-zu-zu-Gereinungswesen" hergestellt wurde. Es ist nur so, dass bei der adaptiven Navigation ein weiterer Klassenname "navigifiziert" wird. Natürlich muss er mit "Nav-Tabs" oder "Nav-Pills" verwendet werden. wie:
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> css3 </a> </li> <li> <a href = "##"> sass </a> </li> <a href = ## " href = "##"> Reaktionsschnur </a> </li> </ul>
Reproduktionsbild:
Dies ist ein anderer Bildschirm
Navigation Plus Pulldown-Menü (Sekundärnavigation)
In den vorherigen Beispielen geht es darum, das Bootstrap-Framework zu verwenden, um Navigation der ersten Ebene zu erstellen. In vielen Fällen ist die Auswirkung der Navigation der zweiten Ebene jedoch von der Webseite untrennbar miteinander verbunden. Dann ist es einfacher, die sekundäre Navigation im Bootstrap -Framework zu erstellen. Behandle li einfach als den übergeordneten Container, benutze den Klassennamen "Dropdown" und nistete eine andere Liste UL in Li, und verwende die im vorherige Dropdown-Menü eingeführte Methode:
<ul><li><a href="##">Home</a></li><li><a href="##" data-toggle="dropdown">Tutorial<span></span></a><ul><li><a href="##">CSS3</a></li><li><a href="##">Sass</a></li><li><a href="##">jQuery</a></li><li><a href="##">Responsive</a></li></li><li><a href="##">About Us</a></li></ul>
Reproduktionsbild:
Durch das Browser -Debugging -Tool ist es nicht schwierig zu ermitteln, dass durch Klicken auf den Menüelement mit sekundärer Navigation der Klassenname "Öffnen" automatisch hinzugefügt wird. Wenn Sie erneut klicken, löschen Sie den hinzugefügten "Öffnen" -Kassame und das Implementierungsprinzip des Dropdown-Menüs ist gleich!
Wenn Sie dann die Trennlinie in der Sekundärnavigation verwenden, müssen Sie nur ein leeres Tag wie "<li class =" nav-divider "> </li>" hinzufügen.
Breadcrumb Navigation
Breadcrumbs werden im Allgemeinen für die Navigation verwendet, und ihre Hauptfunktion besteht darin, dem Benutzer den aktuellen Ort der Seite (aktueller Ort) mitzuteilen,
<ol> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> Mein Buch </a> </li> <li> "Illustrated CSS3" </li> </ol>
Reproduktionsbild: