英文原文：sliding photograph galleries
翻譯整理：西公尺cc-www.ximicc.com
效果：執行**框
[ctrl a 全部選擇 提示：你可先修改部分**，再按執行]
這是乙個很簡單的純css相簿滑動瀏覽效果，僅用乙個無序列表ul結合簡單的css就可以實現。原文中介紹的縱向滑動相簿的實現方法，但是相比之下個人更喜歡橫向滑動的那個。兩者在縮圖的實現上有所區別，前者是採用收縮原始寬度的方法，會給人以很不自然的擠扁的感覺，而後者通過區域性顯示原始達到縮略的效果，雖然這種縮圖不能讓我們概覽整張，但我們可以通過提煉重點特徵或新增說明文字等方法，來提公升瀏覽者對的了解，最重要的是它在視覺協調性上更勝一籌。
首先來看一下xhtml部分，準備好七張相簿以及一張預設的相簿背景圖win_backh.gif，把它們儲存在**的windows目錄下，如前所述，七張的縮圖我們直接通過定義css來實現，不需要另外製作。我們以乙個ul作為容器把這幾張新增到頁面中，並設定空鏈結，當然你也可以在鏈結中設定具體的位址：
在ul中我們只應用了乙個名為gallery的樣式，接下來的css都將針對#gallery及其下級元素進行定義。本例中的相簿都有相同的尺寸320240，背景的尺寸為495240。注意這裡背景圖的寬度是根據本例的需要精確定義的，至於如何計算會在例子結束的時候進行說明。現在在瀏覽器中顯示的僅僅是七張帶圓點和預設鏈結邊框的，接下來看一下#gallery中針對ul的樣式設定：
#gallery
ul元素的寬和高與背景圖的尺寸保持一致，並設定了1p程式設計客棧x的外邊框。本例中通過margin將整個相簿居中，消除內填充以及預設的列表圓點符號。原文中#gallery還有一條overflow:hidden;語句，我把它去掉之後，相簿效果在ie6和ff中依然正常，不知是不是在其它瀏覽器中會出現bug，若你了解個中因由，希望告知本站以及時糾正。
接下來將列表專案設定為左浮動：
#gallery li
這個樣式現在不會對瀏覽器的解析效果產生任何影響，但它是必須的，它確保了分置在各個列表項中的顯示在同一行，你可以在整體效果完成之後刪除這行**比較一下差別。接下來是一組很關鍵的css定義，針對li中的鏈結標籤a：
#gallery li a
首先將鏈結物件轉換為塊級元素，以便為其設定寬和高，這裡的寬度28px即縮圖的擷取區域，相簿中的最好能進行一些預處理，除了之前提到的尺寸規格之外，還可以看看能否在這28240的縮略區內盡可能多的傳遞資訊。這裡面最重要的一行**是overflow: hidden; ，它讓的可視部分限制在a標籤的寬高範圍之內。另外樣式中還定義了滑鼠指標的外觀，並為每個鏈結區域設定了1px的白色右邊框，讓其中的之間具有更明顯的視覺分隔。
新增了鏈結的，在瀏覽器中往往會顯示出紫色的外邊框，我們通過下面的css來消除它：
#gallery li a img
最後是滑鼠滑過時顯示完整的實現，我們之所以在上新增鏈結，很大一部分原因在於我們需要乙個行為來觸發相簿瀏覽，而利用偽類a:hover來實現再適合不過了：
#gallery li a:hover
css中我們只要簡單的改變已經轉換為塊級元素的a標籤的寬度就可以了。
最後來說明一下ul的寬度為什麼要設定為495px。結合縮圖和大圖瀏覽的功能，相簿整體的寬度至少應該是一張大圖加上六張小圖，即320 286=488px，而在設計的過程中，我們還未每個a標籤新增了1px的右邊框，也就是每張都有各自1px的右邊框，所以相簿的寬度在原來的基礎上再加7px，即最後的495px。
本文標題: ul結合css製作網頁相簿滑動瀏覽效果
本文位址: /web/css/25485.html
CSS網頁製作技巧 ul的li高度不相容問題
在頁面中有時候使用ul li列表時ie6 ie7 ie8 ff的高度會不一樣 其中ie6與ie7高度一樣，ie8與ff高度一樣 設定高後使用 overflow hidden 也無濟於事，這個問題一直困擾著我，以至於我後來只能使用div來做列表，但是這樣只能說是對付上的，但沒從實際上解決這個問題。後來...
css製作一款相簿
這個是看了鬼佬的一篇文章之後參考他的 寫的,終於感覺到鬼佬的創意了.而同時感覺我們缺少的只是創意,而並不是技術,也許這個就是國家之間的差異吧.body imgh1 one one li a one a link,one a visited one a link img one a hover one...
別開生面 純CSS實現相簿滑動瀏覽
程式原始碼 在ul中我們只應用了乙個名為gallery的樣式，接下來的css都將針對 gallery及其下級元素進行定義。本例中的相簿都有相同的尺寸320 240，背景的尺寸為495 240。注意這裡背景圖的寬度是根據本例的需要精確定義的，至於如何計算會在例子結束的時候進行說明。現在在瀏覽器中顯示的...