div css (ul li) realisiert das Listenlayout des Textes über dem Bild

CSS-Stylesheet-Code:

HTML-Layoutcode:

Rendering:

Im HTML-Layoutteil können Sie das entsprechende Div entsprechend Ihren Anforderungen hinzufügen.

1. Erklärung der CSS-Schlüsselwörter

1), ul.imglist{ margin:0 auto; width:536px; overflow:hidden🎜>Verwenden Sie margin:0 auto, um das ul-Strukturlayout zu zentrieren;
Verwenden Sie overflow:hidden als Unterabschnitt von ul Die Verwendung des Float-Attributs auf der Ebene führt zu einem Floating. Wenn Sie also die untergeordnete Ebene löschen und verwenden, kann die übergeordnete Ebene nicht geöffnet werden.
Die Verwendung einer festen Breite ermöglicht es der untergeordneten Ebene Nur 3 Effekte genau aneinanderreihen

2), ul.imglist li{ float:left; padding:4px 8px; float:left, lass li von links beginnen;

padding:4px 8px setze li und li Boxenabstand zwischen;
width:160px Die Li-Breite muss eingestellt und fixiert werden (der Breitenwert wird mit dem Slicing-Tool der PS-Software gemessen)

3), ul.imglist li img{ display:block; width:90px;display:block legt eine exklusive Zeile für das Bild fest;

width:160px; fest eingestellte Bildhöhenbreite

4), ul.imglist li span{ display:block; width:100%; line-height:30px; background:#F6F6F6🎜>macht span set width und height exklusiv Einzeiliger Effekt;
width:100%; height:30px; Breite 100% erbt die Breite des übergeordneten Elements (Breite 160px). Der Vorteil der Einstellung 100% Breite besteht darin wird automatisch mit der übergeordneten Breite berechnet. Die Breite stimmt mit der übergeordneten Breite überein.

line-height:30px; Stellen Sie den Text so ein, dass er vertikal in 30px zentriert ist

2. Wichtige Punkte von HTML
Verwenden Sie das ul-li-Kombinationslisten-Tag-Layout. Jedes li-Feld enthält den Bildtext-Titelinhalt und verwendet das img Tag, um das Bild einzuführen, verwenden Sie das span-Tag und img, um zwei Felder zu bilden, und verwenden Sie CSS, um den Stil (display:block) einer exklusiven Reihe funktionaler Effekte festzulegen, um zu vermeiden, dass Text und Bilder in einer Reihe statt a angeordnet werden Top-Down-Struktur.