當(dāng)前位置：首頁(yè) > 前端技术 > CSS >内容正文

CSS

CSS图片廊实例详解

發(fā)布時(shí)間：2025/4/14 CSS 36 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS图片廊实例详解小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

效果：

<!DOCTYPE html> <html> <head> <style> 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 target="_blank" href="klematis_big.htm"><img src="images/tu1.jpg" alt="Klematis" width="110" height="90"></a><div class="desc">我是小黑兔，我愛(ài)吃胡蘿卜</div> </div><div class="img"><a target="_blank" href="klematis2_big.htm"><img src="images/tu2.jpg" alt="Klematis" width="110" height="90"></a><div class="desc">我是小灰兔，我愛(ài)吃胡蘿卜</div> </div><div class="img"><a target="_blank" href="klematis3_big.htm"><img src="images/tu3.jpg" alt="Klematis" width="110" height="90"></a><div class="desc">我是小黃兔，我愛(ài)吃胡蘿卜</div> </div><div class="img"><a target="_blank" href="klematis4_big.htm"><img src="images/tu4.jpg" alt="Klematis" width="110" height="90"></a><div class="desc">我是小花兔，我愛(ài)吃胡蘿卜</div> </div></body> </html>

代碼解釋：

CSS圖片廊，每顯示一個(gè)圖片用2層div；外層的css類(lèi)為img,包含一個(gè)<a>標(biāo)簽，在<a>標(biāo)簽中的<img>標(biāo)簽設(shè)置圖像路徑，alt屬性是鼠標(biāo)移上顯示的提示；內(nèi)層div顯示圖像描述，其css類(lèi)是desc；

div.img, .是css類(lèi)選擇器，定義"img"類(lèi)的屬性：
外邊距：2px;
邊框：1px，實(shí)線(xiàn)，顏色；
高度：自動(dòng)；
寬度：自動(dòng)；
向左浮動(dòng)；
文本中間對(duì)齊；

div.img （img標(biāo)簽為行內(nèi)元素）
行內(nèi)元素；自己的獨(dú)立空間，它是依附于其他塊級(jí)元素存在的，因此，對(duì)行內(nèi)元素設(shè)置高度、寬度、內(nèi)外邊距等屬性，都是無(wú)效的；
外邊距：3px;
邊框：1px, 實(shí)線(xiàn)，顏色；

div.desc
文本對(duì)齊：中間對(duì)齊
字體粗細(xì)：正常
寬度：120px
外邊距：2px

div.img a:hover img {border: 1px solid #0000ff;}
鼠標(biāo)懸停時(shí)img邊框和顏色改變

總結(jié)

以上是生活随笔為你收集整理的CSS图片廊实例详解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： CSS导航栏实例详解
下一篇： Java Web的Struts2的多语种