带漂亮阴影效果的响应式图片画廊界面设计

12/6/2015来源:Javascript教程人气:1007

这是一款带漂亮阴影效果的响应式图片画廊界面设计。该图片画廊中每一幅图片都带有炫酷的底部阴影效果。它采用网格布局,图片的列数会随着浏览器屏幕尺寸的大小而相应改变,效果非常炫酷。

在线预览    源码下载

 制作方法

 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>元素可以一个接一个的排列,组成网格。并且为每一个网格设置了固定的宽度和高度,以及阴影效果。