CSS 圖片廊LOGIN

CSS 圖片廊

使用CSS建立圖片廊:

#顯示如下

1002.jpg1003.jpg1004.jpg1005.jpg

#
<!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, 實線,顏色;




### div.desc############文字對齊:中間對齊###字體粗細:正常###寬度:120px###外邊距:2px##########div .img a:hover img {border: 1px solid #0000ff;}############滑鼠懸停時img邊框和顏色改變################################################################################# #############下一節
<!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>
章節課件