|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
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"><p><br/><strong>原文地点:<ahref="http://www.cssplay.co.uk/menu/gallery3l"target="_blank">SlidingPhotographGalleries</a></strong><br/><br/><strong>翻译收拾:<ahref="http://ximicc.com"target="_blank">西米CCwww.ximicc.com</a></strong><br/><br/></p><br/></div><ulid="gallery"><li><ahref="http://ximicc.com"></a></li>
</ul>
在ul中我们只使用了一个名为gallery的款式,接上去的CSS都将针对#gallery及其上级元素举行界说。本例中的相册图片都有不异的尺寸320 |
|