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

【操作步驟】

第1步，設計原理。在網站建設時簡易的CSS相冊功能分析如下。   

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

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

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

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

根據以上幾個關于CSS樣式制作的簡易相冊功能要求，可以歸納為以下幾點在HTML結構與CSS樣式上需要把握的重點：   

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

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

了解整個CSS相冊中需要把握的重點，還需要分析如何實現以下兩個效果：   

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

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

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

使用a元素包含一個縮略圖和一個大圖，通過<span>標簽包含動態(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;}

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

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