HTML5 CSS3 erstellt Fotoalbum-Effekt mit Quellcode-Download_html5-Tutorial-Fähigkeiten

Ich habe heute zufällig ein solches Beispiel auf meinem Computer gefunden. Ich kann mich nicht erinnern, wann ich es heruntergeladen habe Rezeption, also möchte ich es mit Ihnen teilen.

Rendering:


Ist der Effekt nicht immer noch sehr gut? Das Wichtigste ist, dass keine js-Zeile verwendet wird.

Sehen Sie sich zuerst die HTML-Datei an:

Kurze Beschreibung:

1. li in ul bestimmt die Anzahl der Fotos

2 Verwenden Sie den Stil float: right, width: 140px; um ihn im rechten Bereich des Albums anzuzeigen

3. Der float von li: left, damit li nach links schweben kann; großes Bild wird in li gespeichert, die Position ist absolut basierend auf p#gallary, standardmäßig wird nur das erste angezeigt

4. Wenn sich die Maus über li bewegt, ändern Sie die Transparenz von li span img und die Anzeige von li p, um das große Bild anzuzeigen

Als nächstes kommt die CSS-Datei:

Der Code lautet wie folgt:

Es gibt keine komplizierten Stile in CSS, daher werde ich es nicht beschreiben. Darüber hinaus habe ich im HTML ein Reset-Stil-CSS eingeführt, reset.css. Sie können auch den Reset-Stil verwenden, den Sie gewohnt sind:

Der Code lautet wie folgt:

html, body, p, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend{ 
margin: 0; 
padding: 0; 
font-size: 100%; 
border: 0; 
outline: 0; 
background: transparent; 
} 
ol, ul { 
list-style: none; 
} 
blockquote, q { 
quotes: none; 
} 
:focus { 
outline: 0; 
} 
table { 
border-collapse: collapse; 
border-spacing: 0; 
}