HTML5 CSS3 creates photo album effect with source code download_html5 tutorial skills

I accidentally found such an example on my computer today. I think the effect is quite good. I don’t remember when I downloaded it. I haven’t used w3cfuns for a long time. I miss the days of learning the front desk, so I would like to share it with you.

Rendering:


Isn’t the effect still very good? The most important thing is that no line of js is used. This is the highlight.

Look at the html file first:

Brief description:

1. li in ul determines the number of photos

2. ul Use the style float: right, width: 140px; to display it in the right area of ​​the album

3. The float of li: left, so that li can float left; if the p of the large image is stored in li, the position is absolute. Positioning based on p#gallary, by default only the first one is displayed

4. When the mouse moves over li, change the transparency of li span img and the display of li p to display the large image

Next is the css file:

The code is as follows:

There are no complicated styles in css, so I won’t describe it. In addition, I introduced a reset style css, reset.css, in the html. You can also use the reset style you are used to:

The code is as follows:

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