ul結(jié)合CSS制作網(wǎng)頁相冊滑動瀏覽效果

互聯(lián)網(wǎng) ? 發(fā)布時間：2008-10-17 19:25:02 ? 作者：佚名 ? 我要評論

英文原文：Sliding Photograph Galleries

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

效果：

運行代碼框

接下來將列表項目設(shè)置為左浮動：

#gallery li {

float: left;

}

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

#gallery li a {

display: block;

width: 28px;

height: 240px;

border-right: #fff 1px solid;

overflow: hidden;

cursor: default;

}

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

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

#gallery li a img {

border:0;

}

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

#gallery li a:hover {

width: 320px;

}

CSS中我們只要簡單的改變已經(jīng)轉(zhuǎn)換為塊級元素的a標簽的寬度就可以了。

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

相關(guān)文章

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

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

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

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

這篇文章主要介紹了CSS標簽?zāi)Ｊ絛isplay屬性,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-10-12

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

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

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

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

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

最新評論

總結(jié)

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

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