用CSS3.0兑现独特相册
日期：2014-05-17 浏览次数：20715 次
用CSS3.0实现独特相册
在这里，我们使用基本的CSS样式来制作照片库，其中加上一些额外的阴影和旋转效果，然后使用?Z -index?属性来改变所有对象的堆叠顺序。因为我们使用的是CSS3.0，所以使用IE浏览器的用户不能看到完整的效果，但完全支持Firefox和Safari浏览器。
?
点击查看相册效果
| CSS代码 |
| body { background: #959796 url(images/wood-repeat.jpg); }
? #container { width: 600px; margin: 40px auto; } |
背景是重复的木质纹理图片，container中是主要内容，包括文字和照片。
| HTML代码 |
<ul class="gallery">
<li><a href="http://www.flickr.com/photos/claudio_ar/2214532638/" class="pic-1">
<img src="images/1.jpg"/></li>
<li><a href="http://www.flickr.com/photos/galego/3131005845/" class="pic-2">
<img src="images/2.jpg"/></li>
<li><a href="http://www.flickr.com/photos/claudio_ar/1810490865/" class="pic-3">
<img src="images/3.jpg" /></li>
<li><a href="http://www.flickr.com/photos/claudio_ar/2952099761/" class="pic-4">
<img src="images/4.jpg"/></li>
<li><a href="http://www.flickr.com/photos/claudio_ar/2811295698/" class="pic-5">
<img src="images/5.jpg"/></li>
<li><a href="http://www.flickr.com/photos/claudio_ar/2601700491/" class="pic-6">
<img src="images/6.jpg"/></li>
</ul>
|
gallery是照片库的类，选取一些自己感兴趣的照片，显示如下图所示：
| CSS代码 |
ul.gallery li a {
float: left;
padding: 10px 10px 25px 10px;
background: #eee;
border: 1px solid #fff;
-moz-box-shadow: 0px 2px 15px #333;
position: relative;
}
|
给图像添加一些样式来表现相册效果。首先靠左浮
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
