CSS 圖片廊
使用CSS建立圖片廊：
#顯示如下
#
<!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>
rrreee
##程式碼解釋：
CSS圖片廊，每顯示一個圖片用2層div；外層的css類別為img,包含一個<a>標籤，在<a> ;標籤中的<img>標籤設定影像路徑，alt屬性是滑鼠移上顯示的提示；內層div顯示影像描述，其css類別是desc;
div.img, .是css類選擇器，定義"img"類別的屬性：
外邊距：2px;
邊框：1px，實線，顏色；
高度：自動；
向左浮動；文字中間對齊；
div.img （img標籤為行內元素）
外邊距：3px;
邊框：1px, 實線，顏色；
<!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="https://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="https://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="https://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="https://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>
