你的位置:首页 > Java教程

[Java教程]带漂亮阴影效果的响应式图片画廊界面设计


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

在线预览    源码下载

 制作方法

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