ul結合CSS制作網頁相冊滑動瀏覽效果

互聯網 ? 發布時間：2008-10-17 19:25:02 ? 作者：佚名 ? 我要評論

英文原文：Sliding Photograph Galleries

翻譯整理：西米CC-www.ximicc.com

效果：

運行代碼框

接下來將列表項目設置為左浮動：

#gallery li {

float: left;

}

這個樣式現在不會對瀏覽器的解析效果產生任何影響，但它是必須的，它確保了分置在各個列表項中的圖片顯示在同一行，你可以在整體效果完成之后刪除這行代碼比較一下差別。接下來是一組很關鍵的CSS定義，針對li中的鏈接標簽a：

#gallery li a {

display: block;

width: 28px;

height: 240px;

border-right: #fff 1px solid;

overflow: hidden;

cursor: default;

}

首先將鏈接對象轉換為塊級元素，以便為其設置寬和高，這里的寬度28px即縮略圖的截取區域，相冊中的圖片最好能進行一些預處理，除了之前提到的尺寸規格之外，還可以看看能否在這28×240的縮略區內盡可能多的傳遞圖片信息。這里面最重要的一行代碼是overflow: hidden; ，它讓圖片的可視部分限制在a標簽的寬高范圍之內。另外樣式中還定義了鼠標指針的外觀，并為每個鏈接區域設置了1px的白色右邊框，讓其中的圖片之間具有更明顯的視覺分隔。

添加了鏈接的圖片，在瀏覽器中往往會顯示出紫色的外邊框，我們通過下面的CSS來消除它：

#gallery li a img {

border:0;

}

最后是鼠標滑過時顯示完整圖片的實現，我們之所以在圖片上添加鏈接，很大一部分原因在于我們需要一個行為來觸發相冊瀏覽，而利用偽類a:hover來實現再適合不過了：

#gallery li a:hover {

width: 320px;

}

CSS中我們只要簡單的改變已經轉換為塊級元素的a標簽的寬度就可以了。

最后來說明一下ul的寬度為什么要設置為495px。結合縮略圖和大圖瀏覽的功能，相冊整體的寬度至少應該是一張大圖加上六張小圖，即320 28×6=488px，而在設計的過程中，我們還未每個a標簽添加了1px的右邊框，也就是每張圖片都有各自1px的右邊框，所以相冊的寬度在原來的基礎上再加7px，即最后的495px。

相關文章

這篇文章主要介紹了純 CSS 實現【點擊展開閱讀全文】功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-10-13

這篇文章主要介紹了CSS實現兩個元素相融效果(粘滯效果),文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學2020-10-12

這篇文章主要介紹了css為什么要放在head標簽中,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-10-12

這篇文章主要介紹了CSS兩種常用的封裝示例，幫助大家更好的利用CSS制作網頁，感興趣的朋友可以了解下2020-10-12

這篇文章主要介紹了CSS標簽模式display屬性,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-10-12

這篇文章主要介紹了css 收貨地址平行四邊形的線條樣式示例代碼,代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-10-09

這篇文章主要介紹了css實現鼠標放上去時圖片過渡轉換動畫,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-10-09

這篇文章給大家介紹了CSS中width和height的默認值auto與%案例，本文通過實例案例給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧2020-09-30

這篇文章主要介紹了css一些不常見但很有用的屬性操作大全,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-09-28

這篇文章主要介紹了解決搜索框和搜索按鈕button邊框不能重合的問題,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-09-28

最新評論

總結

以上是生活随笔為你收集整理的html相册浏览页面怎么做,ul结合CSS制作网页相册滑动浏览效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。