Galerie d'images CSS
Créer une galerie d'images en utilisant CSS :
est présenté ci-dessous
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style type="text/css">
div.img
{
margin: 2px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;
}
div.img img
{
display: inline;
margin: 3px;
border: 1px solid #ffffff;
}
div.img a:hover img {border: 1px solid #0000ff;}
div.desc
{
text-align: center;
font-weight: normal;
width: 120px;
margin: 2px;
}
</style>
</head>
<body>
<div class="img">
<a href="#"><img src="http://img.php.cn/upload/image/837/831/318/1476339949246926.jpg"
alt="Klematis" width="110" height="90"></a>
<div class="desc">1</div>
</div>
<div class="img">
<a href="#"><img src="http://img.php.cn/upload/image/153/383/263/1476339955769441.jpg"
alt="Klematis" width="110" height="90"></a>
<div class="desc">2</div>
</div>
<div class="img">
<a href="#"><img src="http://img.php.cn/upload/image/815/625/584/1476339961304990.jpg"
alt="Klematis" width="110" height="90"></a>
<div class="desc">3</div>
</div>
<div class="img">
<a href="#"><img src="http://img.php.cn/upload/image/870/504/597/1476339972616793.jpg"
alt="Klematis" width="110" height="90"></a>
<div class="desc">4</div>
</div>
</body>
</html>Explication du code :
Galerie d'images CSS, utilisez 2 couches de div pour afficher chaque image ; la classe CSS externe est img, y compris une balise <a> ;a> ; La balise <img> dans la balise définit le chemin de l'image, et l'attribut alt est l'invite affichée lorsque la souris est déplacée ; le div interne affiche la description de l'image, et sa classe CSS est desc;
div.img, . est le sélecteur de classe CSS, définissant les attributs de la classe "img" :
Marge : 2px ;
Bordure : 1px, ligne continue, couleur
Hauteur : automatique ;
Largeur : automatique ;
Flottant à gauche ;
texte aligné au centre ;
div.img (la balise img est un élément en ligne)
élément en ligne ; existe attaché à d'autres éléments au niveau du bloc, donc pour définir des attributs tels que la hauteur, la largeur, les marges intérieures et extérieures pour les éléments en ligne, ce n'est pas valide
Marge : 3px
Bordure : 1px, ligne continue, couleur ; >
Alignement du texte : Alignement central
Largeur : 120 px
Marges : 2 px
La bordure img et la couleur changent lorsque la souris est survolée
