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]

步骤６

----------

定位缩略图

现在，我们要开始将这些缩略图定位到显示区域的边缘。

为了做到这个，我们要定义<li>标签的样式。

步骤６ａ－－移动上面那行的缩略图到位

/* Default style for list items */
#gallery li {
width:64px;
height:48px;
float:left;
z-index:100;
}

width:64px; 　设置宽度64px
height:48px; 设置高度48px
float:left; 让所有这些图片默认在左侧浮动。
z-index:100; 确保所有缩略图可视。

好了，这些图片已经被分组到四行并且在１７和１８之间有个空格。

步骤６ａ示例：

运行代码框
<!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; } #gallery li { width:64px; height:48px; float:left; z-index:100; } #gallery a img { position:relative; width:62px; height:46px; border:1px solid #888; z-index:100; } </style> </head> <body> <h2>A 'Two Step' CSS Photograph Gallery</h2> <h3>Step 6a - Positioning the thumbnails - float left</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 全部选择提示：你可先修改部分代码，再按运行]

步骤６ｂ－－移动'lft'的列表元素到左边去

/* Styling the left side of the display area */
#gallery li.lft {
float:left;
clear:left;
}

float:left;图片漂到左边去
clear:left;清除掉任何之前定义漂浮了的图片，让他们显示到底下去。

现在有点乱，不过显示区域的左边现在被填充了。

IE会添加一个小空格在每个图片的纵向之间，不过这个问题稍后会处理。

步骤６ｂ示例

运行代码框
<!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; } #gallery li { width:64px; height:48px; float:left; z-index:100; } #gallery li.lft { float:left; clear:left; } #gallery a img { position:relative; width:62px; height:46px; border:1px solid #888; z-index:100; } </style> </head> <body> <h2>A 'Two Step' CSS Photograph Gallery</h2> <h3>Step 6a - Positioning the thumbnails - left side</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 全部选择提示：你可先修改部分代码，再按运行]

步骤６ｃ－－移动样式为'rgt'的列表元素到右边。

/* Styling the right side of the display area */
#gallery li.rgt {
float:right;
clear:right;
}

float:right; 移动图片到右边去
clear:right; 清除所有实现设置浮动的图片，让他们显示到底下去。

如果你使用ie,你现在会看见，上面、左边和右边的图片已经在正确的位置了，但是底下那行还不是在底下。其他所有的浏览器会显示正确的顺序。

步骤６ｃ示例：

运行代码框
<!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; } #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 img { position:relative; width:62px; height:46px; border:1px solid #888; z-index:100; } </style> </head> <body> <h2>A 'Two Step' CSS Photograph Gallery</h2> <h3>Step 6c - Positioning the thumbnails - right side</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> <p>Internet Explorer will have the bottom row out of position. Other browsers will be correctly positioned.</p> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

这里有一个特定的列表元素(class="pad")被借用来播放图片。我们将设置这个样式来强制底部那行图片进入正确位置。

出处：蓝色理想
责任编辑：moby

上一页 XHTML+CSS创建“两步式”的相册 [4] 下一页 XHTML+CSS创建“两步式”的相册 [6]

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

相关文章

重构、标准、布局


关键字搜索	常规搜索	推荐文档
热门搜索：CSS Fireworks 设计比赛网页制作 web标准用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG

站点最新

站点最新列表

周大福“敬•自然”设计大赛开启

国际体验设计大会7月将在京举行

中国国防科技信息中心标志征集

云计算如何让安全问题可控

云计算是多数企业唯一拥抱互联网的机会

阿里行云

云手机年终巨献，送礼标配299起

阿里巴巴CTO王坚的"云和互联网观"

1499元买真八核云OS双蛋大促

首届COCO桌面手机主题设计大赛

栏目最新

栏目最新列表

浅谈JavaScript编程语言的编码规范

如何在illustrator中绘制台历

Ps简单绘制一个可爱的铅笔图标

数据同步算法研究

用ps作简单的作品展示页面

CSS定位机制之一:普通流

25个最佳最闪亮的Eclipse开发项目

Illustrator中制作针线缝制文字效果

Photoshop制作印刷凹凸字体

VS2010中创建自定义SQL Rule