带漂亮阴影效果的响应式图片画廊界面设计
2016-04-26 16:06:20 来源: 阅读:
这是一款带漂亮阴影效果的响应式图片画廊界面设计。该图片画廊中每一幅图片都带有炫酷的底部阴影效果。它采用网格布局，图片的列数会随着浏览器屏幕尺寸的大小而相应改变，效果非常炫酷。
制作方法
HTML结构
该图片画廊使用一个<div>元作为包裹容器。里面使用无序列表作为图片的网格系统。每一张图片的超链接父元素上的data-tooltip属性用于制作图片的标题效果。
<div class="wrapper"> <ul class="gallery"> <li> <a href="#" class="gallery_links" data-tooltip="Country scenery"> <img src="img/1.jpg"/> </a> </li> ...... </ul> </div>
CSS样式
在CSS样式中，整个包裹元素.wrapper居中放置。整个无序列表采用相对定位，
.wrapper { margin: 0 auto; margin-top:2%; } ul.gallery { position: relative; z-index: 1; overflow: hidden; list-style: none; padding:5px; }
无序列表中的<li>元素的显示方式设置为display:inline-block，使所有的<li>元素可以一个接一个的排列，组成网格。并且为每一个网格设置了固定的宽度和高度，以及阴影效果。