|
接下來將列表項(xiàng)目設(shè)置為左浮動(dòng)：
#gallery li {
float: left;
}
這個(gè)樣式現(xiàn)在不會(huì)對(duì)瀏覽器的解析效果產(chǎn)生任何影響，但它是必須的，它確保了分置在各個(gè)列表項(xiàng)中的圖片顯示在同一行，你可以在整體效果完成之后刪除這行代碼比較一下差別。接下來是一組很關(guān)鍵的CSS定義，針對(duì)li中的鏈接標(biāo)簽a：
#gallery li a {
display: block;
width: 28px;
height: 240px;
border-right: #fff 1px solid;
overflow: hidden;
cursor: default;
}
首先將鏈接對(duì)象轉(zhuǎn)換為塊級(jí)元素，以便為其設(shè)置寬和高，這里的寬度28px即縮略圖的截取區(qū)域，相冊(cè)中的圖片最好能進(jìn)行一些預(yù)處理，除了之前提到的尺寸規(guī)格之外，還可以看看能否在這28×240的縮略區(qū)內(nèi)盡可能多的傳遞圖片信息。這里面最重要的一行代碼是overflow: hidden; ，它讓圖片的可視部分限制在a標(biāo)簽的寬高范圍之內(nèi)。另外樣式中還定義了鼠標(biāo)指針的外觀，并為每個(gè)鏈接區(qū)域設(shè)置了1px的白色右邊框，讓其中的圖片之間具有更明顯的視覺分隔。
添加了鏈接的圖片，在瀏覽器中往往會(huì)顯示出紫色的外邊框，我們通過下面的CSS來消除它：
#gallery li a img {
border:0;
}
最后是鼠標(biāo)滑過時(shí)顯示完整圖片的實(shí)現(xiàn)，我們之所以在圖片上添加鏈接，很大一部分原因在于我們需要一個(gè)行為來觸發(fā)相冊(cè)瀏覽，而利用偽類a:hover來實(shí)現(xiàn)再適合不過了：
#gallery li a:hover {
width: 320px;
}
CSS中我們只要簡(jiǎn)單的改變已經(jīng)轉(zhuǎn)換為塊級(jí)元素的a標(biāo)簽的寬度就可以了。
最后來說明一下ul的寬度為什么要設(shè)置為495px。結(jié)合縮略圖和大圖瀏覽的功能，相冊(cè)整體的寬度至少應(yīng)該是一張大圖加上六張小圖，即320+28×6=488px，而在設(shè)計(jì)的過程中，我們還未每個(gè)a標(biāo)簽添加了1px的右邊框，也就是每張圖片都有各自1px的右邊框，所以相冊(cè)的寬度在原來的基礎(chǔ)上再加7px，即最后的495px。
經(jīng)典論壇交流：
http://bbs.blueidea.com/thread-2866705-1-1.html
本文鏈接：http://m.95time.cn/tech/web/2008/5905.asp 
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 純CSS實(shí)現(xiàn)相冊(cè)滑動(dòng)瀏覽 [1] 下一頁
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁 
第 2 頁 純CSS實(shí)現(xiàn)相冊(cè)滑動(dòng)瀏覽 [2]
