作者:Stu Nicholls.

翻译:子乌 05.09.13

（子乌注：这篇文章实现的效果很炫，不敢一个人独享，就试着翻译出来。我的英语很烂，翻译得不怎么样，大家将就着看吧－－现在能够体会阿捷的辛苦了，我还只是随便翻翻就花了我一个小时时间...）

介绍：

　　随着我上一篇文章《如何使用CSS创建相册》的成功，我更进一步，用了一个新方法：不需要缩略图，并且采用两步式来显示图片。当鼠标移动到缩略图上时显示原图一半大小的图片，而当鼠标点击的时候，显示完整大小。

　　和上一篇文章一样，你将学会如何只用无序列表(ul)的图片和一个样式表来创建一个高质量的相册，你会经历这个相册构造的每一个步骤：

最开始的无序列表查看示例1

最后的效果查看示例2

　　每一个步骤都将被详细解释并有一个范例页面显示这附加的样式。这样你就能够明白到底发生了些什么。

　　这个相册能够工作在所有最新的浏览器上，并且我已经加入了hack使得ie5.5能够正确显示这些样式。样式并不大也不复杂，但是这个布局需要大量的精力用于细节与事先计划。

方法

步骤1

图像

　　为了这个相册，我准备了24个街头涂鸦的图片，每个的大小都是320x240px，我基于底下这些理由选择这个大小：

• 每个图片的文件大小需要都差不多小，使得所有图片能够在这个相册跑起来之前都加载完毕。
• 由于缩略图围绕着显示区域，对于这7x7的格子来说，很容易算出这个缩略图的大小是64x48px。
• 横向有5个缩略图跨过320px宽的显示区域(320px/5=64px)。
• 纵向有5个缩略图跨过240px高的显示区域(240px/5=48px)。
• 每个角落都会有1个缩略图，所以总共是24个缩略图(5+5+5+5+4=24)。

　　任何时候都可以为了适应任何质量的图片来改变这个布局，但一定要考虑下载图片所需要的时间。

　　基本的(x)html列表如下.

<ul id="gallery"> <li><img src="/image/article/css_gallery2/g1.jpg" alt="#1" title="#1" /></li> <li><img src="/image/article/css_gallery2/g2.jpg" alt="#2" title="#2" /></li> <li><img src="/image/article/css_gallery2/g3.jpg" alt="#3" title="#3" /></li> <li><img src="/image/article/css_gallery2/g4.jpg" alt="#4" title="#4" /></li> <li><img src="/image/article/css_gallery2/g5.jpg" alt="#5" title="#5" /></li> <li><img src="/image/article/css_gallery2/g6.jpg" alt="#6" title="#6" /></li> <li><img src="/image/article/css_gallery2/g7.jpg" alt="#7" title="#7" /></li> <li><img src="/image/article/css_gallery2/g8.jpg" alt="#8" title="#8" /></li> <li><img src="/image/article/css_gallery2/g9.jpg" alt="#9" title="#9" /></li> <li><img src="/image/article/css_gallery2/g10.jpg" alt="#10" title="#10" /></li> <li><img src="/image/article/css_gallery2/g11.jpg" alt="#11" title="#11" /></li> <li><img src="/image/article/css_gallery2/g12.jpg" alt="#12" title="#12" /></li> <li><img src="/image/article/css_gallery2/g13.jpg" alt="#13" title="#13" /></li> <li><img src="/image/article/css_gallery2/g14.jpg" alt="#14" title="#14" /></li> <li><img src="/image/article/css_gallery2/g15.jpg" alt="#15" title="#15" /></li> <li><img src="/image/article/css_gallery2/g16.jpg" alt="#16" title="#16" /></li> <li><img src="/image/article/css_gallery2/g17.jpg" alt="#17" title="#17" /></li> <li><img src="/image/article/css_gallery2/g18.jpg" alt="#18" title="#18" /></li> <li><img src="/image/article/css_gallery2/g19.jpg" alt="#19" title="#19" /></li> <li><img src="/image/article/css_gallery2/g20.jpg" alt="#20" title="#20" /></li> <li><img src="/image/article/css_gallery2/g21.jpg" alt="#21" title="#21" /></li> <li><img src="/image/article/css_gallery2/g22.jpg" alt="#22" title="#22" /></li> <li><img src="/image/article/css_gallery2/g23.jpg" alt="#23" title="#23" /></li> <li><img src="/image/article/css_gallery2/g24.jpg" alt="#24" title="#24" /></li> </ul>

