您的位置: 首页 > 技术文档 > 网络编程 > XHTML+CSS创建“两步式”的相册
任意字符集下正常显示网页 回到列表 利用插件制作HTML的新闻系统
 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]

基本的(x)html列表如下:

<ul id="gallery">
<li><img src="http://sheneyan.com/image/article/css_gallery2/g1.jpg" alt="#1" title="#1" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g2.jpg" alt="#2" title="#2" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g3.jpg" alt="#3" title="#3" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g4.jpg" alt="#4" title="#4" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g5.jpg" alt="#5" title="#5" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g6.jpg" alt="#6" title="#6" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g7.jpg" alt="#7" title="#7" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g8.jpg" alt="#8" title="#8" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g9.jpg" alt="#9" title="#9" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g10.jpg" alt="#10" title="#10" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g11.jpg" alt="#11" title="#11" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g12.jpg" alt="#12" title="#12" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g13.jpg" alt="#13" title="#13" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g14.jpg" alt="#14" title="#14" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g15.jpg" alt="#15" title="#15" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g16.jpg" alt="#16" title="#16" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g17.jpg" alt="#17" title="#17" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g18.jpg" alt="#18" title="#18" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g19.jpg" alt="#19" title="#19" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g20.jpg" alt="#20" title="#20" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g21.jpg" alt="#21" title="#21" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g22.jpg" alt="#22" title="#22" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g23.jpg" alt="#23" title="#23" /></li>
<li><img src="http://sheneyan.com/image/article/css_gallery2/g24.jpg" alt="#24" title="#24" /></li>
</ul>

步骤2

----------

文档格式声明 首先要作的,也是最重要的,就是确认你使用了正确的(X)HTML !DOCTYPE,如果没有这玩意儿,绝大部分的浏览器将会被抛入“quirks”模式并引出各种各样的

不兼容问题。W3C QA - List of valid DTDs列出了所有能够被引用的正确的文档格式声明。对于这个样式表,使用XHTML1.0或者1.1会更加合适。我自己所有的网页都使用XHTML1.1。

步骤3

----------

添加超链接和样式信息
为了使用:hover伪类,我需要将这个基本的无序列表改变成一个超链接的无序列表。那是因为IE浏览器只允许:hover伪类在超链接上使用。我同样需要添加额外的声明来指向特定的图片。

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

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

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

相关文章 更多相关链接
网页中如何让整段文字左右对齐
如何让12px以下的文字正常显示
第一届简历样式表设计圆满结束
使用外部CSS设置FlashMX组件外观
重构、标准、布局
热门搜索:CSS Fireworks 设计比赛 网页制作 Dreamweaver Studio8 Flash
站点最新 站点最新列表
疯狂的程序员 第五十回
疯狂的程序员 第四十九回
疯狂的程序员 第四十八回
疯狂的程序员 第四十七回
疯狂的程序员 第四十六回
疯狂的程序员 第四十五回
疯狂的程序员 第四十四回
疯狂的程序员 第四十三回
疯狂的程序员 第四十二回
疯狂的程序员 第四十一回
栏目最新 栏目最新列表
火星人的耳机
公司正式宣布创业失败
用corelDEAW 12打造唇膏
二行代码解决全部网页木马
一行代码解决iframe挂马
Photoshop制作星空爆炸效果
CorelDraw 12打造休闲裤
Firework如何画特殊的切角图形
Firework打造韩式风格的手提袋
flash实例:打造佛光效果
>> 分页 首页 前页 后页 尾页 页次:2/91个记录/页 转到 页 共9个记录

蓝色理想版权申明:除部分特别声明不要转载,或者授权我站独家播发的文章外,大家可以自由转载我站点的原创文章,但原作者和来自我站的链接必须保留(非我站原创的,按照原来自一节,自行链接)。文章版权归我站和作者共有。

转载要求:转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印,亦不能抹去我站点水印。

特别注意:本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有,文章若有侵犯作者版权,请与我们联系,我们将立即删除修改。

本文现有 4 条评论 评分:- llllllllllllllllllll + 评分人数: 1 ,平均分: 5.00


uuhappy Publish at 2006-4-10 8:46:32
效果太棒了!
激动中
积雨云 Publish at 2005-9-24 16:55:45
#gallery li.lft和#gallery li.rgt这个在我机器上为什么没有作用啊!!!
zbm2001z Publish at 2005-9-16 17:21:20 评分5
很好,非常辛苦了,用什么工具翻译的?——早就想要这个站点的中文翻译了
我知道很多国外这方面的好文,可惜英文差了点......
emopig Publish at 2005-9-15 20:09:13
很好
您的评论
用户名:  口令:
说明:输入正确的用户名和密码才能参与评论。如果您不是本站会员,你可以注册 为本站会员。
注意:文章中的链接、内容等需要修改的错误,请用报告错误,以利文档及时修改。
不评分 1 2 3 4 5
注意:请不要在评论中含与内容无关的广告链接,违者封ID
请您注意:
·不良评论请用报告管理员,以利管理员及时删除。
·尊重网上道德,遵守中华人民共和国的各项有关法律法规
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·本站评论管理人员有权保留或删除其管辖评论中的任意内容
·您在本站发表的作品,本站有权在网站内转载或引用
·参与本评论即表明您已经阅读并接受上述条款
推荐文档 | 打印文档 | 评论文档 | 报告错误  
专业书推荐 更多内容
大师之路--Photoshop 完全解析
《超越CSS》新书上市
Don't Make Me Think 第2版
HTML与CSS入门经典(第7版)
《FLASH MX2004网站开发精粹》
《CSS入门经典》
《设计师谈网页设计思维》
作品集 更多内容

霞LOGO 最近的作品 aeroom&nbsp;Studio&nbsp;logo 上海互联星空超炫音乐营 Speed&nbsp;Ex ozon 外事办 软件盒