CSS相簿-css教學-PHP中文網

CSS相簿

高洛峰

發布： 2017-02-24 13:13:27

原創

1848 人瀏覽過

最近都在研究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
  }

登入後複製

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