在網(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)懸停縮略圖時(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樣式的理解。