首頁 > web前端 > css教學 > 主體

CSS相簿

高洛峰
發布: 2017-02-24 13:13:27
原創
1831 人瀏覽過

最近都在研究javascript,CSS有點生疏了。是時候拿個東西練練手。

<dl>
  <dt>
    <a href="#index6">6</a><a href="#index5">5</a><a href="#index4">4</a><a href="#index3">3</a><a href="#index2">2</a><a href="#index1">1</a>
  </dt>
  <dd>
    <img id="index1" src="https://img.php.cn/upload/article/000/000/013/4bf6ad50455219fb4dbd78e1710b7b78-0.jpg" />
    <img id="index2" src="https://img.php.cn/upload/article/000/000/013/4bf6ad50455219fb4dbd78e1710b7b78-1.jpg" />
    <img id="index3" src="https://img.php.cn/upload/article/000/000/013/4bf6ad50455219fb4dbd78e1710b7b78-2.jpg" />
    <img id="index4" src="https://img.php.cn/upload/article/000/000/013/4bf6ad50455219fb4dbd78e1710b7b78-3.jpg" />
    <img id="index5" src="https://img.php.cn/upload/article/000/000/013/4bf6ad50455219fb4dbd78e1710b7b78-4.jpg" />
    <img id="index6" src="https://img.php.cn/upload/article/000/000/013/e3e768bc0ad403b7acd7b90162e40116-5.jpg" />
  </dd>
</dl>
登入後複製

請原諒我的吝惜,自從谷歌相簿被牆了後,博客園相冊的那點空間真是捉襟見肘。上面的這個結構非常固定,大家死記硬背就好了。以後理想了會輕鬆些。熟行的人一眼就會看出要用到錨點。不知錨點為何物的人請自行google。 dt裡面的數字有點奇怪,是倒過來寫的,很快你們就會明白了。

經常光顧我的Blog的人可能會留意到,我運行框的HTML程式碼很簡潔,也很奇怪,與Dreamweave生成網頁模板出入很大。放心,這是經過驗證的HTML5程式碼,有沒有html,head,body等標籤都無所謂。

我先來為大家描繪相簿未來的樣子。相簿的大小與這些圖片中的一張差不多,因為我們要做出翻頁效果。它有一個邊框,不用想就是用dl的border來實現。它有一個翻頁欄,由dt實現。圖片的顯示介面由dd實現,我們可以用絕對定位把翻頁欄置於圖片的下方。圖片顯示介面每次只顯示一張圖片,多點的部分我們可以用overflow:hidden隱去。這樣一來,相簿的大小(指除去邊框部分)就是圖片的大小加翻頁欄。現在每張圖片為160 x 120,翻頁欄我設定為160 x 24(寬度相一致),換言之dl的width為160px,height為142px(我們要保證相簿呈長方形,這符合我們的生活常識。 )我們最好還能圖片設定一個2px寬的黑色邊框,因為我們固定了圖片的大小,讓超出的部分隱藏,換言之,到時右邊與下邊都會隱去。這樣與原來的大邊框並在一起時,非常有立體感,就好像圖片嵌入相簿中,外面有一塊玻璃一樣。好了,先是這麼多,翻頁欄的按鈕銷後再說,全部float:right。

  dl {/*相册*/
    position:relative;
    width:160px;
    height:142px;
    border:10px solid #EFEFDA;/*相册边框*/
  }
  dd {/*相册的内容显示区,包含相片与下面的翻页栏*/
    margin:0;/*去除浏览器的默认设置*/
    padding:0;/*去除浏览器的默认设置*/
    width:160px;
    height:120px;
    overflow:hidden;/*重点,让每次只显示一张图片*/
  }
  img {
    border:2px solid #000;/*增加立体感*/
  }
  dt {/*翻页栏*/
    position:absolute;
    right:0px;
    bottom:0px;
    /*上面三步是用于把它固定于图片下方*/
    width:160px;
    height:22px;
    background:#FBFBEA;
  }
  a {
     float:right;
  }
登入後複製

天哪,我發現我們做事太有效率了,一下子相簿就整出來,點擊連結就能切換圖片了。明白為什麼能切換圖片嗎? !如果我們沒有設定overflow:hidden,點擊圖片時網頁其實有一個上下移動的狀態發生,透過我們可以透過右邊的捲軸觀察到。這意味著什麼呢?意味著javascript的scrollTop發生作用了。 scrollTop通常為零,當其為正數時,原來可視區的東西就向下位移。如果我們固定了可視區,不顯示捲軸呢? !下面的東西怎麼才能跑到上面顯示? ?答案顯然易見,scrollTop這時變成負數。具體自己測試,按邏輯是這樣的。

我們再來看鏈接,float:right有個副作用,就是讓最左一個跑到右邊那幾個的右邊,因此我們的數字就要倒著寫。最後收尾部分很簡單,以實現ul水平選單實現就行了。為了好看,我們加上半透明效果與懸浮效果。

 a {
    display:block;/*让其拥有盒子模型*/
    float:right;
    margin:2px;/*错开格子*/
    width:18px;/*呈正方形*/
    height:18px;
    text-align:center;/*居中显示*/
    color:#fff;/*默认是蓝色,所以一定要重写*/
    text-decoration:none;/*消除下划线*/
    background:#666;
    filter:alpha(opacity=70);
    opacity:.7;
  }
  a:hover {
    background:#000
  }
登入後複製

成品除了翻頁欄由於圖片過小顯得有點大外,非常好看秀雅。由於火狐在實現開啟新視窗的機制有些問題,當我們點擊連結時它又跑回原來的頁面尋找對應的錨點,而不是本地視窗上的錨點。不過,放心,你們做相簿時肯定不會把它做在運行框中的。

  • 654321

  • CSS相册 CSS相册 CSS相册 CSS相册 CSS相册 CSS相册


############################################ #################現在除了天煞的opera外都相容。 ######更多CSS相簿 相關文章請追蹤PHP中文網! ############
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板