XHTML+CSS创建“两步式”的相册

　XHTML+CSS创建“两步式”的相册

作者：Sheneyan　时间： 2005-09-15　文档类型：翻译　来自：蓝色理想

第 1 页 XHTML+CSS创建“两步式”的相册 [1]
第 2 页 XHTML+CSS创建“两步式”的相册 [2]
第 3 页 XHTML+CSS创建“两步式”的相册 [3]
第 4 页 XHTML+CSS创建“两步式”的相册 [4]
第 5 页 XHTML+CSS创建“两步式”的相册 [5]
第 6 页 XHTML+CSS创建“两步式”的相册 [6]
第 7 页 XHTML+CSS创建“两步式”的相册 [7]
第 8 页 XHTML+CSS创建“两步式”的相册 [8]
第 9 页 XHTML+CSS创建“两步式”的相册 [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给背景图。

步骤９示例：

运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" /> <title> A 'Two Step' CSS Photograph Gallery </title> <style type="text/css"> ul#gallery { padding:0; margin:0; width:448px; height:336px; position:relative; list-style-type:none; background:#888 url(http://sheneyan.com/image/article/css_gallery2/g26.jpg); } #gallery li { width:64px; height:48px; float:left; z-index:100; } #gallery li.lft { float:left; clear:left; } #gallery li.rgt { float:right; clear:right; } #gallery a { position:relative; width:64px; height:48px; display:block; float:left; z-index:100; cursor:default; } #gallery a img { position:relative; width:62px; height:46px; border:1px solid #888; z-index:100; } #gallery a:hover { width:160px; height:120px; padding:108px 144px; position:absolute; left:0; top:0; z-index:20; } #gallery a:hover img { background:#eee; position:relative; width:160px; height:120px; border:0; z-index:20; } #gallery a:active, #gallery a:focus { background:transparent; width:320px; height:240px; padding:48px 64px; position:absolute; left:0; top:0; z-index:10; } #gallery a:active img, #gallery a:focus img { background:#eee; position:relative; width:320px; height:240px; border:0; z-index:10; } /* hack for Internet Explorer */ #gallery li.pad { height:0; display:block; margin-top:-2px; width:448px; font-size:0; } a:visited { color:#000; } </style> </head> <body> <h2>A 'Two Step' CSS Photograph Gallery</h2> <h3>Step 9 - Adding a background image to the list</h3> <h4>by Stu Nicholls</h4> <ul id="gallery"> <li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g1.jpg" alt="#1" title="#1" /></a></li> <li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g2.jpg" alt="#2" title="#2" /></a></li> <li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g3.jpg" alt="#3" title="#3" /></a></li> <li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g4.jpg" alt="#4" title="#4" /></a></li> <li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g5.jpg" alt="#5" title="#5" /></a></li> <li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g6.jpg" alt="#6" title="#6" /></a></li> <li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g7.jpg" alt="#7" title="#7" /></a></li> <li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g8.jpg" alt="#8" title="#8" /></a></li> <li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g9.jpg" alt="#9" title="#9" /></a></li> <li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g10.jpg" alt="#10" title="#10" /></a></li> <li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g11.jpg" alt="#11" title="#11" /></a></li> <li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g12.jpg" alt="#12" title="#12" /></a></li> <li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g13.jpg" alt="#13" title="#13" /></a></li> <li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g14.jpg" alt="#14" title="#14" /></a></li> <li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g15.jpg" alt="#15" title="#15" /></a></li> <li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g16.jpg" alt="#16" title="#16" /></a></li> <li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g17.jpg" alt="#17" title="#17" /></a></li> <li class="pad"></li> <li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g18.jpg" alt="#18" title="#18" /></a></li> <li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g19.jpg" alt="#19" title="#19" /></a></li> <li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g20.jpg" alt="#20" title="#20" /></a></li> <li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g21.jpg" alt="#21" title="#21" /></a></li> <li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g22.jpg" alt="#22" title="#22" /></a></li> <li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g23.jpg" alt="#23" title="#23" /></a></li> <li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g24.jpg" alt="#24" title="#24" /></a></li> </ul> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

我们现在已经有了默认图片。

步骤１０

----------

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链接、图片一样大小)