步骤2

文档格式声明

首先要作的，也是最重要的，就是确认你使用了正确的(X)HTML !DOCTYPE，如果没有这玩意儿，绝大部分的浏览器将会被抛入quirks模式并引出各种各样的不兼容问题。W3C QA - List of valid DTDs列出了所有能够被引用的正确的文档格式声明。对于这个样式表，使用XHTML1.0或者1.1会更加合适。我自己所有的网页都使用XHTML1.1。

步骤3

添加超链接和样式信息

　　为了使用:hover伪类，我需要将这个基本的无序列表改变成一个超链接的无序列表。那是因为IE浏览器只允许:hover伪类在超链接上使用。我同样需要添加额外的声明来指向特定的图片。

现在(x)html看起来就像这样：

<ul id="gallery"> <li><a href="#nogo"><img src="/image/article/css_gallery2/g1.jpg" alt="#1" title="#1" /></a></li> <li><a href="#nogo"><img src="/image/article/css_gallery2/g2.jpg" alt="#2" title="#2" /></a></li> <li><a href="#nogo"><img src="/image/article/css_gallery2/g3.jpg" alt="#3" title="#3" /></a></li> <li><a href="#nogo"><img src="/image/article/css_gallery2/g4.jpg" alt="#4" title="#4" /></a></li> <li><a href="#nogo"><img src="/image/article/css_gallery2/g5.jpg" alt="#5" title="#5" /></a></li> <li><a href="#nogo"><img src="/image/article/css_gallery2/g6.jpg" alt="#6" title="#6" /></a></li> <li class="rgt"><a href="#nogo"><img src="/image/article/css_gallery2/g7.jpg" alt="#7" title="#7" /></a></li> <li class="lft"><a href="#nogo"><img src="/image/article/css_gallery2/g8.jpg" alt="#8" title="#8" /></a></li> <li class="rgt"><a href="#nogo"><img src="/image/article/css_gallery2/g9.jpg" alt="#9" title="#9" /></a></li> <li class="lft"><a href="#nogo"><img src="/image/article/css_gallery2/g10.jpg" alt="#10" title="#10" /></a></li> <li class="rgt"><a href="#nogo"><img src="/image/article/css_gallery2/g11.jpg" alt="#11" title="#11" /></a></li> <li class="lft"><a href="#nogo"><img src="/image/article/css_gallery2/g12.jpg" alt="#12" title="#12" /></a></li> <li class="rgt"><a href="#nogo"><img src="/image/article/css_gallery2/g13.jpg" alt="#13" title="#13" /></a></li> <li class="lft"><a href="#nogo"><img src="/image/article/css_gallery2/g14.jpg" alt="#14" title="#14" /></a></li> <li class="rgt"><a href="#nogo"><img src="/image/article/css_gallery2/g15.jpg" alt="#15" title="#15" /></a></li> <li class="lft"><a href="#nogo"><img src="/image/article/css_gallery2/g16.jpg" alt="#16" title="#16" /></a></li> <li class="rgt"><a href="#nogo"><img src="/image/article/css_gallery2/g17.jpg" alt="#17" title="#17" /></a></li> <li class="pad"></li> <li class="lft"><a href="#nogo"><img src="/image/article/css_gallery2/g18.jpg" alt="#18" title="#18" /></a></li> <li><a href="#nogo"><img src="/image/article/css_gallery2/g19.jpg" alt="#19" title="#19" /></a></li> <li><a href="#nogo"><img src="/image/article/css_gallery2/g20.jpg" alt="#20" title="#20" /></a></li> <li><a href="#nogo"><img src="/image/article/css_gallery2/g21.jpg" alt="#21" title="#21" /></a></li> <li><a href="#nogo"><img src="/image/article/css_gallery2/g22.jpg" alt="#22" title="#22" /></a></li> <li><a href="#nogo"><img src="/image/article/css_gallery2/g23.jpg" alt="#23" title="#23" /></a></li> <li class="rgt"><a href="#nogo"><img src="/image/article/css_gallery2/g24.jpg" alt="#24" title="#24" /></a></li> </ul>

