下面，小编带您去了解一下ul结合CSS制作网页相册滑动浏览效果，生活就是不断的发现新事物，get新技能~
英文原文：Sliding Photograph Galleries
翻译整理：西米CC-
效果：
运行代码框
!DOCTYPE html PUBLIC "-//W3C//DTDXHTML1.0 Transitional//EN" "& xmlns="& http-equiv="Content-Type" content="text/html; charset=gb2312" /title别开生面纯CSS实现相册预览 type="text/css"body{: #CC0000;}p {background-color: #F1FAFE;}#gallery {: 1px solid #888;margin:0 auto;# url(/files/080628/1_133958.gif);}#gallery li {float: left;}#gallery li a {display: block;width: 28px;height: 240px;border-right: #fff 1px solid;overflow: hidden;cursor: default;}#gallery li a img {}# li a:hover {width: 320px;}#gallery2 {margin:0 auto; solid #000;background:#fff url(/files/080628/1_134055.gif);}#gallery2 li {}# li a {: hidden; solid #000;}# li a img {}#2 li a:hover {background:#eee;}# li a:hover img {} id="gallery2"lia href="& src="/files/080628/&; alt="ximicc" title="ximicc" //a/lilia href="& src="/files/080628/&; alt="ximicc" title="ximicc" //a/lilia href="& src="/files/080628/&; alt="ximicc" title="ximicc" //a/lilia href="& src="/files/080628/&; alt="ximicc" title="ximicc" //a/li/uldiv align="center"pbr /strong原文地址：a href="&; target="_blank"Sliding Photograph Galleries/a/strongbr /br /strong翻译整理：a href="&; target="_blank"西米CC /a/strong br /br //pbr //divul id="gallery"lia href="& src="/files/080628/&; //a/lilia href="& src="/files/080628/&; //a/lilia href="& src="/files/080628/&; //a/lilia href="& src="/files/080628/&; //a/lilia href="& src="/files/080628/&; //a/lilia href="& src="/files/080628/&; //a/lilia href="& src="/files/080628/&; //a/li/ul/body/html
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
这是一个很简单的纯CSS相册滑动浏览效果，仅用一个无序列表ul结合简单的CSS就可以实现。原文中介绍的纵向滑动相册的实现方法，但是相比之下个人更喜欢横向滑动的那个。两者在缩略图的实现上有所区别，前者是采用收缩原始图片宽度的方法，会给人以很不自然的挤扁的感觉，而后者通过局部显示原始图片达到缩略的效果，虽然这种缩略图不能让我们概览整张图片，但我们可以通过提炼图片重点特征或添加说明文字等方法，来提升浏览者对图片的了解，最重要的是它在视觉协调性上更胜一筹。
首先来看一下XHTML部分，准备好七张相册图片以及一张默认的相册背景图，把它们存储在网站的目录下，如前所述，七张图片的缩略图我们直接通过定义来实现，不需要另外制作。我们以一个作为容器把这几张图片添加到页面中，并设置空链接，当然你也可以在链接中设置具体的地址：
ul id="gallery"
lia href="#"img src="windows/&; //a/li
lia href="#"img src="windows/&; //a/li
lia href="#"img src="windows/&; //a/li
lia href="#"img src="windows/&; //a/li
lia href="#"img src="windows/&; //a/li
lia href="#"img src="windows/&; //a/li
lia href="#"img src="windows/&; //a/li
/ul
在ul中我们只应用了一个名为gallery的样式，接下来的CSS都将针对#gallery及其下级元素进行定义。本例中的相册图片都有相同的尺寸320×240，背景图片的尺寸为495×240。注意这里背景图的宽度是根据本例的需要精确定义的，至于如何计算会在例子结束的时候进行说明。现在在浏览器中显示的仅仅是七张带圆点和默认链接边框的图片，接下来看一下#gallery中针对ul的样式设定：
#gallery {
;
;
border: 1px solid #888;
margin:0 auto;
padding:0;
;
background:#fff url(windows/win_backh.gif);
}
ul元素的宽和高与背景图的尺寸保持一致，并设置了1px的外边框。本例中通过margin将整个相册居中，消除内填充以及默认的列表圆点符号。原文中#gallery还有一条语句，我把它去掉之后，相册效果在和中依然正常，不知是不是在其它浏览器中会出现，若你了解个中因由，希望告知本站以及时纠正。
