>>>>>

纯CSS实现相册滑动浏览_1

发布日期：2008/10/9 20:11:54 人气指数：251

英文原文：Sliding Photograph Galleries
翻译整理：西米CC-www.ximicc.com

效果：

运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>别开生面纯CSS实现相册预览 webyi.com</title> <style type="text/css"> body{ font-size:12px; color: #CC0000; } p { background-color: #F1FAFE; } #gallery { width:495px; height:240px; border: 1px solid #888; margin:0 auto; padding:0; list-style:none; background:#fff url(/upimg/allimg/080626/6283/win_backh.gif); } #gallery li { float: left; } #gallery li a { display: block; width: 28px; height: 240px; border-right: #fff 1px solid; overflow: hidden; cursor: default; } #gallery li a img { border:0; } #gallery li a:hover { width: 320px; } #gallery2 { margin:0 auto; padding:0; list-style-type:none; overflow:hidden; width:572px; height:238px; border:1px solid #000; background:#fff url(/upimg/allimg/080626/6283/win_back.gif); } #gallery2 li { float:left; } #gallery2 li a { display:block; height:30px; width:572px; float:left; overflow: hidden; text-decoration:none; border-bottom:1px solid #000; cursor:default; } #gallery2 li a img { border:0; } #gallery2 li a:hover { background:#eee; height:144px; } #gallery2 li a:hover img { height:144px; } --> </style> </head> <body> <ul id="gallery2"> <li><a href="http://ximicc.com"> <img src="/upimg/allimg/080626/6283/1.jpg" alt="ximicc" title="ximicc" /></a></li> <li><a href="http://ximicc.com"> <img src="/upimg/allimg/080626/6283/2.jpg" alt="ximicc" title="ximicc" /></a></li> <li><a href="http://ximicc.com"> <img src="/upimg/allimg/080626/6283/3.jpg" alt="ximicc" title="ximicc" /></a></li> <li><a href="http://ximicc.com"> <img src="/upimg/allimg/080626/6283/4.jpg" alt="ximicc" title="ximicc" /></a></li> </ul> <div align="center"> <p><br /> <strong>原文地址：<a href="http://www.cssplay.co.uk/menu/gallery3l" target="_blank">Sliding Photograph Galleries</a></strong> <br /> <br /><strong>翻译整理：<a href="http://ximicc.com" target="_blank">西米CC www.ximicc.com</a></strong> <br /> <br /> </p><br /> </div> <ul id="gallery"> <li><a href="http://ximicc.com"><img src="/upimg/allimg/080626/6283/b1.jpg" /></a></li> <li><a href="http://ximicc.com"><img src="/upimg/allimg/080626/6283/b2.jpg" /></a></li> <li><a href="http://ximicc.com"><img src="/upimg/allimg/080626/6283/b3.jpg" /></a></li> <li><a href="http://ximicc.com"><img src="/upimg/allimg/080626/6283/b4.jpg" /></a></li> <li><a href="http://ximicc.com"><img src="/upimg/allimg/080626/6283/b5.jpg" /></a></li> <li><a href="http://ximicc.com"><img src="/upimg/allimg/080626/6283/b6.jpg" /></a></li> <li><a href="http://ximicc.com"><img src="/upimg/allimg/080626/6283/b7.jpg" /></a></li> </ul> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

共 4 页 [1] [2] [3] [4] [下一页]

浏览更多相关内容

• jQuery轻松驾驭导航菜单	• Photoshop调出人物照片漂亮的淡青色
• FlashCS43d效果以及骨骼工具	• 多图闪效教你一键搞定炫酷闪图效果
• LOMO淡雅打造唯美中性色	• 25个创意和独特的网站设计
• Photoshop天空、大海和女孩合成照片	• 用于打印的页面设计
• jQuery+BingAPI实现简易搜索引擎	• Photoshop制作一颗梦幻的水晶星星
• 用美图秀秀一分钟搞定漂亮签名图	• 美图秀秀一分钟搞定QQ空间个性相册
• 网站对字体大小的选取也是有学问的	• 仿天涯底部固定漂浮导航
• 九宫格应用案例：极酷网页播放器	• 可爱边框一键秀出宝宝粉粉照片
• 冷蓝效果打造蓝色梦幻女孩	• CSS3:文字阴影知多少
• Web开发与设计师速查手册大全（上）	• 25个使用纹理的很潮的网站设计

特别声明和提示：

Phontol.com 和网页作者无关，不对网页的内容负责。
本站转载的部分内容是出于传递更多信息之目的，并不意味着赞同其观点或证实其内容的真实性。
如有任何异议，请参见版权声明/免责声明部分。

温馨提示：

即刻注册 Phontol.com 网站通行证，在本站任何一站点登陆后，都不需要再次重复注册和登陆，即可享有所有站点功能和服务，快去注册你的通行证，体验一站式服务吧！
Phontol.com 为大家开通了一个综合讨论区，快去共同分享你我的快乐吧！在那里，大家可以畅所欲言，还可以粘贴你的个人写真集哦。现在就去»讨论区看看

图片资讯

最早本月上市三星最强PPCi8000追踪	操作顺手功能强WM系统强机重点推荐
今夏只能1080p16:9全高清液晶显示器搜罗	金子都会发光三星3D立体显示器小涨
A+级完美屏&HDMI评华硕23寸新品LCD	各有各精彩四款46寸全高清液晶电视导购


Copyright © 2009 Phontol. All Rights Reserved.	京ICP备07004242号