今天小编跟大家讲解下有关CSS相册简单实现方法(功能分析及代码) ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS相册简单实现方法(功能分析及代码) 的相关资料，希望小伙伴们看了有所帮助。
很久以前就知道ctrly.cn 了感觉很简单也没太在意 效果可以看这里： http://www.ctrly.cn/ 下面是提取出来的代码 ： 复制代码代码如下: <!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>HTML—CSS 简易相册</title> <style type="text/css"media="screen"> * { margin: 0; padding: 0; border: 0; outline: 0; } body { font-family: Arial,"MS Trebuchet", sans-serif; color:#888; } a{ text-decoration:none; color:#8ac; } ul{ background:#000; width:125px; float: left; list-style: none; border-right:8px solid black; } ul li{ height:75px; } ul li a img{ -ms-filter:"PRogid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter:alpha(opacity=40); opacity:0.4; } ul li a:hover img{ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); opacity:1.0; } #images{ width:500px; height:300px; overflow:hidden; float:left; } #wrapper{ width:633px; height:300px; border:8px solid black; margin:0px auto; } #credits{ width:633px; margin: 0 auto; text-align: right; } p{ margin-top:10px; font-size:9pt; } h1#header{ width:633px; margin:15px auto 5px; font-size:14pt;color:#f00; } .foot{ width:633px;background:#111;font-size:12px; margin:2px auto;border-top:1px solid #000; } </style> </head> <body> <h1 id="header">单击左边的小图看效果</h1> <div id="wrapper"> <ul> <li><a href=""id="tab1"><img src="http://www.ctrly.cn/img/tab1.jpg"alt=""title=""/></a></li> <li><a href=""id="tab2"><img src="http://www.ctrly.cn/img/tab2.jpg"alt=""title=""/></a></li> <li><a href=""id="tab3"><img src="http://www.ctrly.cn/img/tab3.jpg"alt=""title=""/></a></li> <li><a href=""id="tab4"><img src="http://www.ctrly.cn/img/tab4.jpg"alt=""title=""/></a></li> </ul> <div id="images"> <div><a name="image1"></a><img src="http://www.ctrly.cn/img/image1.jpg"alt=""title=""/></div> <div><a name="image2"></a><img src="http://www.ctrly.cn/img/image2.jpg"alt=""title=""/></div> <div><a name="image3"></a><img src="http://www.ctrly.cn/img/image3.jpg"alt=""title=""/></div> <div><a name="image4"></a><img src="http://www.ctrly.cn/img/image4.jpg"alt=""title=""/></div> </div> </div> </body> </html> 功能分析： 相册在默认情况下以缩略图的形式显示 并且不压缩相片的原有宽度和高度属性 而是取相册的某个部分作为缩略图形式。 当鼠标悬停于某张缩略图上时 相册列表中的缩略图恢复为原始相片的宽度和高度 展现在相册的某个固定的区域 同时缩略图为空。 关键css代码： 复制代码代码如下: li a{ display:block; width:70px; height:70px; overflow:hidden; float:left; margin:0.5px; border:2px solid #efdeb0; } li a:hover img{ position:absolute; width:550px; height:550px; top:10px; left:10px; margin:0; border:4px soild #a98175; }来源：爱蒂网
