纯CSS实现相册滑动浏览_3

在ul中我们只应用了一个名为gallery的样式，接下来的CSS都将针对#gallery及其下级元素进行定义。本例中的相册图片都有相同的尺寸320×240，背景图片的尺寸为495×240。注意这里背景图的宽度是根据本例的需要精确定义的，至于如何计算会在例子结束的时候进行说明。现在在浏览器中显示的仅仅是七张带圆点和默认链接边框的图片，接下来看一下#gallery中针对ul的样式设定：

#gallery {
    width:495px;
    height:240px;
    border: 1px solid #888;
    margin:0 auto;
    padding:0;
    list-style:none;
    background:#fff url(windows/win_backh.gif);
}

ul元素的宽和高与背景图的尺寸保持一致，并设置了1px的外边框。本例中通过margin将整个相册居中，消除内填充以及默认的列表圆点符号。原文中#gallery还有一条overflow:hidden;语句，我把它去掉之后，相册效果在IE6和FF中依然正常，不知是不是在其它浏览器中会出现Bug，若你了解个中因由，希望告知本站以及时纠正。