您的位置: 首页 > 技术文档 > 网络编程 > 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]

你将学会如何只用无序列表(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]

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

相关文章 更多相关链接
网页中如何让整段文字左右对齐
如何让12px以下的文字正常显示
第一届简历样式表设计圆满结束
使用外部CSS设置FlashMX组件外观
重构、标准、布局
热门搜索: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
>> 分页 首页 前页 后页 尾页 页次:1/91个记录/页 转到 页 共9个记录 分享按钮

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

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

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

您的评论
用户名:  口令:
说明:输入正确的用户名和密码才能参与评论。如果您不是本站会员,你可以注册 为本站会员。
注意:文章中的链接、内容等需要修改的错误,请用报告错误,以利文档及时修改。
不评分 1 2 3 4 5
注意:请不要在评论中含与内容无关的广告链接,违者封ID
请您注意:
·不良评论请用报告管理员,以利管理员及时删除。
·尊重网上道德,遵守中华人民共和国的各项有关法律法规
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·本站评论管理人员有权保留或删除其管辖评论中的任意内容
·您在本站发表的作品,本站有权在网站内转载或引用
·参与本评论即表明您已经阅读并接受上述条款
推荐文档 | 打印文档 | 评论文档 | 报告错误  
专业书推荐 更多内容
网站可用性测试及优化指南
《写给大家看的色彩书1》
《跟我去香港》
众妙之门—网站UI 设计之道
《Flex 4.0 RIA开发宝典》
《赢在设计》
犀利开发—jQuery内核详解与实践
作品集 更多内容

杂⑦杂⑧ Gold NORMANA V2