要确认每一个列表元素都是位于同一行，因为将他们分成多行将导致IE浏览器中显示出现不必要的空隙。

查看示例效果3

　　现在每个列表元素都封套了一个超链接。一些没有类的指定，而另一些有'lft'或者'rgt'，分别是'左'和'右'的缩写。我还增加了一个空的列表元素带有class="pad"用来修正ie的一个bug,呆会会有详细说明。

　　我使用href="#nogo"来代替常用的"#"，所以任何对超链接的点击都不会跳到页面的开头（只要确信你的页面中没有一个锚叫做#nogo就OK了）。

　　这个(x)html的无序列表现在已经完成了，我不再需要对它做任何修改。

样式

步骤4

移除那个点点

　　我会设置无序列表的样式来移除那个点和缩进。

　　浏览器会用不同的处理方式(来显示缩进)，ie和Opera使用margin而Mozilla/Netscape/Firefox 采用了padding，所以为了迎合他们，我需要象下面这样来构造样式：

/* 移除列表的点和缩进 */ ul#gallery { padding:0; margin:0; width:448px; height:336px; position:relative; list-style-type:none; background:#888; }

• padding:0; 去除所有的padding
• margin:0; 去除所有的margin
• width:448px; 设置总宽度为 7 x 64px
• height:336px; 设置总高度 7 x 48px
• position:relative; 设置这个ul的位置为相对的，使得我们可以绝对定位图片。
• list-style-type:none; 去掉点点
• background:#888; 设置背景色为暗灰（就现在这样）

查看示例4

　　好了，现在点都被我干掉了，而这个ul的背景灰色也显示出来了。在IE中这个灰色背景将被撑高到容纳所有的图片，然而在其他浏览器，图片会溢出这个灰背景。

步骤5

改变图片的大小

　　这些图片的初始大小将被改成64 x 48px来作为缩略图围绕着显示区域。

　　然而，我还决定让每个图片有1px的框来作为分隔符。为了做到这点，我需要再缩小图片的大小至62 x 46px，样式如下:

/* Resize the images to 64px x 48px */ #gallery a img { position:relative; width:62px; height:46px; border:1px solid #888; z-index:100; }

• position:relative; 只是为了我们可以设置z-index(no purpose other than we can now specify a z-index怎么翻译？)
• width:62px;　设置宽度为62px
• height:46px; 设置高度46px
• border:1px solid #888; 添加1px宽的灰色框
• z-index:100; 设置z-index到100以确保缩略图能够显示在最上层。

查看示例5

　　图片现在被缩小到62 x 46px，并且有1px宽的颜色与背景一致的框。

步骤6

定位缩略图

　　现在，我们要开始将这些缩略图定位到显示区域的边缘。

　　为了做到这个，我们要定义<li>标签的样式。

步骤6a－－移动上面那行的缩略图到位

/* Default style for list items */ #gallery li { width:64px; height:48px; float:left; z-index:100; }

• width:64px; 　设置宽度64px
• height:48px; 设置高度64px
• float:left; 让所有这些图片默认在左侧浮动。
• z-index:100; 确保所有缩略图可视。

　　好了，这些图片已经被分组到四行并且在17和18之间有个空格。

查看示例6a

步骤6b－－移动'lft'的列表元素到左边去

/* Styling the left side of the display area */ #gallery li.lft { float:left; clear:left; }

• float:left;图片浮动到左边去
• clear:left;清除掉任何之前定义漂浮了的图片，让他们显示到底下去。

　　现在有点乱，不过显示区域的左边现在被填充了。

　　IE会添加一个小空格在每个图片的纵向之间，不过这个问题稍后会处理。

查看示例6b

步骤6c－－移动样式为'rgt'的列表元素到右边。

/* Styling the right side of the display area */ #gallery li.rgt { float:right; clear:right; }

• float:right; 移动图片到右边去
• clear:right; 清除所有实现设置浮动的图片，让他们显示到底下去。

　　如果你使用ie,你现在会看见，上面、左边和右边的图片已经在正确的位置了，但是底下那行还不是在底下。其他所有的浏览器会显示正确的顺序。

查看示例6c

　　这里有一个特定的列表元素(class="pad")被借用来播放图片。我们将设置这个样式来强制底部那行图片进入正确位置。

步骤6d－－在ie中移动底下那行到正确位置。