运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" /> <title> A 'Two Step' CSS Photograph Gallery </title> <style type="text/css"> ul#gallery { padding:0; margin:0; width:448px; height:336px; position:relative; list-style-type:none; background:#888 url(http://sheneyan.com/image/article/css_gallery2/g26.jpg); } #gallery li { width:64px; height:48px; float:left; z-index:100; } #gallery li.lft { float:left; clear:left; } #gallery li.rgt { float:right; clear:right; } #gallery a { position:relative; width:64px; height:48px; display:block; float:left; z-index:100; cursor:default; } #gallery a img { position:relative; width:62px; height:46px; border:1px solid #888; z-index:100; } #gallery a:hover { width:160px; height:120px; padding:108px 144px; position:absolute; left:0; top:0; z-index:20; } #gallery a:hover img { background:#eee; position:relative; width:160px; height:120px; border:0; z-index:20; } #gallery a:active, #gallery a:focus { background:transparent; width:320px; height:240px; padding:48px 64px; position:absolute; left:0; top:0; z-index:10; } #gallery a:active img, #gallery a:focus img { background:#eee; position:relative; width:320px; height:240px; border:0; z-index:10; } /* hack for Internet Explorer */ #gallery li.pad { height:0; display:block; margin-top:-2px; width:448px; font-size:0; } a:visited { color:#000; } /* 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; } } </style> </head> <body> <h2>A 'Two Step' CSS Photograph Gallery</h2> <h3>Step 10 - A fix for Opera 7+ browsers</h3> <h4>by Stu Nicholls</h4> <ul id="gallery"> <li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g1.jpg" alt="#1" title="#1" /></a></li> <li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g2.jpg" alt="#2" title="#2" /></a></li> <li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g3.jpg" alt="#3" title="#3" /></a></li> <li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g4.jpg" alt="#4" title="#4" /></a></li> <li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g5.jpg" alt="#5" title="#5" /></a></li> <li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g6.jpg" alt="#6" title="#6" /></a></li> <li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g7.jpg" alt="#7" title="#7" /></a></li> <li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g8.jpg" alt="#8" title="#8" /></a></li> <li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g9.jpg" alt="#9" title="#9" /></a></li> <li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g10.jpg" alt="#10" title="#10" /></a></li> <li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g11.jpg" alt="#11" title="#11" /></a></li> <li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g12.jpg" alt="#12" title="#12" /></a></li> <li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g13.jpg" alt="#13" title="#13" /></a></li> <li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g14.jpg" alt="#14" title="#14" /></a></li> <li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g15.jpg" alt="#15" title="#15" /></a></li> <li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g16.jpg" alt="#16" title="#16" /></a></li> <li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g17.jpg" alt="#17" title="#17" /></a></li> <li class="pad"></li> <li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g18.jpg" alt="#18" title="#18" /></a></li> <li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g19.jpg" alt="#19" title="#19" /></a></li> <li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g20.jpg" alt="#20" title="#20" /></a></li> <li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g21.jpg" alt="#21" title="#21" /></a></li> <li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g22.jpg" alt="#22" title="#22" /></a></li> <li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g23.jpg" alt="#23" title="#23" /></a></li> <li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g24.jpg" alt="#24" title="#24" /></a></li> </ul> </body> </html>
[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] 下一页

◎进入论坛网络编程版块参加讨论

相关文章

重构、标准、布局

站点最新

站点最新列表

疯狂的程序员第五十回

疯狂的程序员第四十九回

疯狂的程序员第四十八回

疯狂的程序员第四十七回

疯狂的程序员第四十六回

疯狂的程序员第四十五回

疯狂的程序员第四十四回

疯狂的程序员第四十三回

疯狂的程序员第四十二回

疯狂的程序员第四十一回

栏目最新

栏目最新列表

火星人的耳机

公司正式宣布创业失败

用corelDEAW 12打造唇膏

二行代码解决全部网页木马

一行代码解决iframe挂马

Photoshop制作星空爆炸效果

CorelDraw 12打造休闲裤

Firework如何画特殊的切角图形

Firework打造韩式风格的手提袋

flash实例:打造佛光效果