這是一款帶漂亮陰影效果的響應式圖片畫廊界面設計。該圖片畫廊中每一幅圖片都帶有炫酷的底部陰影效果。它采用網格布局，圖片的列數會隨著瀏覽器屏幕尺寸的大小而相應改變，效果非常炫酷。
在線預覽 源碼下載
該圖片畫廊使用一個<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樣式中，整個包裹元素.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>元素可以一個接一個的排列，組成網格。并且為每一個網格設置了固定的寬度和高度，以及陰影效果。
新聞熱點
疑難解答
