純CSS相冊

2020-03-24 16:38:11

字體：大中小

來源：轉載

供稿：網友

最近都在研究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://cdn14.x6kj.com/uploads/allimg/190809/1619415396-0.jpg" /
img id="index2" src="https://cdn14.x6kj.com/uploads/allimg/190809/1619414I1-1.jpg" /
img id="index3" src="https://cdn14.x6kj.com/uploads/allimg/190809/161941F92-2.jpg" /
img id="index4" src="https://cdn14.x6kj.com/uploads/allimg/190809/1619414261-3.jpg" /
img id="index5" src="https://cdn14.x6kj.com/uploads/allimg/190809/16194143Y-4.jpg" /
img id="index6" src="https://cdn14.x6kj.com/uploads/allimg/190809/16194124H-5.jpg" /
/dd
/dl 請原諒我的吝惜，自從谷歌相冊被墻了后，博客園相冊的那點空間真是捉襟見肘。上面的這個結構非常固定，大家死記硬背就好了。以后理想了便會輕松些。熟行的人一眼就會看出要使用到錨點。不知錨點為何物的人請自行google。dt里面的數字有點奇怪，是倒過來寫的，很快你們就會明白了。
!doctype
html
title 純CSS相冊 by 司徒正美 /title
meta charset="utf-8"/
meta name="keywords" content="純CSS相冊 by 司徒正美" /
meta name="description" content="純CSS相冊 by 司徒正美" /
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" name="index1"
src="https://cdn14.x6kj.com/uploads/allimg/190809/1619415396-0.jpg"
/ img id="index2" name="index2"
src="https://cdn14.x6kj.com/uploads/allimg/190809/1619414I1-1.jpg"
/ img id="index3" name="index3"
src="https://cdn14.x6kj.com/uploads/allimg/190809/161941F92-2.jpg"
/ img id="index4" name="index4"
src="https://cdn14.x6kj.com/uploads/allimg/190809/1619414261-3.jpg"
/ img id="index5" name="index5"
src="https://cdn14.x6kj.com/uploads/allimg/190809/16194143Y-4.jpg"
/ img id="index6" name="index6"
src="https://cdn14.x6kj.com/uploads/allimg/190809/16194124H-5.jpg"
/ /dd
/dl
經常光顧我的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;
} !doctype
html
title 純CSS相冊 by 司徒正美 /title
meta charset="utf-8"/
meta name="keywords" content="純CSS相冊 by 司徒正美" /
meta name="description" content="純CSS相冊 by 司徒正美" /
style type="text/css" 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; } /style
dl dt 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 /dt dd img
id="indexb1" name="indexb1"
src="https://cdn14.x6kj.com/uploads/allimg/190809/1619415396-0.jpg"
/ img id="indexb2" name="indexb2"
src="https://cdn14.x6kj.com/uploads/allimg/190809/1619414I1-1.jpg"
/ img id="indexb3" name="indexb3"
src="https://cdn14.x6kj.com/uploads/allimg/190809/161941F92-2.jpg"
/ img id="indexb4" name="indexb4"
src="https://cdn14.x6kj.com/uploads/allimg/190809/1619414261-3.jpg"
/ img id="indexb5" name="indexb5"
src="https://cdn14.x6kj.com/uploads/allimg/190809/16194143Y-4.jpg"
/ img id="indexb6" name="indexb6"
src="https://cdn14.x6kj.com/uploads/allimg/190809/16194124H-5.jpg"
/ /dd
/dl
天哪，我發現我們做事太有效率了，一下子相冊就整出來，點擊鏈接就能切換圖片了。明白為什么能切換圖片嗎？！如果我們不設置 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
} !doctype
html
title 純CSS相冊 by 司徒正美 /title
meta charset="utf-8"/
meta name="keywords" content="純CSS相冊 by 司徒正美" /
meta name="description" content="純CSS相冊 by 司徒正美" /
style type="text/css" 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
{ 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 } /style
dl dt 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 /dt dd img
id="indexa1" name="indexa1"
src="https://cdn14.x6kj.com/uploads/allimg/190809/1619415396-0.jpg"
/ img id="indexa2" name="indexa2"
src="https://cdn14.x6kj.com/uploads/allimg/190809/1619414I1-1.jpg"
/ img id="indexa3" name="indexa3"
src="https://cdn14.x6kj.com/uploads/allimg/190809/161941F92-2.jpg"
/ img id="indexa4" name="indexa4"
src="https://cdn14.x6kj.com/uploads/allimg/190809/1619414261-3.jpg"
/ img id="indexa5" name="indexa5"
src="https://cdn14.x6kj.com/uploads/allimg/190809/16194143Y-4.jpg"
/ img id="indexa6" name="indexa6"
src="https://cdn14.x6kj.com/uploads/allimg/190809/16194124H-5.jpg"
/ /dd
/dl
成品除了翻頁欄由于圖片過小顯得有點大外，非常好看秀雅。由于火狐在實現打開新窗口的機制有些問題，當我們點擊鏈接時它又跑回原來的頁面尋找對應的錨記，而不是本地窗口上的錨記。不過，放心，你們做相冊時肯定不會把它做在運行框中的。現在除了天煞的opera外都兼容。html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：實例教程利用html5和css3打造一款創意404頁面

下一篇：針對瀏覽器隱藏CSS之獨孤九劍