在网页设计中，图片浏览的功能主要是展示相片，让图片以特定的方式展现在浏览者的面前。本示例利用纯CSS设计，功能简单但很有趣味，其中应用很多CSS技巧。

【操作步骤】

第1步，设计原理。在网站建设时简易的CSS相册功能分析如下。   

•相册在默认状态情况下以缩略图的形式展现给浏览者，并且不压缩相片的原有宽度和高度属性，而是取相片的某个部分作为缩略图形式。   

•当鼠标悬停于某张缩略图时，相册列表中的缩略图恢复为原始相片的宽度和高度，展现在相册的某个固定区域。   

•当鼠标移开缩略图区域时，缩略图列表恢复原始形态。   

•保持相册的HTML结构是最简洁、最合理的结构，不出现多余的相片内容。

根据以上几个关于CSS样式制作的简易相册功能要求，可以归纳为以下几点在HTML结构与CSS样式上需要把握的重点：   

•结构清晰明了，无冗余的HTML结构代码。   

•鼠标悬停效果在CSS样式中就只能利用:hover伪类才能完成，而IE6浏览器在解释:hover伪类时只能将其使用在锚点a标签中才有效。

了解整个CSS相册中需要把握的重点，还需要分析如何实现以下两个效果：   

•不压缩图片，而是将相片中的某个部分作为缩略图显示在缩略图列表区域。   

•当鼠标悬停缩略图时，如何将图片以完整的图片形式显示在相片展示区域。

第2步，设计选项卡结构。

使用a元素包含一个缩略图和一个大图，通过<span>标签包含动态显示的大图和提示文本。

<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 />毛主席爱吃的毛氏红烧肉  </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元素是绝对定位，可以把所有大图都固定到一个位置，并统一大小，默认时它们都是重叠在一起，并隐藏显示。本实例中所提到的两个重点，其实就是对于CSS样式的两种应用方式：相对定位应用以及绝对定位应用时的参照对象。对这个图片浏览实现方式有兴趣的可以通过尝试调整相册列表的布局方式、显示的位置等CSS样式而巩固加深对CSS样式的理解。