步骤9
----------
添加列表的背景
现在这个相册已经初具规模,但我们仍然有一个大大空空的显示区域,并且当图片被放大时有一个空格遗留。
对<ul>使用一个整体的背景的背景来填充这些空隙是个不错的主意。
在我的例子中,我已经创建了一个图片能够保持这些涂鸦场景,并当鼠标划过缩略图时给出一个说明:单击这里。
[img]../image/g26.jpg[/img]
当然,你可以自行设计你想要的样式。
修改ul#gallery的样式,并增加背景。
/* Adding the background image */ ul#gallery { padding:0; margin:0; width:448px; height:336px; position:relative; background:#888 url(../image/g26.jpg); }
background:#888 url(../image/g26.jpg); 添加这个url给背景图。
步骤9示例:
运行代码框 [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
我们现在已经有了默认图片。
步骤10
----------
Opera不喜欢:focus和:active 这是真的。Opera的:active无法工作,并且当鼠标单击并释放时无法保存:focus状态。
我们能够让Opera作它自己的事,或者我们能够添加一个hack告诉Opera使用:hover显示完整大小图片而忽略那两个步骤。
是的,这是一个专门针对Opera的hack,它是“合法”的css但w3c的验证器无法识别它,因为它只是一个推荐。
/* 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; } }
只有 Opera 7+理解这段条件样式:直接放大hover链接和图片到320x240px(和active/focus链接、图片一样大小)
运行代码框 [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
如果你是用Opera 7+,你会看见当鼠标位于缩略图上时显示完整大小图片,以及一个“单击”的声明和灰色的背景。The central default images is still in place and if you should click an image then you will not notice the problem(没opera,不理解这句话什么意思...)
结束
自由使用这个样式来操纵你的图片,或稍微修改适应不同大小甚至不同布局的图片。唯一的限制就是你的想像力。
最后一件事:非常感谢提供这些摄影师提供他们免费使用的作品stock.xchng
关于作者
Stu的个人站点记录了他对CSS的各种可能性的探索与理解。从标准的超链接到他的奇异的实验性技术。他所有的例子都只使用CSS--没有javascript,或者其他任何语言使用在他的例子里。http://www.cssplay.co.uk/
出处:蓝色理想
责任编辑:moby
上一页 XHTML+CSS创建“两步式”的相册 [8] 下一页
◎进入论坛网络编程 版块参加讨论