|
这是一个很简单的纯CSS相册滑动浏览效果,仅用一个无序列表ul结合简单的CSS就可以实现。原文中介绍的纵向滑动相册的实现方法,但是相比之下个人更喜欢横向滑动的那个。两者在缩略图的实现上有所区别,前者是采用收缩原始图片宽度的方法,会给人以很不自然的挤扁的感觉,而后者通过局部显示原始图片达到缩略的效果,虽然这种缩略图不能让我们概览整张图片,但我们可以通过提炼图片重点特征或添加说明文字等方法,来提升浏览者对图片的了解,最重要的是它在视觉协调性上更胜一筹。 首先来看一下XHTML部分,准备好七张相册图片以及一张默认的相册背景图win_backh.gif,把它们存储在网站的windows目录下,如前所述,七张图片的缩略图我们直接通过定义CSS来实现,不需要另外制作。我们以一个ul作为容器把这几张图片添加到页面中,并设置空链接,当然你也可以在链接中设置具体的地址: <ul id="gallery"> |
Vista教程 | 手机技巧 | JDK | Java教程 | 局域网故障 | 无线网配置实战专题 | Photoshop | 备份还原 | VOIP | 数码行情 | 硬件维修 | 异国风味 | Windows Server 2003 | DIV+CSS | 国际IT业界 | MySQL 安装与技术 | HP-Unix | P2P/JXTA | 电脑应用 | 系统进程
• 全新Galaxy三星9月16举办新品发布会
• Vision/G2一部机器?HTC新品参数再泄露
• Wi-Fi集成电路出货量市场排名第二
• 用外观就秒杀你!大厂强劲LED液晶评测
• 超级网银并非免费午餐跨行转账收费标准或更高
• 首批互联网地图牌照九月发放
• 维基解密部分服务器被转移到地下30米防爆机房
• 暴雪欲请卡梅隆拍摄电影版《星际争霸》
• 微软MSN发布出口通业务基于必应海外关键词
• 超级网银暂不面向个人企业客户试点运行
• Gmail网络电话日呼叫量破百万
• 巴菲特的《财富》岁月:13次上杂志封面(组图)
• 英特尔英飞凌交易具十大意义:对网民影响最大
• IBM发布软件安全漏洞修复率排名:自家软件垫底
• 操盘指南:9月1日大陆内存走势报告
• 自制23×3英寸手把手教你如何玩转三屏