你将学会如何只用无序列表(ul)的图片和一个样式表来创建一个高质量的相册,你会经历这个相册构造的每一个步骤:
最开始的无序列表
运行代码框
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
运行代码框
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
每一个步骤都将被详细解释并有一个范例页面显示这附加的样式。这样你就能够明白到底发生了些什么。 这个相册能够工作在所有最新的浏览器上,并且我已经加入了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)
任何时候都可以为了适应任何质量的图片来改变这个布局,但一定要考虑下载图片所需要的时间。
出处:蓝色理想
责任编辑:moby
上一页 下一页 XHTML+CSS创建“两步式”的相册 [2]
◎进入论坛网络编程版块参加讨论
|