在網(wǎng)頁(yè)設計中，圖片瀏覽的功能主要是展示相片，讓圖片以特定的方式展現在瀏覽者的面前。本示例利用純CSS設計，功能簡(jiǎn)單但很有趣味，其中應用很多CSS技巧。

【操作步驟】

第1步，設計原理。在網(wǎng)站建設時(shí)簡(jiǎn)易的CSS相冊功能分析如下。   

?相冊在默認狀態(tài)情況下以縮略圖的形式展現給瀏覽者，并且不壓縮相片的原有寬度和高度屬性，而是取相片的某個(gè)部分作為縮略圖形式。   

?當鼠標懸停于某張縮略圖時(shí)，相冊列表中的縮略圖恢復為原始相片的寬度和高度，展現在相冊的某個(gè)固定區域。   

?當鼠標移開(kāi)縮略圖區域時(shí)，縮略圖列表恢復原始形態(tài)。   

?保持相冊的HTML結構是最簡(jiǎn)潔、最合理的結構，不出現多余的相片內容。

根據以上幾個(gè)關(guān)于CSS樣式制作的簡(jiǎn)易相冊功能要求，可以歸納為以下幾點(diǎn)在HTML結構與CSS樣式上需要把握的重點(diǎn)：   

?結構清晰明了，無(wú)冗余的HTML結構代碼。   

?鼠標懸停效果在CSS樣式中就只能利用:hover偽類(lèi)才能完成，而IE6瀏覽器在解釋:hover偽類(lèi)時(shí)只能將其使用在錨點(diǎn)a標簽中才有效。

了解整個(gè)CSS相冊中需要把握的重點(diǎn)，還需要分析如何實(shí)現以下兩個(gè)效果：   

?不壓縮圖片，而是將相片中的某個(gè)部分作為縮略圖顯示在縮略圖列表區域。   

?當鼠標懸?？s略圖時(shí)，如何將圖片以完整的圖片形式顯示在相片展示區域。

第2步，設計選項卡結構。

使用a元素包含一個(gè)縮略圖和一個(gè)大圖，通過(guò)<span>標簽包含動(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 />鹵煮火燒 北京的傳統小吃</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 />毛主席愛(ài)吃的毛氏紅燒肉  </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;}

在上面代碼中，首先定義了包含框樣式，設置包含框定位為相對定位position:relative;，這樣其中包含的各個(gè)絕對定位元素都是以當前包含框為參照物進(jìn)行定位。

在網(wǎng)站設計時(shí)，默認設置a元素中包含的span元素為絕對定位顯示，并隱藏起來(lái)，而當鼠標經(jīng)過(guò)時(shí)，重新恢復顯示span元素，以及其包含的大圖。鼠標移出之后，重新隱藏起來(lái)。由于span元素是絕對定位，可以把所有大圖都固定到一個(gè)位置，并統一大小，默認時(shí)它們都是重疊在一起，并隱藏顯示。本實(shí)例中所提到的兩個(gè)重點(diǎn)，其實(shí)就是對于CSS樣式的兩種應用方式：相對定位應用以及絕對定位應用時(shí)的參照對象。對這個(gè)圖片瀏覽實(shí)現方式有興趣的可以通過(guò)嘗試調整相冊列表的布局方式、顯示的位置等CSS樣式而鞏固加深對CSS樣式的理解。