来一发ul分离CSS制造网页相册滑动扫瞄效果

显示全部楼层 · 发表于 2015-1-16 00:12:47

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

最新版本html5+CSS3与2014年10月29日，万维网联盟宣布，经过几乎8年的艰辛努力，该标准规范终于最终制定完成。
英文原文：SlidingPhotographGalleries
翻译收拾：西米CC-www.ximicc.com
效果：
运转代码框
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>别具一格纯CSS完成相册预览ximicc.com</title><styletype="text/css">body{font-size:12px;color:#CC0000;}p{background-color:#F1FAFE;}#gallery{width:495px;height:240px;border:1pxsolid#888;margin:0auto;padding:0;list-style:none;background:#fffurl(/files/080628/1_133958.gif);}#galleryli{float:left;}#gallerylia{display:block;width:28px;height:240px;border-right:#fff1pxsolid;overflow:hidden;cursor:default;}#galleryliaimg{border:0;}#gallerylia:hover{width:320px;}#gallery2{margin:0auto;padding:0;list-style-type:none;overflow:hidden;width:572px;height:238px;border:1pxsolid#000;background:#fffurl(/files/080628/1_134055.gif);}#gallery2li{float:left;}#gallery2lia{display:block;height:30px;width:572px;float:left;overflow:hidden;text-decoration:none;border-bottom:1pxsolid#000;cursor:default;}#gallery2liaimg{border:0;}#gallery2lia:hover{background:#eee;height:144px;}#gallery2lia:hoverimg{height:144px;}--></style></head><body><ulid="gallery2"><li><ahref="http://ximicc.com"> 原文地点：<ahref="http://www.cssplay.co.uk/menu/gallery3l"target="_blank">SlidingPhotographGalleries</a> 翻译收拾：<ahref="http://ximicc.com"target="_blank">西米CCwww.ximicc.com</a> </div><ulid="gallery"><li><ahref="http://ximicc.com"></a></li>
</ul>
在ul中我们只使用了一个名为gallery的款式，接上去的CSS都将针对#gallery及其上级元素举行界说。本例中的相册图片都有不异的尺寸320

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 来一发ul分离CSS制造网页相册滑动扫瞄效果

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子