最近都在研究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="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_001.jpg" /> <img id="index2" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_002.jpg" /> <img id="index3" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_003.jpg" /> <img id="index4" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_004.jpg" /> <img id="index5" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_005.jpg" /> <img id="index6" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_006.jpg" /> </dd></dl>
請原諒我的吝惜，自從Google相簿被牆了後，部落格園相簿的那點空間真是捉襟見肘。上面的這個結構非常固定，大家死記硬背就好了。以後理想了便會輕鬆些。熟行的人一眼就會看出要使用到錨點。不知錨點為何物的人請自行google。dt裡面的數字有點奇怪，是倒過來寫的，很快你們就會明白了。
<br /><!doctype html><br /><title>純CSS相簿 by 司徒正美</title><br /><meta charset="utf-8"/><br /><meta name="keywords" content="純CSS相簿 by 司徒正美" /><br /><meta name="description" content="純CSS相簿 by 司徒正美" /><br /><dl><br /> <dt><br /> <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><br /> </dt><br /> <dd><br /> <img id="index1" name="index1" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_001.jpg" /><br /> <img id="index2" name="index2" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_002.jpg" /><br /> <img id="index3" name="index3" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_003.jpg" /><br /> <img id="index4" name="index4" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_004.jpg" /><br /> <img id="index5" name="index5" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_005.jpg" /><br /> <img id="index6" name="index6" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_006.jpg" /><br /> </dd><br /></dl><br />
運行代碼
經常光顧我的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; }
<br /><!doctype html><br /><title>純CSS相簿 by 司徒正美</title><br /><meta charset="utf-8"/><br /><meta name="keywords" content="純CSS相簿 by 司徒正美" /><br /><meta name="description" content="純CSS相簿 by 司徒正美" /><br /><style type="text/css"><br /> dl {/*相簿*/<br /> position:relative;<br /> width:160px;<br /> height:142px;<br /> border:10px solid #EFEFDA;/*相簿邊框*/<br /> }<br /> dd {/*相簿的內容顯示區，包含相片與下面的翻頁欄*/<br /> margin:0;/*去除瀏覽器的預設設定*/<br /> padding:0;/*去除瀏覽器的預設設定*/<br /> width:160px;<br /> height:120px;<br /> overflow:hidden;/*重點，讓每次只顯示一張圖片*/<br /> }<br /> img {<br /> border:2px solid #000;/*增加立體感*/<br /> }<br /> dt {/*翻頁欄*/<br /> position:absolute;<br /> right:0px;<br /> bottom:0px;<br /> /*上面三步是用於把它固定於圖片下方*/<br /> width:160px;<br /> height:22px;<br /> background:#FBFBEA;<br /> }<br /> a {<br /> float:right;<br /> }<br /> </style><br /><dl><br /> <dt><br /> <a href="#indexb6">6</a><a href="#indexb5">5</a><a href="#indexb4">4</a><a href="#indexb3">3</a><a href="#indexb2">2</a><a href="#indexb1">1</a><br /> </dt><br /> <dd><br /> <img id="indexb1" name="indexb1" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_001.jpg" /><br /> <img id="indexb2" name="indexb2" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_002.jpg" /><br /> <img id="indexb3" name="indexb3" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_003.jpg" /><br /> <img id="indexb4" name="indexb4" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_004.jpg" /><br /> <img id="indexb5" name="indexb5" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_005.jpg" /><br /> <img id="indexb6" name="indexb6" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_006.jpg" /><br /> </dd><br /></dl><br />
運行代碼
天哪，我發現我們做事太有效率了，一下子相簿就整出來，點選連結就能切換圖片了。明白為什麼能切換圖片嗎？！如果我們不設定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 }
<br /><!doctype html><br /><title>純CSS相簿 by 司徒正美</title><br /><meta charset="utf-8"/><br /><meta name="keywords" content="純CSS相簿 by 司徒正美" /><br /><meta name="description" content="純CSS相簿 by 司徒正美" /><br /><style type="text/css"><br /> dl {/*相簿*/<br /> position:relative;<br /> width:160px;<br /> height:142px;<br /> border:10px solid #EFEFDA;/*相簿邊框*/<br /> }<br /> dd {/*相簿的內容顯示區，包含相片與下面的翻頁欄*/<br /> margin:0;/*去除瀏覽器的預設設定*/<br /> padding:0;/*去除瀏覽器的預設設定*/<br /> width:160px;<br /> height:120px;<br /> overflow:hidden;/*重點，讓每次只顯示一張圖片*/<br /> }<br /> img {<br /> border:2px solid #000;/*增加立體感*/<br /> }<br /> dt {/*翻頁欄*/<br /> position:absolute;<br /> right:0px;<br /> bottom:0px;<br /> /*上面三步是用於把它固定於圖片下方*/<br /> width:160px;<br /> height:22px;<br /> background:#FBFBEA;<br /> }<br /> a {<br /> display:block;/*讓其擁有盒子模型*/<br /> float:right;<br /> margin:2px;/*錯開格子*/<br /> width:18px;/*呈正方形*/<br /> height:18px;<br /> text-align:center;/*置中顯示*/<br /> color:#fff;/*預設是藍色，所以一定要重寫*/<br /> text-decoration:none;/*消除底線*/<br /> background:#666;<br /> filter:alpha(opacity=70);<br /> opacity:.7;<br /> }<br /> a:hover {<br /> background:#000<br /> }<br /> </style><br /><dl><br /> <dt><br /> <a href="#indexa6">6</a><a href="#indexa5">5</a><a href="#indexa4">4</a><a href="#indexa3">3</a><a href="#indexa2">2</a><a href="#indexa1">1</a><br /> </dt><br /> <dd><br /> <img id="indexa1" name="indexa1" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_001.jpg" /><br /> <img id="indexa2" name="indexa2" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_002.jpg" /><br /> <img id="indexa3" name="indexa3" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_003.jpg" /><br /> <img id="indexa4" name="indexa4" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_004.jpg" /><br /> <img id="indexa5" name="indexa5" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_005.jpg" /><br /> <img id="indexa6" name="indexa6" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_006.jpg" /><br /> </dd><br /></dl><br />
運行代碼
成品除了翻頁欄由於圖片過小顯得有點大外，非常好看秀雅。由於Firefox在實現開啟新視窗的機制有些問題，當我們點選連結時它又跑回原來的頁面尋找對應的錨點，而不是本地視窗上的錨點。不過，放心，你們做相簿時肯定不會把它做在運行框中的。
現在除了天煞的opera外都相容。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
