如何使用CSS创建一个“两步式”的相册
作者:stu@s7u.co.uk
简介:
原文出处:
说明:05.09.13
翻译:子乌
（子乌注：这篇文章实现的效果很炫，不敢一个人独享，就试着翻译出来。我的英语很烂，翻译得不怎么样，大家将就着看吧－－现在能够体会阿捷的辛苦了，我还只是随便翻翻就花了我三个小时时间...）
介绍：
随着我上一篇文章《如何使用CSS创建相册》的成功，我更进一步，用了一个新方法：不需要缩略图，并且采用两步式来显示图片。当鼠标移动到缩略图上时显示原图一半大小的图片，而当鼠标点击的时候，显示完整大小。
和上一篇文章一样，你将学会如何只用无序列表(ul)的图片和一个样式表来创建一个高质量的相册，你会经历这个相册构造的每一个步骤：
最开始的无序列表
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<body>
<h2>A 'Two Step' CSS Photograph Gallery</h2>
<h3>Basic List</h3>
<h4>by Stu Nicholls</h4>
<ul id="gallery">
<li><img src="http://sheneyan.com/image/article/css_gallery2/g1.jpg" alt="#1" title="#1" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g2.jpg" alt="#2" title="#2" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g3.jpg" alt="#3" title="#3" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g4.jpg" alt="#4" title="#4" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g5.jpg" alt="#5" title="#5" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g6.jpg" alt="#6" title="#6" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g7.jpg" alt="#7" title="#7" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g8.jpg" alt="#8" title="#8" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g9.jpg" alt="#9" title="#9" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g10.jpg" alt="#10" title="#10" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g11.jpg" alt="#11" title="#11" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g12.jpg" alt="#12" title="#12" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g13.jpg" alt="#13" title="#13" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g14.jpg" alt="#14" title="#14" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g15.jpg" alt="#15" title="#15" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g16.jpg" alt="#16" title="#16" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g17.jpg" alt="#17" title="#17" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g18.jpg" alt="#18" title="#18" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g19.jpg" alt="#19" title="#19" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g20.jpg" alt="#20" title="#20" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g21.jpg" alt="#21" title="#21" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g22.jpg" alt="#22" title="#22" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g23.jpg" alt="#23" title="#23" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g24.jpg" alt="#24" title="#24" /></li>
</ul>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title> A 'Two Step' CSS Photograph Gallery </title>
<style type="text/css">
ul#gallery {
padding:0;
margin:0;
width:448px;
height:336px;
position:relative;
background:#888 url(http://sheneyan.com/image/article/css_gallery2/g26.jpg);
}
#gallery li {
list-style-type:none;
width:64px;
height:48px;
float:left;
z-index:100;
}
#gallery li.lft {
float:left;
clear:left;
}
#gallery li.rgt {
float:right;
clear:right;
}
#gallery a {
position:relative;
width:64px;
height:48px;
display:block;
float:left;
z-index:100;
cursor:default;
}
#gallery a img {
position:relative;
width:62px;
height:46px;
border:1px solid #888;
z-index:100;
}
#gallery a:hover {
width:160px;
height:120px;
padding:108px 144px;
position:absolute;
left:0;
top:0;
z-index:20;
}
#gallery a:hover img {
background:#eee;
position:relative;
width:160px;
height:120px;
border:0;
z-index:20;
}
#gallery a:active, #gallery a:focus {
background:transparent;
width:320px;
height:240px;
padding:48px 64px;
position:absolute;
left:0;
top:0;
z-index:10;
}
#gallery a:active img, #gallery a:focus img {
background:#eee;
position:relative;
width:320px;
height:239px;
border:0;
z-index:10;
}
/* hack for Internet Explorer */
#gallery li.pad {
height:0;
display:block;
margin-top:-2px;
width:448px;
font-size:0;
}
a:visited {color:#000;}
/* 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;
}
}
</style>
</head>
<body>
<h2>A 'Two Step' CSS Photograph Gallery</h2>
<h3>Styled with CSS only</h3>
<h4>by Stu Nicholls</h4>
<ul id="gallery">
<li><a href="#nogo">
<img src="http://sheneyan.com/image/article/css_gallery2/g1.jpg" alt="#1" title="#1" /></a></li>
<li><a href="#nogo">
<img src="http://sheneyan.com/image/article/css_gallery2/g2.jpg" alt="#2" title="#2" /></a></li>
<li><a href="#nogo">
<img src="http://sheneyan.com/image/article/css_gallery2/g3.jpg" alt="#3" title="#3" /></a></li>
<li><a href="#nogo">
<img src="http://sheneyan.com/image/article/css_gallery2/g4.jpg" alt="#4" title="#4" /></a></li>
<li><a href="#nogo">
<img src="http://sheneyan.com/image/article/css_gallery2/g5.jpg" alt="#5" title="#5" /></a></li>
<li><a href="#nogo">
<img src="http://sheneyan.com/image/article/css_gallery2/g6.jpg" alt="#6" title="#6" /></a></li>
<li class="rgt"><a href="#nogo">
<img src="http://sheneyan.com/image/article/css_gallery2/g7.jpg" alt="#7" title="#7" /></a></li>
<li class="lft"><a href="#nogo">
<img src="http://sheneyan.com/image/article/css_gallery2/g8.jpg" alt="#8" title="#8" /></a></li>
<li class="rgt"><a href="#nogo">
<img src="http://sheneyan.com/image/article/css_gallery2/g9.jpg" alt="#9" title="#9" /></a></li>
<li class="lft"><a href="#nogo">
<img src="http://sheneyan.com/image/article/css_gallery2/g10.jpg" alt="#10" title="#10" /></a></li>
<li class="rgt"><a href="#nogo">
<img src="http://sheneyan.com/image/article/css_gallery2/g11.jpg" alt="#11" title="#11" /></a></li>
<li class="lft"><a href="#nogo">
<img src="http://sheneyan.com/image/article/css_gallery2/g12.jpg" alt="#12" title="#12" /></a></li>
<li class="rgt"><a href="#nogo">
<img src="http://sheneyan.com/image/article/css_gallery2/g13.jpg" alt="#13" title="#13" /></a></li>
<li class="lft"><a href="#nogo">
<img src="http://sheneyan.com/image/article/css_gallery2/g14.jpg" alt="#14" title="#14" /></a></li>
<li class="rgt"><a href="#nogo">
<img src="http://sheneyan.com/image/article/css_gallery2/g15.jpg" alt="#15" title="#15" /></a></li>
<li class="lft"><a href="#nogo">
<img src="http://sheneyan.com/image/article/css_gallery2/g16.jpg" alt="#16" title="#16" /></a></li>
<li class="rgt"><a href="#nogo">
<img src="http://sheneyan.com/image/article/css_gallery2/g17.jpg" alt="#17" title="#17" /></a></li>
<li class="pad"></li>
<li class="lft"><a href="#nogo">
<img src="http://sheneyan.com/image/article/css_gallery2/g18.jpg" alt="#18" title="#18" /></a></li>
<li><a href="#nogo">
<img src="http://sheneyan.com/image/article/css_gallery2/g19.jpg" alt="#19" title="#19" /></a></li>
<li><a href="#nogo">
<img src="http://sheneyan.com/image/article/css_gallery2/g20.jpg" alt="#20" title="#20" /></a></li>
<li><a href="#nogo">
<img src="http://sheneyan.com/image/article/css_gallery2/g21.jpg" alt="#21" title="#21" /></a></li>
<li><a href="#nogo">
<img src="http://sheneyan.com/image/article/css_gallery2/g22.jpg" alt="#22" title="#22" /></a></li>
<li><a href="#nogo">
<img src="http://sheneyan.com/image/article/css_gallery2/g23.jpg" alt="#23" title="#23" /></a></li>
<li class="rgt"><a href="#nogo">
<img src="http://sheneyan.com/image/article/css_gallery2/g24.jpg" alt="#24" title="#24" /></a></li>
</ul>
<h4>Instructions</h4>
<ol>
<li>Hover your mouse over the outer thumbnail images for a half size photo</li>
<li>Click your mouse to enlarge the half size image to full size.</li>
</ol>
<p>The 'clicked' full size image will remain in the gallery until you select another
'clicked' image or click again outside of the gallery.</p>
<p>Opera and Safari require the mouse click to be held for the full size image.</p>
</body>
</html>
每一个步骤都将被详细解释并有一个范例页面显示这附加的样式。这样你就能够明白到底发生了些什么。
这个相册能够工作在所有最新的浏览器上，并且我已经加入了hack使得ie5.5能够正确显示这些样式。样式并不大也不复杂，但是这个布局需要大量的精力用于细节与事先计划。
方法
步骤１
----------
图像
为了这个相册，我准备了24个街头涂鸦的图片，每个的大小都是320x240px，我基于底下这些理由选择这个大小：
每个图片的文件大小需要都差不多小，使得所有图片能够在这个相册跑起来之前都加载完毕。
由于缩略图围绕着显示区域，对于这7x7的格子来说，很容易算出这个缩略图的大小是64x48px。
横向有５个缩略图跨过320px宽的显示区域(320px/5=64px)。
纵向有５个缩略图跨过240px高的显示区域(240px/5=48px)。
每个角落都会有１个缩略图，所以总共是２４个缩略图(5+5+5+5+4=24)
任何时候都可以为了适应任何质量的图片来改变这个布局，但一定要考虑下载图片所需要的时间。
基本的(x)html列表如下.
<ul id="gallery">
<li><img src="http://sheneyan.com/image/article/css_gallery2/g1.jpg" alt="#1" title="#1" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g2.jpg" alt="#2" title="#2" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g3.jpg" alt="#3" title="#3" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g4.jpg" alt="#4" title="#4" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g5.jpg" alt="#5" title="#5" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g6.jpg" alt="#6" title="#6" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g7.jpg" alt="#7" title="#7" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g8.jpg" alt="#8" title="#8" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g9.jpg" alt="#9" title="#9" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g10.jpg" alt="#10" title="#10" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g11.jpg" alt="#11" title="#11" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g12.jpg" alt="#12" title="#12" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g13.jpg" alt="#13" title="#13" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g14.jpg" alt="#14" title="#14" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g15.jpg" alt="#15" title="#15" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g16.jpg" alt="#16" title="#16" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g17.jpg" alt="#17" title="#17" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g18.jpg" alt="#18" title="#18" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g19.jpg" alt="#19" title="#19" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g20.jpg" alt="#20" title="#20" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g21.jpg" alt="#21" title="#21" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g22.jpg" alt="#22" title="#22" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g23.jpg" alt="#23" title="#23" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g24.jpg" alt="#24" title="#24" /></li>
</ul>
步骤２
----------
文档格式声明
首先要作的，也是最重要的，就是确认你使用了正确的(X)HTML !DOCTYPE，如果没有这玩意儿，绝大部分的浏览器将会被抛入“quirks”模式并引出各种各样的
不兼容问题。W3C QA - List of valid DTDs列出了所有能够被引用的正确的文档格式声明。对于这个样式表，使用XHTML1.0或者1.1会更加合适。我自己所有的网页都使用XHTML1.1。
步骤３
----------
添加超链接和样式信息
为了使用:hover伪类，我需要将这个基本的无序列表改变成一个超链接的无序列表。那是因为IE浏览器只允许:hover伪类在超链接上使用。我同样需要添加额外的声明来指向特定的图片。
现在(x)html看起来就像这样：
<ul id="gallery">
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g1.jpg" alt="#1" title="#1" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g2.jpg" alt="#2" title="#2" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g3.jpg" alt="#3" title="#3" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g4.jpg" alt="#4" title="#4" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g5.jpg" alt="#5" title="#5" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g6.jpg" alt="#6" title="#6" /></a></li>
<li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g7.jpg" alt="#7" title="#7" /></a></li>
<li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g8.jpg" alt="#8" title="#8" /></a></li>
<li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g9.jpg" alt="#9" title="#9" /></a></li>
<li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g10.jpg" alt="#10" title="#10" /></a></li>
<li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g11.jpg" alt="#11" title="#11" /></a></li>
<li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g12.jpg" alt="#12" title="#12" /></a></li>
<li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g13.jpg" alt="#13" title="#13" /></a></li>
<li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g14.jpg" alt="#14" title="#14" /></a></li>
<li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g15.jpg" alt="#15" title="#15" /></a></li>
<li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g16.jpg" alt="#16" title="#16" /></a></li>
<li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g17.jpg" alt="#17" title="#17" /></a></li>
<li class="pad"></li>
<li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g18.jpg" alt="#18" title="#18" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g19.jpg" alt="#19" title="#19" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g20.jpg" alt="#20" title="#20" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g21.jpg" alt="#21" title="#21" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g22.jpg" alt="#22" title="#22" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g23.jpg" alt="#23" title="#23" /></a></li>
<li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g24.jpg" alt="#24" title="#24" /></a></li>
</ul>
要确认每一个列表元素都是位于同一行，因为将他们分成多行将导致IE浏览器中显示出现不必要的空隙。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title> A 'Two Step' CSS Photograph Gallery </title>
</head>
<body>
<h2>A 'Two Step' CSS Photograph Gallery</h2>
<h3>Style Ready List</h3>
<h4>by Stu Nicholls</h4>
<ul id="gallery">
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g1.jpg" alt="#1" title="#1" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g2.jpg" alt="#2" title="#2" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g3.jpg" alt="#3" title="#3" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g4.jpg" alt="#4" title="#4" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g5.jpg" alt="#5" title="#5" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g6.jpg" alt="#6" title="#6" /></a></li>
<li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g7.jpg" alt="#7" title="#7" /></a></li>
<li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g8.jpg" alt="#8" title="#8" /></a></li>
<li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g9.jpg" alt="#9" title="#9" /></a></li>
<li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g10.jpg" alt="#10" title="#10" /></a></li>
<li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g11.jpg" alt="#11" title="#11" /></a></li>
<li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g12.jpg" alt="#12" title="#12" /></a></li>
<li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g13.jpg" alt="#13" title="#13" /></a></li>
<li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g14.jpg" alt="#14" title="#14" /></a></li>
<li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g15.jpg" alt="#15" title="#15" /></a></li>
<li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g16.jpg" alt="#16" title="#16" /></a></li>
<li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g17.jpg" alt="#17" title="#17" /></a></li>
<li class="pad"></li>
<li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g18.jpg" alt="#18" title="#18" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g19.jpg" alt="#19" title="#19" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g20.jpg" alt="#20" title="#20" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g21.jpg" alt="#21" title="#21" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g22.jpg" alt="#22" title="#22" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g23.jpg" alt="#23" title="#23" /></a></li>
<li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g24.jpg" alt="#24" title="#24" /></a></li>
</ul>
</body>
</html>
现在每个列表元素都封套了一个超链接。一些没有类的指定，而另一些有'lft'或者'rgt'，分别是'左'和'右'的缩写。我还增加了一个空的列表元素带有class="pad"用来修正ie的一个bug,呆会会有详细说明。
我使用href="#nogo"来代替常用的"#"，所以任何对超链接的点击都不会跳到页面的开头（只要确信你的页面中没有一个锚叫做#nogo就OK了）。
这个(x)html的无序列表现在已经完成了，我不再需要对它做任何修改。
样式
步骤４
----------
移除那个点点
我会设置无序列表的样式来移除那个点和缩进。
浏览器会用不同的处理方式(来显示缩进)，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的例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title> A 'Two Step' CSS Photograph Gallery </title>
<style type="text/css">
ul#gallery {
padding:0;
margin:0;
width:448px;
height:336px;
position:relative;
list-style-type:none;
background:#888;
}
</style>
</head>
<body>
<h2>A 'Two Step' CSS Photograph Gallery</h2>
<h3>Step 4 - Removing the bullets</h3>
<h4>by Stu Nicholls</h4>
<ul id="gallery">
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g1.jpg" alt="#1" title="#1" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g2.jpg" alt="#2" title="#2" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g3.jpg" alt="#3" title="#3" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g4.jpg" alt="#4" title="#4" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g5.jpg" alt="#5" title="#5" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g6.jpg" alt="#6" title="#6" /></a></li>
<li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g7.jpg" alt="#7" title="#7" /></a></li>
<li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g8.jpg" alt="#8" title="#8" /></a></li>
<li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g9.jpg" alt="#9" title="#9" /></a></li>
<li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g10.jpg" alt="#10" title="#10" /></a></li>
<li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g11.jpg" alt="#11" title="#11" /></a></li>
<li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g12.jpg" alt="#12" title="#12" /></a></li>
<li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g13.jpg" alt="#13" title="#13" /></a></li>
<li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g14.jpg" alt="#14" title="#14" /></a></li>
<li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g15.jpg" alt="#15" title="#15" /></a></li>
<li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g16.jpg" alt="#16" title="#16" /></a></li>
<li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g17.jpg" alt="#17" title="#17" /></a></li>
<li class="pad"></li>
<li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g18.jpg" alt="#18" title="#18" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g19.jpg" alt="#19" title="#19" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g20.jpg" alt="#20" title="#20" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g21.jpg" alt="#21" title="#21" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g22.jpg" alt="#22" title="#22" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g23.jpg" alt="#23" title="#23" /></a></li>
<li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g24.jpg" alt="#24" title="#24" /></a></li>
</ul>
</body>
</html>
好了，现在点都被我干掉了，而这个ul的背景灰色也显示出来了。在IE中这个灰色背景将被撑高到容纳所有的图片，然而在其他浏览器，图片会溢出这个灰背景。
步骤５
----------
改变图片的大小
这些图片的初始大小将被改成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以确保缩略图能够显示在最上层。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title> A 'Two Step' CSS Photograph Gallery </title>
<style type="text/css">
ul#gallery {
padding:0;
margin:0;
width:448px;
height:336px;
position:relative;
list-style-type:none;
background:#888;
}
#gallery a img {
position:relative;
width:62px;
height:46px;
border:1px solid #888;
z-index:100;
}
</style>
</head>
<body>
<h2>A 'Two Step' CSS Photograph Gallery</h2>
<h3>Step 5 - Resizing the images</h3>
<h4>by Stu Nicholls</h4>
<ul id="gallery">
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g1.jpg" alt="#1" title="#1" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g2.jpg" alt="#2" title="#2" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g3.jpg" alt="#3" title="#3" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g4.jpg" alt="#4" title="#4" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g5.jpg" alt="#5" title="#5" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g6.jpg" alt="#6" title="#6" /></a></li>
<li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g7.jpg" alt="#7" title="#7" /></a></li>
<li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g8.jpg" alt="#8" title="#8" /></a></li>
<li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g9.jpg" alt="#9" title="#9" /></a></li>
<li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g10.jpg" alt="#10" title="#10" /></a></li>
<li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g11.jpg" alt="#11" title="#11" /></a></li>
<li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g12.jpg" alt="#12" title="#12" /></a></li>
<li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g13.jpg" alt="#13" title="#13" /></a></li>
<li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g14.jpg" alt="#14" title="#14" /></a></li>
<li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g15.jpg" alt="#15" title="#15" /></a></li>
<li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g16.jpg" alt="#16" title="#16" /></a></li>
<li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g17.jpg" alt="#17" title="#17" /></a></li>
<li class="pad"></li>
<li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g18.jpg" alt="#18" title="#18" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g19.jpg" alt="#19" title="#19" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g20.jpg" alt="#20" title="#20" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g21.jpg" alt="#21" title="#21" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g22.jpg" alt="#22" title="#22" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g23.jpg" alt="#23" title="#23" /></a></li>
<li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g24.jpg" alt="#24" title="#24" /></a></li>
</ul>
</body>
</html>
图片现在被缩小到62 x 46px，并且有1px宽的颜色与背景一致的框。
步骤６
----------
定位缩略图
现在，我们要开始将这些缩略图定位到显示区域的边缘。
为了做到这个，我们要定义<li>标签的样式。
步骤６ａ－－移动上面那行的缩略图到位
/* Default style for list items */
#gallery li {
width:64px;
height:48px;
float:left;
z-index:100;
}
width:64px; 设置宽度64px
height:48px; 设置高度48px
float:left; 让所有这些图片默认在左侧浮动。
z-index:100; 确保所有缩略图可视。
好了，这些图片已经被分组到四行并且在１７和１８之间有个空格。
步骤６ａ示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title> A 'Two Step' CSS Photograph Gallery </title>
<style type="text/css">
ul#gallery {
padding:0;
margin:0;
width:448px;
height:336px;
position:relative;
list-style-type:none;
background:#888;
}
#gallery li {
width:64px;
height:48px;
float:left;
z-index:100;
}
#gallery a img {
position:relative;
width:62px;
height:46px;
border:1px solid #888;
z-index:100;
}
</style>
</head>
<body>
<h2>A 'Two Step' CSS Photograph Gallery</h2>
<h3>Step 6a - Positioning the thumbnails - float left</h3>
<h4>by Stu Nicholls</h4>
<ul id="gallery">
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g1.jpg" alt="#1" title="#1" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g2.jpg" alt="#2" title="#2" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g3.jpg" alt="#3" title="#3" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g4.jpg" alt="#4" title="#4" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g5.jpg" alt="#5" title="#5" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g6.jpg" alt="#6" title="#6" /></a></li>
<li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g7.jpg" alt="#7" title="#7" /></a></li>
<li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g8.jpg" alt="#8" title="#8" /></a></li>
<li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g9.jpg" alt="#9" title="#9" /></a></li>
<li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g10.jpg" alt="#10" title="#10" /></a></li>
<li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g11.jpg" alt="#11" title="#11" /></a></li>
<li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g12.jpg" alt="#12" title="#12" /></a></li>
<li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g13.jpg" alt="#13" title="#13" /></a></li>
<li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g14.jpg" alt="#14" title="#14" /></a></li>
<li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g15.jpg" alt="#15" title="#15" /></a></li>
<li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g16.jpg" alt="#16" title="#16" /></a></li>
<li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g17.jpg" alt="#17" title="#17" /></a></li>
<li class="pad"></li>
<li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g18.jpg" alt="#18" title="#18" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g19.jpg" alt="#19" title="#19" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g20.jpg" alt="#20" title="#20" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g21.jpg" alt="#21" title="#21" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g22.jpg" alt="#22" title="#22" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g23.jpg" alt="#23" title="#23" /></a></li>
<li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g24.jpg" alt="#24" title="#24" /></a></li>
</ul>
</body>
</html>
步骤６ｂ－－移动'lft'的列表元素到左边去
/* Styling the left side of the display area */
#gallery li.lft {
float:left;
clear:left;
}
float:left;图片漂到左边去
clear:left;清除掉任何之前定义漂浮了的图片，让他们显示到底下去。
现在有点乱，不过显示区域的左边现在被填充了。
IE会添加一个小空格在每个图片的纵向之间，不过这个问题稍后会处理。
步骤６ｂ示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title> A 'Two Step' CSS Photograph Gallery </title>
<style type="text/css">
ul#gallery {
padding:0;
margin:0;
width:448px;
height:336px;
position:relative;
list-style-type:none;
background:#888;
}
#gallery li {
width:64px;
height:48px;
float:left;
z-index:100;
}
#gallery li.lft {
float:left;
clear:left;
}
#gallery a img {
position:relative;
width:62px;
height:46px;
border:1px solid #888;
z-index:100;
}
</style>
</head>
<body>
<h2>A 'Two Step' CSS Photograph Gallery</h2>
<h3>Step 6a - Positioning the thumbnails - left side</h3>
<h4>by Stu Nicholls</h4>
<ul id="gallery">
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g1.jpg" alt="#1" title="#1" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g2.jpg" alt="#2" title="#2" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g3.jpg" alt="#3" title="#3" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g4.jpg" alt="#4" title="#4" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g5.jpg" alt="#5" title="#5" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g6.jpg" alt="#6" title="#6" /></a></li>
<li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g7.jpg" alt="#7" title="#7" /></a></li>
<li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g8.jpg" alt="#8" title="#8" /></a></li>
<li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g9.jpg" alt="#9" title="#9" /></a></li>
<li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g10.jpg" alt="#10" title="#10" /></a></li>
<li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g11.jpg" alt="#11" title="#11" /></a></li>
<li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g12.jpg" alt="#12" title="#12" /></a></li>
<li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g13.jpg" alt="#13" title="#13" /></a></li>
<li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g14.jpg" alt="#14" title="#14" /></a></li>
<li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g15.jpg" alt="#15" title="#15" /></a></li>
<li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g16.jpg" alt="#16" title="#16" /></a></li>
<li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g17.jpg" alt="#17" title="#17" /></a></li>
<li class="pad"></li>
<li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g18.jpg" alt="#18" title="#18" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g19.jpg" alt="#19" title="#19" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g20.jpg" alt="#20" title="#20" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g21.jpg" alt="#21" title="#21" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g22.jpg" alt="#22" title="#22" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g23.jpg" alt="#23" title="#23" /></a></li>
<li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g24.jpg" alt="#24" title="#24" /></a></
li></ul>
</body>
</html>
步骤６ｃ－－移动样式为'rgt'的列表元素到右边。
/* Styling the right side of the display area */
#gallery li.rgt {
float:right;
clear:right;
}
float:right; 移动图片到右边去
clear:right; 清除所有实现设置浮动的图片，让他们显示到底下去。
如果你使用ie,你现在会看见，上面、左边和右边的图片已经在正确的位置了，但是底下那行还不是在底下。其他所有的浏览器会显示正确的顺序。
步骤６ｃ示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title> A 'Two Step' CSS Photograph Gallery </title>
<style type="text/css">
ul#gallery {
padding:0;
margin:0;
width:448px;
height:336px;
position:relative;
list-style-type:none;
background:#888;
}
#gallery li {
width:64px;
height:48px;
float:left;
z-index:100;
}
#gallery li.lft {
float:left;
clear:left;
}
#gallery li.rgt {
float:right;
clear:right;
}
#gallery a img {
position:relative;
width:62px;
height:46px;
border:1px solid #888;
z-index:100;
}
</style>
</head>
<body>
<h2>A 'Two Step' CSS Photograph Gallery</h2>
<h3>Step 6c - Positioning the thumbnails - right side</h3>
<h4>by Stu Nicholls</h4>
<ul id="gallery">
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g1.jpg" alt="#1" title="#1" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g2.jpg" alt="#2" title="#2" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g3.jpg" alt="#3" title="#3" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g4.jpg" alt="#4" title="#4" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g5.jpg" alt="#5" title="#5" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g6.jpg" alt="#6" title="#6" /></a></li>
<li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g7.jpg" alt="#7" title="#7" /></a></li>
<li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g8.jpg" alt="#8" title="#8" /></a></li>
<li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g9.jpg" alt="#9" title="#9" /></a></li>
<li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g10.jpg" alt="#10" title="#10" /></a></li>
<li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g11.jpg" alt="#11" title="#11" /></a></li>
<li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g12.jpg" alt="#12" title="#12" /></a></li>
<li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g13.jpg" alt="#13" title="#13" /></a></li>
<li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g14.jpg" alt="#14" title="#14" /></a></li>
<li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g15.jpg" alt="#15" title="#15" /></a></li>
<li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g16.jpg" alt="#16" title="#16" /></a></li>
<li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g17.jpg" alt="#17" title="#17" /></a></li>
<li class="pad"></li>
<li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g18.jpg" alt="#18" title="#18" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g19.jpg" alt="#19" title="#19" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g20.jpg" alt="#20" title="#20" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g21.jpg" alt="#21" title="#21" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g22.jpg" alt="#22" title="#22" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g23.jpg" alt="#23" title="#23" /></a></li>
<li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g24.jpg" alt="#24" title="#24" /></a></li>
</ul>
<p>Internet Explorer will have the bottom row out of position. Other browsers will be correctly positioned.</p>
</body>
</html>
这里有一个特定的列表元素(class="pad")被借用来播放图片。我们将设置这个样式来强制底部那行图片进入正确位置。
步骤６ｄ－－在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; 通过设置字体大小为０来保证这个<li>的高度是０
现在底部这行终于归位了，不过在ie中，图片纵向之间的间隙还是要处理。
步骤６ｄ示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title> A 'Two Step' CSS Photograph Gallery </title>
<style type="text/css">
ul#gallery {
padding:0;
margin:0;
width:448px;
height:336px;
position:relative;
list-style-type:none;
background:#888;
}
#gallery li {
width:64px;
height:48px;
float:left;
z-index:100;
}
#gallery li.lft {
float:left;
clear:left;
}
#gallery li.rgt {
float:right;
clear:right;
}
#gallery a img {
position:relative;
width:62px;
height:46px;
border:1px solid #888;
z-index:100;
}
#gallery li.pad {
height:0;
display:block;
margin-top:-2px;
width:448px;
font-size:0;
}
</style>
</head>
<body>
<h2>A 'Two Step' CSS Photograph Gallery</h2>
<h3>Step 6d - Positioning the thumbnails - bottom row for Internet Explorer</h3>
<h4>by Stu Nicholls</h4>
<ul id="gallery">
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g1.jpg" alt="#1" title="#1" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g2.jpg" alt="#2" title="#2" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g3.jpg" alt="#3" title="#3" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g4.jpg" alt="#4" title="#4" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g5.jpg" alt="#5" title="#5" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g6.jpg" alt="#6" title="#6" /></a></li>
<li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g7.jpg" alt="#7" title="#7" /></a></li>
<li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g8.jpg" alt="#8" title="#8" /></a></li>
<li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g9.jpg" alt="#9" title="#9" /></a></li>
<li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g10.jpg" alt="#10" title="#10" /></a></li>
<li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g11.jpg" alt="#11" title="#11" /></a></li>
<li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g12.jpg" alt="#12" title="#12" /></a></li>
<li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g13.jpg" alt="#13" title="#13" /></a></li>
<li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g14.jpg" alt="#14" title="#14" /></a></li>
<li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g15.jpg" alt="#15" title="#15" /></a></li>
<li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g16.jpg" alt="#16" title="#16" /></a></li>
<li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g17.jpg" alt="#17" title="#17" /></a></li>
<li class="pad"></li>
<li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g18.jpg" alt="#18" title="#18" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g19.jpg" alt="#19" title="#19" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g20.jpg" alt="#20" title="#20" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g21.jpg" alt="#21" title="#21" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g22.jpg" alt="#22" title="#22" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g23.jpg" alt="#23" title="#23" /></a></li>
<li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g24.jpg" alt="#24" title="#24" /></a></li>
</ul>
<p>Note the gaps in vertical positioning in Internet Explorer.</p>
</body>
</html>
步骤６ｅ－－移除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; 修改超链接的鼠标样式(默认手形)为默认的箭头。
