DivCSS-Beispiel-Tutorial: CSS-Liste gemischter Grafiken und Texte mit oberer und unterer Struktur

Heute lernen wir gemeinsam, wie man eine häufig verwendete „CSS-Liste mit gemischten Grafiken und Texten“ erstellt. Analysieren Sie zunächst die Merkmale dieser Liste, schreiben Sie dann HTML-Code und wenden Sie schließlich CSS-Stile an, um den endgültigen Effekt zu erzielen.

Die Wirkung dieses Beispiels:


Autor dieses Artikels: 52CSS.com Li Xiang Wenn Sie ihn erneut drucken möchten, erstellen Sie bitte einen Link zu dieser Website (http://www.52css.com/). Sie dürfen den Inhalt des Artikels nicht nach Belieben ändern , und behalten Sie den Text dieser Urheberrechtserklärung bei!
Oben ist der Name der Spalte, die ich liebe, 52css und mehr, und dann ist der untere in zwei Blöcke unterteilt, einer zeigt Miniaturbilder und der andere zeigt Textlinks an, die beide über ul+li erreicht werden können. Starten Sie mit der obigen Analyse die folgende HTML-Codierung:


Fügen Sie alle Elemente mit ID-Umbruch in die Ebene ein und stellen Sie die Rahmenfarbe auf #e5f2f8 ein, damit es so aussieht, als hätte es einen Schatteneffekt.
Erstellen Sie dann eine Ebenenliste darin und drei Ebenen innerhalb der Liste, nämlich:


Beginnen wir mit dem detaillierten Schreiben von HTML-Code:


Schweben Sie h3 nach links in der Ebene „list_title“, um den Titel zu erstellen, schweben Sie nach rechts, um weitere Verbindungen herzustellen, und erstellen Sie ul+li-Bilder nach links schwebend in der Ebene „list_pic“.
Erstellen Sie ul+li in der Ebene list_text, um eine Nachrichtenliste zu erstellen.
Platzieren Sie ganz unten eine Ebene mit der Klasse „clear“, um die Floats zu löschen.

Beginnen Sie mit der oben genannten Grundlage mit der folgenden CSS-Codierung:
Gesamtaussage:

Legen Sie den Stil des gesamten Ebenenumbruchs fest, die Breite beträgt 450 Pixel, der obere und untere Rand sind 30 Pixel, die linke und rechte Seite sind horizontal ausgerichtet und der Rand ist auf Blau eingestellt (hier, um den Schatteneffekt zu erhöhen).


Stildefinition des Titelteils list_title:
Stellen Sie die Breite auf 426 Pixel, den oberen und unteren Abstand auf 0 und den linken und rechten Rand auf 10 Pixel ein
Der Spaltenname h3-Element schwebt nach links; die Breite beträgt 300 Pixel;
Stellen Sie das Span-Element so ein, dass es mit einer Breite von 60 Pixel nach rechts schwebt. Richten Sie den Text rechts aus und legen Sie den Link fest


Stildefinition der Bildebene list_pic:
Verwenden Sie zunächst die UL-Liste und stellen Sie die Breite auf 433 Pixel ein.
Was Aufmerksamkeit erfordert, ist die Einstellung von padding: padding:15px 0 0 15px;
(Der Grund, warum der rechte Innenrand auf 0 gesetzt ist, liegt im Abstandsproblem von li, das die Leistung der Seite verbessert. Sie können ihn auch auf Folgendes einstellen: Polsterung: 15px 15px 0 15px; Kontrasteffekt)
li setzt die Größe des Bildblocks auf 94 Pixel und den Abstandsrand: 0 14 Pixel 0 0;
Die Randfarbe des Bildes ändert sich von Blau zu Grau, wenn die Maus darüber schwebt;

Linktextstil festlegen,
Spanne in Blockelement umwandeln. Die Links innerhalb der Spanne werden ebenfalls in Blockelemente umgewandelt, und die Breite und Höhe werden auf 94 Pixel bzw. 20 Pixel eingestellt und der Text wird horizontal und mittig ausgerichtet.


Stildefinition der Textebene list_text:
Definieren Sie die Nachrichtenliste über ul + li. Beachten Sie, dass die Zeitspanne nach rechts verschoben wird und der Text mit einer blauen gepunkteten Linie rechts am oberen Rand geschrieben wird und der obere Rand auf 10 Pixel eingestellt ist.


Zum Schluss löschen Sie den Float: .clear{ clear:both;}