当前位置：首页 >> 网站设计 >> css网站布局 >> 正文

如何利用CSS3来定位一个倾斜的图片

利用纯CSS可以做出千变万化的效果，特别是CSS3的引入更让更多的效果可以做出来。现在就让我们动手做出一个关于凉爽为题的图片库。

点击查看我们要做的效果。请记住这个事例对于IE来说支持的不好，但firefox;safari浏览器升级到最高版本是可以看出效果的。

我们先用CSS的基本样式来构建图片。然后再加入一些阴影和翻转的属性，最近使用z-index属性来改变图片的叠加顺序。在开始之前先下载这些清爽的图片。

第一步：写入以下代码来构建一个基本的框架，下载背影图。

以下为引用的内容：
body {
background: #959796 url(images/wood-repeat.jpg);
}

#container {
width: 600px; margin: 40px auto;
}

第二步：用ul来定义一列图片，然后再给每张图片定义li，别忘了给每一张图片添加它们的alt.

以下为引用的内容：
<ul class="gallery">
<li>< a href="#"><img src="images/1.jpg"

alt="Photograph of a waterfall" /></li>
<li>< a href="#"><img src="images/2.jpg"

alt="Photograph of clouds and sunlight" /></li>
<li>< a href="#"><img src="images/3.jpg"

alt="Photograph of a lake scene at dusk" /></li>
<li>< a href="#"><img src="images/4.jpg"

alt="Photograph of a tree and green grass" /></li>
<li>< a href="#"><img src="images/5.jpg"

alt="Photograph of a beach sunset" /></li>
<li>< a href="#"><img src="images/6.jpg"

alt="Photograph of a flower and lake" /></li>
</ul>

第三步：现在我们来给UL添加CSS属性，首先我要得把列表默认的

小圆点清除掉，使用一个简单的属性就可以清除： list-style:none

以下为引用的内容：
ul.gallery li a {
float: left;
padding: 10px 10px 25px 10px;
background: #eee;
border: 1px solid #fff;
}