HTML5 CSS3 mencipta kesan album foto dengan kemahiran tutorial download_html5 kod sumber

Saya secara tidak sengaja menemui contoh seperti itu di komputer saya hari ini. Saya rasa kesannya agak baik Saya tidak ingat apabila saya memuat turunnya untuk masa yang lama meja depan, jadi saya ingin berkongsi dengan anda.

Rendering:


Bukankah kesannya masih sangat bagus? Perkara yang paling penting ialah tiada baris js digunakan.

Lihat fail html dahulu:

Penerangan ringkas:

1 li dalam ul menentukan bilangan foto

2 Gunakan apungan gaya: kanan, lebar: 140px; untuk memaparkannya di kawasan kanan album

3. Apungan li: kiri, supaya li boleh terapung ke kiri; imej besar disimpan dalam li, kedudukan adalah mutlak Kedudukan berdasarkan p#gallary, secara lalai hanya yang pertama dipaparkan

4. Apabila tetikus bergerak ke atas li, tukar ketelusan li span img dan paparan li p untuk memaparkan imej besar

Seterusnya ialah fail css:

Kodnya adalah seperti berikut:

Tiada yang rumit gaya dalam css, jadi saya tidak akan menerangkannya. Selain itu, saya memperkenalkan gaya tetapan semula css, reset.css, dalam html Anda juga boleh menggunakan gaya tetapan semula yang anda gunakan untuk:

Kodnya adalah seperti berikut:

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; 
}