HTML5 CSS3 crée un effet d'album photo avec les compétences du didacticiel download_html5 du code source

J'ai accidentellement trouvé un tel exemple sur mon ordinateur aujourd'hui. Je pense que l'effet est plutôt bon. Je ne me souviens pas quand je l'ai téléchargé, je n'ai pas utilisé w3cfuns depuis longtemps. réception, j'aimerais donc le partager avec vous.

Rendu :


L'effet n'est-il pas toujours très bon ? Le plus important est qu'aucune ligne de js n'est utilisée. C'est le point culminant.

Regardez d'abord le fichier html :

Brève description :

1 li en ul détermine le nombre de photos

2. Utilisez le style float: right, width: 140px; pour l'afficher dans la zone droite de l'album

3. Le float de li: left, pour que li puisse flotter à gauche si le p du ; la grande image est stockée dans li, la position est absolue. Positionnement basé sur p#gallary, par défaut seule la première est affichée

4. Lorsque la souris passe sur li, changez la transparence de li span img et l'affichage de lip pour afficher la grande image

Ensuite vient le fichier css :

Le code est le suivant :

Il n'y a pas de compliqué styles en CSS, donc je ne le décrirai pas. De plus, j'ai introduit un style de réinitialisation css, reset.css, dans le html. Vous pouvez également utiliser le style de réinitialisation auquel vous êtes habitué :

Le code est le suivant :

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