/* Force the bottom row of images into place (IE only) */ #gallery li.pad { height:0; display:block; margin-top:-2px; width:448px; font-size:0; }

• height:0; 让这个<li>不占用这个格子的空间
• display:block; 让这个<li>为块级显示
• margin-top:-2px; 去除顶端的margin(ie默认的margin)
• width:448px; 让这个<li>和<ul>一样宽
• font-size:0; 通过设置字体大小为0来保证这个<li>的高度是0

　　现在底部这行终于归位了，不过在ie中，图片纵向之间的间隙还是要处理。

查看示例6d

步骤6e－－移除IE中图片间隙

/* Getting rid of the image gaps */ #gallery a { position:relative; width:64px; height:48px; display:block; float:left; z-index:100; cursor:default; }

• position:relative; 让我们可以设置z-index
• width:64px; 让每个超链接64px宽
• height:48px; 让每个超链接48px高
• display:block; 让超链接为块级显示
• float:left; 这行用来去除IE中的垂直间隙
• z-index:100; 确保超链接永远在上面
• cursor:default; 修改超链接的鼠标样式(默认手形)为默认的箭头。

查看示例6e

步骤7

添加:hover状态

　　随着所有的缩略图都到了他们围绕显示区域的正确位置，我们可以继续定义这些缩略图的:hover样式。因为这些图片实际上并不是真正意义上的缩略图而只是缩小大小的图片，我们能够放大他们到160 x 120px并重定位他们到显示区域的中心，并在他们的原始位置保留一个空格。然而，如果我们这么作，我们会失去我们的mouseover link，并且这个被选择的图片会在原始位置与新位置之间来回闪烁。

　　为了留住我们的mouseover link，我们必须扩展这个链接的大小到这个<ul>的宽与高。

　　我们能够通过增加link周围的padding来让高变成实际上的336px高，而宽成为448px。

　　另外，这个被选择的链接应该要落到其他超链接背后，因为它不能其他链接，并阻止其他链接被选择。所以我们必须设置被选择的超链接的z-index小于100。

　　在开始下一个单元之前，这个部分的内容应该被完全吸收。

/* Resizing the link on hover */ #gallery a:hover { width:160px; height:120px; padding:108px 144px; position:absolute; left:0; top:0; z-index:20; }

• width:160px; 让这个超链接的宽度更大，能容纳下一半原始大小的图片
• height:120px; 让这个超链接的高度更大，能容纳下一半原始大小的图片
• padding:108px 144px; 添加padding，来使得超链接的尺寸达到448 x 336px
• position:absolute; 允许我们绝对定位我们的超链接
• left:0; 移动超链接到<ul>的左边
• top:0; 移动超链接到<ul>的上边
• z-index:20; 让这个超链接在其他超链接底下（一个更低的层）

查看示例7a

　　这个示例显示：你能够将鼠标移动到任何一个缩略图上，并让它跳到显示区域中并保持hover在这个超链接上。而且它还显示，当你移动鼠标到其他图片上时，其他图片也会跳到显示区域去。

　　我们现在设置缩略图的:hover状态，让他放大到160 x 120px，改变大小的时候我去掉了图片的框。

/* Resizing the thumbnail on hover */ #gallery a:hover img { background:#eee; position:relative; width:160px; height:120px; border:0; z-index:20; }

• background:#eee; 让IE触发:hover样式
• position:relative; 为了定义z-index样式
• width:160px; 设置图片宽度=160px
• height:120px; 设置图片高度=120px
• border:0; 移除缩略图的1px框
• z-index:20; 让这个图片移动到和:hover超链接一样的层。

查看示例7b

现在这个hover图片被放大到原始大小的一半，并被定位于显示区域的中心部分。

步骤8

添加:active和:focus状态

　　IE使用:active伪类但其他所有浏览器使用:focus伪类来作鼠标单击的样式。

　　和:hover样式我们扩大图片区域一样，这次，要扩大到320 x 240px并减小padding到上下48px左右64px，总共是448 x 336px.

　　每个超链接的单击状态必须移动到更低的z-index，所以，它应该低于:hover状态。这段允许所有链接被激活并且允许下一个:hover显示在被“单击”的图片之上。

/* Resizing the link when 'clicked' */ #gallery a:active, #gallery a:focus { background:transparent; width:320px; height:240px; padding:48px 64px; position:absolute; left:0; top:0; z-index:10; }

