html相册浏览页面怎么做,ul结合CSS制作网页相册滑动浏览效果
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)J絛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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 内核打补丁
- 下一篇: flex 文字竖排_4种CSS文字竖排方