Erstellen von Listen - Learn to-Code HTML - CSS
- Lektion 1 Bauen Sie Ihre erste Web-Seite
- Lektion 2 Erste HTML-Kenntnisse
- Lektion 3 Erste CSS Neu wissen
- Lektion 4 Öffnen der Box-Modell
- Lektion 5 Positionierung Inhalt Neue
- Lektion 6 Arbeiten mit Typografie
- Lektion 7 Einstellung Backgrounds - Gradients
- Lektion 8 Erstellen von Listen
- Lektion 9 Hinzufügen von Medien
- Lektion 10 Gebäudearten
- Lektion 11 Organisieren von Daten mit Tabellen
- Lektion 12 Schreiben Your Best-Code
Learn to-Code HTML - CSS wird von Designer geschrieben - Front-End-Entwickler Shay Howe.
Kasse Learn to-Code Advanced HTML - CSS für einen tieferen Blick auf Front-End-Design - Entwicklung.
Möchten Sie mehr HTML lernen - CSS oder studieren andere Themen? Finden Sie den richtigen Kurs für Sie.
In dieser Lektion 8
Listen sind ein Bestandteil des täglichen Lebens. To-do-Listen bestimmen, was getan. Navigationsrouten bieten Turn-by-Turn-Listen Richtungen. Rezepte bieten Zutatenlisten und Listen von Anweisungen. Mit einer Liste für fast alles, ist es leicht zu verstehen, warum sie auch sehr beliebt online ist.
ungeordnete Listen
Ungeordnete Listen Demo
Stenografie Liste Style-Eigenschaft
Die Liste Stil Eigenschaften diskutiert bisher, list-style-type und list-style-position. kann in eine Kurzschreibweise list-style-Eigenschaftswert kombiniert werden. Wenn die Liste-Stil verwenden, können wir einen oder alle Listenstil Eigenschaftswerte zu einem Zeitpunkt verwenden. Die Reihenfolge dieser Kurzschrift-Werte sollten list-style-type von list-style-Position gefolgt sein.
Horizontal angezeigte Liste
angezeigte Liste
Der schnellste Weg, um eine Liste in einer einzigen Zeile angezeigt werden ist das geben,
Inline-Block-Anzeige Liste Demo
Schwimmdock Liste
Schwimmdock Liste Demo
Wie bei jedem beliebigen Elemente schwebend, bricht diese den Fluss von der Seite. Wir müssen daran denken, unseren Schwimmer am weitesten klar häufig im Zusammenhang mit dem clearfix Technik-und Rück der Seite zurück zu seinem normalen Fluss.
Navigationsliste Beispiel
Navigationsliste Demo
In der Praxis
Derzeit werden die Navigationsmenüs innerhalb der
Unter Verwendung einer ungeordneten Liste (über die
- Element) und Listenelemente (über die
- Element) wird Struktur unserer Navigationsmenüs geben. Diese neuen Elemente aber werden unsere Navigationsmenüs vertikal angezeigt werden soll.
Lassen Sie sich diese Änderungen nicht in allen unseren HTML-Dateien vergessen zu.
Mit der ungeordnete Liste an Ort und Stelle, lassen Sie uns sicherstellen, dass die Listenelemente horizontal ausrichten, und lassen Sie uns ihre Stile ein wenig aufzuräumen. Wir werden die bestehenden nav Klasse verwenden, um unsere neuen Modelle zu helfen Ziel.
Im Rahmen unserer main.css Datei, um unterhalb unserer Navigation Stile bestehenden, lassen Sie uns die folgende CSS hinzufügen:
Unsere Navigationsmenüs sind nicht die einzigen Orte, die wir Listen verwenden werden. Wir werden sie auch auf einige unserer internen Seiten verwenden, einschließlich der Lautsprecher Seite. Lassen Sie uns einige Redner zu unserer Konferenz hinzuzufügen.
Im Rahmen unserer speakers.html Datei direkt unter unserem Leitabschnitt, werfen sich einen neuen Abschnitt schaffen, in dem wir alle unsere Referenten präsentieren würden. Wiederverwenden einige bestehende Designs, werden wir ein verwenden
Element mit einem Klassenattributwert Zeile alle unsere Lautsprecher zu wickeln und einen weißen Hintergrund und Polsterung hinter ihnen gelten. Im Innern des Element, dann fügen wir ein Element mit einem Klassenattributwert von Gittern unserer Lautsprecher auf der Seite zu zentrieren und es uns ermöglichen, so dass mehrere Spalten zu tun zu verwenden.Bisher haben sich unsere HTML unter dem Leitabschnitt sieht wie folgt aus:
Mit unseren bestehenden col-2-3 und col-1-3 Klassen, den Entwurf für einen Lautsprecherabschnitt wird wie folgt aussehen:
Es gibt ein paar Dinge hier zu bemerken. Zunächst wird jeder
Element für jeden Lautsprecher enthält ein ID-Attribut mit dem Namen des Sprechers als Attributwert. Später, als wir den Zeitplan für unsere Konferenz erstellen, werden diese ID-Attribute als Anker dienen, so dass uns aus dem Zeitplan zu einem Lautsprecher Profil verknüpfen. Einschließlich dieser Inhalte wird ein Lautsprecherabschnitt wie folgt aussehen:
Bevor sie in irgendwelche Arten, aber lassen Sie sich eine ungeordnete Liste innerhalb der hinzufügen
Element, das als Listenelemente einige relevante Links für den Lautsprecher enthält.Jetzt ist unser HTML für einen Lautsprecher wird wie folgt aussehen:
Mit dem
Element mit einem Klassenattributwert von Lautsprecher-info bereit, können wir einige Arten, um es hinzuzufügen.Wir werden beginnen, indem Sie einen neuen Abschnitt in unserer main.css-Datei für die Lautsprecher Seitenvorlagen hinzufügen. Von dort lassen Sie sich mit einem 5-Pixel-Radius um jedes Element einen 1-Pixel-festen grauen Rand hinzufügen, die die Klasse Attributwert von Lautsprecher-info enthält.
Schließlich wollen wir innerhalb des Elements den gesamten Text zentrieren.
Insgesamt sieht unsere CSS für den Lautsprecher-info Klasse Regelsatz wie folgt aus:
Lassen Sie sich eine Minute dauern, zu überprüfen, warum wir eine verwenden
Element hier und die entsprechenden Stile.Wir setzen ein
Element innerhalb der