如何使用Lightbox 2(2)

清单 2 是该示例页面的 CSS。

清单 2. 示例图片库的 CSS * { border: 0; margin: 0; padding: 0; }

body { background: #fff; color: #777; padding: 50px; }

#page {

position: relative; }

#images {

float: left; width: 600px; }

#details {

color: #000; } h1 { background: inherit; border-bottom: 1px dashed #ccc; color: #933; font: 32px Georgia, serif; font-weight: bold;

margin: 0 0 20px; padding: 0 0 15px; text-align: center; }

.gallery {

width: 700px; cursor: default; list-style: none; }

.gallery img { background: #fff; border-color: #aaa #ccc #ddd #bbb; border-style: solid; border-width: 1px; color: inherit; padding: 2px; vertical-align: top; width: 100px; height: 75px;

}

.gallery li { background: #eee; border-color: #ddd #bbb #aaa #ccc; border-style: solid; border-width: 1px; color: inherit; display: inline; float: left; margin: 3px; padding: 5px; position: relative; }

确保 HTML 和 CSS 准备到位，并且已经从 参考资料 小节下载了需要引用的图片。然后，上传刚才创建的 HTML。您应该会看到如图 4 所示的页面。

图 4. 用 Lightbox 生成的图片库

这是完美的 Lightbox 页面：展示了很多图片，并且图片的分辨率很高。如果相片的尺寸大一些的话效果会更好，但在主 HTML 内显示全尺寸的图片会浪费大量空间。

回页首

将 Lightbox 添加到图片库页面

有了实际的页面之后，就可以将刚才提到的脚本引用放置到适当的位置。然后，只需要几个简单的步骤，您就可以在您 创建的站点上看到 Lightbox 的效果。 引用正确的脚本

首先，打开 index.html（或您给示例图片库起的其他名字）。在 head 部分，添加清单 3 中的代码行。

清单 3. 引用 Lightbox 脚本（在上下文中）