CSS图片廊实例详解
生活随笔
收集整理的這篇文章主要介紹了
CSS图片廊实例详解
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
效果：
代碼解釋：
CSS圖片廊，每顯示一個圖片用2層div；外層的css類為img,包含一個<a>標(biāo)簽，在<a>標(biāo)簽中的<img>標(biāo)簽設(shè)置圖像路徑，alt屬性是鼠標(biāo)移上顯示的提示；內(nèi)層div顯示圖像描述，其css類是desc；
div.img, .是css類選擇器，定義"img"類的屬性：
外邊距：2px;
邊框：1px，實線，顏色；
高度：自動；
寬度：自動；
向左浮動；
文本中間對齊；
div.img （img標(biāo)簽為行內(nèi)元素）
行內(nèi)元素； 自己的獨立空間，它是依附于其他塊級元素存在的，因此，對行內(nèi)元素設(shè)置高度、寬度、內(nèi)外邊距等屬性，都是無效的；
外邊距：3px;
邊框：1px, 實線，顏色；
文本對齊：中間對齊
字體粗細(xì)：正常
寬度：120px
外邊距：2px
div.img a:hover img {border: 1px solid #0000ff;}
鼠標(biāo)懸停時img邊框和顏色改變
總結(jié)
以上是生活随笔為你收集整理的CSS图片廊实例详解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CSS导航栏实例详解
- 下一篇： Java Web的Struts2的多语种