• background:transparent; 在ie中用来激活:active样式
• width:320px; 设置超链接宽度为320px（和显示区域一样宽）
• height:240px; 设置超链接高度为240px (和显示区域一样高)
• padding:48px 64px; 设置超链接总体大小为　448 x 336 px
• position:absolute; 允许我们绝对定位我们的超链接
• left:0; 移动超链接到<ul>的左边
• top:0; 移动超链接到<ul>的上边
• z-index:10; 让这个超链接在:hover底下（一个更低的层）

查看示例8a

　　我们现在可以设置被“单击”的图片为原始大小 320 x 240px。

/* Resizing the image when 'clicked' */ #gallery a:active img, #gallery a:focus img { background:#eee; position:relative; width:320px; height:240px; border:0; z-index:10; }

• background:#eee; 在ie中被用来激活:active状态
• position:relative; 设置这个，让z-index能够被指定
• width:320px; 设置图片宽度为320px(和显示区域一样宽)
• height:240px; 设置图片高度为240px(和显示区域一样高)
• border:0; 移除1px的框
• z-index:10; 移动图片到和它所在超链接一样的层。

查看示例8b

　　IE的用户也许会注意到一个bug，这个完整大小的被点击图片无法显示，除非鼠标移动到其它图片上。

　　这是一个非常严重的问题，而且我不清楚为什么它会间歇性的发生。幸运的是，有一个很简单的方法（hack）消除这个问题并且不会带给其它浏览器任何麻烦。

/* The 'click' hack for Internet Explorer */ a:visited { color:#000; }

• color:#000; 用来修正ie中的:active样式bug

　　添加这个全局样式后，所有的超链接都没了这个问题，如果谁知道为什么会出现这个问题，请联系我。（子乌注：如果你知道的话，顺便跟帖也告诉我一声）

查看示例8c

步骤9

添加列表的背景

　　现在这个相册已经初具规模，但我们仍然有一个大大空空的显示区域，并且当图片被放大时有一个空格遗留。

　　对<ul>使用一个整体的背景的背景来填充这些空隙是个不错的主意。

　　在我的例子中，我已经创建了一个图片能够保持这些涂鸦场景，并当鼠标划过缩略图时给出一个说明：

　　当然，你可以自行设计你想要的样式。

　　修改ul#gallery的样式，并增加背景。

/* Adding the background image */ ul#gallery { padding:0; margin:0; width:448px; height:336px; position:relative; background:#888 url(../image/g26.jpg); }

• background:#888 url(../image/g26.jpg); 添加这个url给背景图。

查看示例9

　　我们现在已经有了默认图片。

步骤10

Opera不喜欢:focus和:active

　　这是真的。Opera的:active无法工作，并且当鼠标单击并释放时无法保存:focus状态。

　　我们能够让Opera作它自己的事，或者我们能够添加一个hack告诉Opera使用:hover显示完整大小图片而忽略那两个步骤。

　　是的，这是一个专门针对Opera的hack,它是“合法”的css但w3c的验证器无法识别它，因为它只是一个推荐。

/* hack for Opera 7+ */ @media all and (min-width:0px){ #gallery a:hover { background:#888; width:320px; height:240px; padding:48px 64px; position:absolute; left:0; top:0; z-index:10; } #gallery a:hover img { background:#aaa; position:relative; width:320px; height:240px; border:0; z-index:10; } }

只有Opera 7+理解这段条件样式：直接放大hover链接和图片到320x240px(和active/focus链接、图片一样大小)

查看示例10

　　如果你是用Opera 7+，你会看见当鼠标位于缩略图上时显示完整大小图片，以及一个“单击”的声明和灰色的背景。中央的默认图片还是会在它该在的地方，而且当你点击一张图片的时候你不会注意到这个问题。

结束

　　自由使用这个样式来操纵你的图片，或稍微修改适应不同大小甚至不同布局的图片。唯一的限制就是你的想像力。

　　最后一件事：非常感谢提供这些摄影师提供他们免费使用的作品stock.xchng

关于作者

　　Stu的个人站点记录了他对CSS的各种可能性的探索与理解。从标准的超链接到他的奇异的实验性技术。他所有的例子都只使用CSS--没有javascript，或者其他任何语言使用在他的例子里。http://www.cssplay.co.uk/