星空网 > 软件开发 > Java

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

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

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

在线预览    源码下载

 制作方法

 HTML结构

该图片画廊使用一个<div>元作为包裹容器。里面使用无序列表作为图片的网格系统。每一张图片的超链接父元素上的data-tooltip属性用于制作图片的标题效果。

<div class="wrapper"> <ul class="gallery">  <li>   <a href="#" class="gallery_links" data-tooltip="Country scenery">    <img src='/images/loading.gif' data-original="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>元素可以一个接一个的排列,组成网格。并且为每一个网格设置了固定的宽度和高度,以及阴影效果。




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

关键词:图片

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流