在網(wǎng)頁設(shè)計(jì)中，圖片瀏覽的功能主要是展示相片，讓圖片以特定的方式展現(xiàn)在瀏覽者的面前。本示例利用純CSS設(shè)計(jì)，功能簡單但很有趣味，其中應(yīng)用很多CSS技巧。
【操作步驟】
第1步，設(shè)計(jì)原理。在網(wǎng)站建設(shè)時(shí)簡易的CSS相冊功能分析如下。
?相冊在默認(rèn)狀態(tài)情況下以縮略圖的形式展現(xiàn)給瀏覽者，并且不壓縮相片的原有寬度和高度屬性，而是取相片的某個(gè)部分作為縮略圖形式。
?當(dāng)鼠標(biāo)懸停于某張縮略圖時(shí)，相冊列表中的縮略圖恢復(fù)為原始相片的寬度和高度，展現(xiàn)在相冊的某個(gè)固定區(qū)域。
?當(dāng)鼠標(biāo)移開縮略圖區(qū)域時(shí)，縮略圖列表恢復(fù)原始形態(tài)。
?保持相冊的HTML結(jié)構(gòu)是最簡潔、最合理的結(jié)構(gòu)，不出現(xiàn)多余的相片內(nèi)容。
根據(jù)以上幾個(gè)關(guān)于CSS樣式制作的簡易相冊功能要求，可以歸納為以下幾點(diǎn)在HTML結(jié)構(gòu)與CSS樣式上需要把握的重點(diǎn)：
?結(jié)構(gòu)清晰明了，無冗余的HTML結(jié)構(gòu)代碼。
?鼠標(biāo)懸停效果在CSS樣式中就只能利用:hover偽類才能完成，而IE6瀏覽器在解釋:hover偽類時(shí)只能將其使用在錨點(diǎn)a標(biāo)簽中才有效。
了解整個(gè)CSS相冊中需要把握的重點(diǎn)，還需要分析如何實(shí)現(xiàn)以下兩個(gè)效果：
?不壓縮圖片，而是將相片中的某個(gè)部分作為縮略圖顯示在縮略圖列表區(qū)域。
?當(dāng)鼠標(biāo)懸?？s略圖時(shí)，如何將圖片以完整的圖片形式顯示在相片展示區(qū)域。
第2步，設(shè)計(jì)選項(xiàng)卡結(jié)構(gòu)。
使用a元素包含一個(gè)縮略圖和一個(gè)大圖，通過<span>標(biāo)簽包含動(dòng)態(tài)顯示的大圖和提示文本。
<div class="container">
<a class="picture" href="#">
<img class="small-pic" src="images/small-1.jpg" />
<span><img src="images/1.jpg" />
<br />鹵煮火燒 北京的傳統(tǒng)小吃</span></a>
<a class="picture" href="#"><img class="small-pic" src="images/small-2.jpg" />
<span><img src="images/2.jpg" />
<br />臺灣菜式 藥材米酒香氣的燒酒雞</span></a> <br />
<a class="picture" href="#">
<img class="small-pic" src="images/small-3.jpg" />
<span><img src="images/3.jpg" />
<br />福建菜 十香醉排骨</span></a>
<a class="picture" href="#"><img class="small-pic" src="images/small-4.jpg" />
<span><img src="images/4.jpg" /><br /> 家常菜 宮保雞丁</span></a> <br />
<a class="picture" href="#"><img class="small-pic" src="images/small-6.jpg" />
<span><img src="images/6.jpg" /><br />中華美食 東坡肘子</span></a>
<a class="picture" href="#"><img class="small-pic" src="images/small-5.jpg" />
<span><img src="images/5.jpg" /><br />毛主席愛吃的毛氏紅燒肉 </span></a> </div>
第3步，定義圖片瀏覽樣式。
body { background-color:#CCCCCC;}
.container {
position:
relative;
margin-left:50px;
margin-top:50px;}
.picture img {
border: 1px solid white;
margin: 0 5px 5px 0;}
.picture:hover { background-color:
transparent;}.picture:hover img {
border: 2px solid blue;}.picture
.small-pic {
width:100px;
height:60px;
border:#FF6600 2px solid;}
.picture span {
position: absolute;
background-color:#FFCC33;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibilty: hidden;
color: black;
font-weight:800;
text-decoration:none;
text-align:center;}
.picture span img {
border-width: 0;
padding: 2px;
width:400px;
height:300px;}
.picture:hover span {
visibility: visible;
top: 0;
left: 230px;}
在上面代碼中，首先定義了包含框樣式，設(shè)置包含框定位為相對定位position:relative;，這樣其中包含的各個(gè)絕對定位元素都是以當(dāng)前包含框?yàn)閰⒄瘴镞M(jìn)行定位。
在網(wǎng)站設(shè)計(jì)時(shí)，默認(rèn)設(shè)置a元素中包含的span元素為絕對定位顯示，并隱藏起來，而當(dāng)鼠標(biāo)經(jīng)過時(shí)，重新恢復(fù)顯示span元素，以及其包含的大圖。鼠標(biāo)移出之后，重新隱藏起來。由于span元素是絕對定位，可以把所有大圖都固定到一個(gè)位置，并統(tǒng)一大小，默認(rèn)時(shí)它們都是重疊在一起，并隱藏顯示。本實(shí)例中所提到的兩個(gè)重點(diǎn)，其實(shí)就是對于CSS樣式的兩種應(yīng)用方式：相對定位應(yīng)用以及絕對定位應(yīng)用時(shí)的參照對象。對這個(gè)圖片瀏覽實(shí)現(xiàn)方式有興趣的可以通過嘗試調(diào)整相冊列表的布局方式、顯示的位置等CSS樣式而鞏固加深對CSS樣式的理解。