Css相册
2016-05-06 20:45
686 查看
对于相册,大家都很熟悉,常见的一种如下图所示:
View Code
<!doctype html> <title>纯CSS相册 by huansky</title> <meta charset="utf-8"/> <meta name="keywords" content="纯CSS相册 by huansky" /> <meta name="description" content="纯CSS相册 by huansky" /> <style type="text/css"> ul#album, #album li{ margin:0; padding:0; list-style:none; } ul#album{ width:600px; height:400px; position:relative; } #album li{ float:left; width:150px; height:100px; overflow: hidden; } #album li img{ width:150px; height:100px; } #album li:hover span img{ display: block; position: absolute; top:100px; left: 150px; width: 300px; height: 200px; } #album li.left { float:left; clear:left; } #album li.right { float:right; clear:right; } #album li.fixbug { width:200px; height:150px; } #album .first img{ display: block; position: absolute; top:100px; left: 150px; width: 300px; height: 200px; } </style> <h1>纯CSS相册 by huansky</h1> <ul id="album"> <li> <img src="img/1.png" /> <span class="first"><img src="img/1.png" /></span> </li> <li> <img src="img/2.png" /> <span><img src="img/2.png" /></span> </li> <li> <img src="img/3.png" /> <span><img src="img/3.png" /></span> </li> <li> <img src="img/4.png" /> <span><img src="img/4.png" /></span> </li> <li class="left"> <img src="img/5.png" /> <span><img src="img/5.png" /></span> </li> <li class="right"> <img src="img/6.png" /> <span><img src="img/6.png" /></span> </li> <li class="left"> <img src="img/7.png" /> <span><img src="img/7.png" /></span> </li> <li class="right"> <img src="img/8.png" /> <span><img src="img/8.png" /></span> </li> <li class="left"> <img src="img/9.png" /> <span><img src="img/9.png" /></span> </li> <li> <img src="img/10.png" /> <span><img src="img/10.png" /></span> </li> <li> <img src="img/11.png" /> <span><img src="img/11.png" /></span> </li> <li> <img src="img/12.png" /> <span><img src="img/12.png" /></span> </li> </ul>
View Code
相关文章推荐
- 记录自己的html与css之路:
- [翻译]纠正PostCSS的4大认识误区
- 如何使用CSS3实现一个3D泡沫图形
- html、css基础考察
- CSS 盒子模型
- css解决td单元格内文字溢出
- 【HTML&CSS】混合布局
- 理解CSS中的数学表达式calc()
- css实现3D动画效果
- tableView cell的几种样式样式 右侧带图片
- 深入理解CSS盒子模型
- CSS Reset 自己整理
- checkbox radio 通过CSS自定义外观
- 动态加载js和css
- Qt QScrollBar漂亮的样式
- css小知识点
- CSS Font-Size: em、px 、pt 、Percent之间的关系及换算
- CSS预处理器Sass、LESS 和 Stylus
- CSS1 background-color 属性
- 一些常被你忽略的CSS小知识【必看】