Galeri Imej CSS
Buat galeri imej menggunakan CSS:
ditunjukkan di bawah
<!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>Penjelasan kod:
Galeri gambar CSS, gunakan 2 lapisan div untuk memaparkan setiap gambar kelas css luar ialah img, termasuk teg <a> ;a> ; Teg <img> dalam teg menetapkan laluan imej, dan atribut alt ialah gesaan yang dipaparkan apabila div dalam memaparkan perihalan imej, dan kelas cssnya ialah
div.img, . ialah Pemilih kelas css, mentakrifkan atribut kelas "img":
Margin: 2px;
Lebar: automatik;
Terapung Kiri;
teks sejajar tengah;
div.img (teg img ialah elemen sebaris)
ruang bebasnya sendiri; wujud yang dilampirkan pada elemen peringkat blok lain, jadi untuk menetapkan atribut seperti tinggi, lebar, jidar dalam dan luar untuk elemen sebaris adalah tidak sah; >
div.desc
Penjajaran Teks: Penjajaran TengahBerat Fon: NormalLebar: 120px
Jing: 2px
div .img a:hover img {sempadan: 1px pepejal #0000ff;}
Sempadan img dan warna berubah apabila tetikus dilegar
- Cadangan kursus
- Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~ 