纯css打造photo album
今天在网上看到一个用纯css写的相册，很受启发，之前没有太深入研究过用css去创造一些新东西，其实用css的伪类完全可以模仿一些js的行为，比如a:hover就可以替代js的onmouseover，下面就给大家看一下我写的这个简单相册效果的例子,主要是改变a:hover的样式使图片恢复到原始尺寸。
程序代码
- <title>纯css相册效果-----www.achome.cn-----Satellite Of Love</title>
- <style>
- body{font-size:11px;font-family:Verdana;color:#666;}
- li{list-style:none;float:left;}
- ul li img{width:80px;height:80px;padding:20px;border:10px solid #eee;}
- a:link,a:visited{}
- a:hover{width:458px;}
- a:hover img{width:458px;height:auto;}
- 把鼠标停留在图片上体验纯css的相册效果
- <ul>
- <li><a href=""><img src="http://www.achome.cn/blog/pics/red_black.jpg" /></a></li>
- <li><a href=""><img src="http://www.achome.cn/blog/pics/red_black.jpg" /></a></li>
- <li><a href=""><img src="http://www.achome.cn/blog/pics/red_black.jpg" /></a></li>
- <li><a href=""><img src="http://www.achome.cn/blog/pics/red_black.jpg" /></a></li>
- <li><a href=""><img src="http://www.achome.cn/blog/pics/red_black.jpg" /></a></li>
- </ul>