当前位置:主页 > 网页教程 > 网站发布 > dns服务器 > 内容欢迎大家投稿

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

时间:2009-11-15 13:20来源:未知 作者:大宝库 点击:读取中
阅读工具:字体:

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

HTML+CSS打包下载:200911101208582445.rar

观看演示

点击查看我们要做的效果。请记住这个事例对于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>

(责任编辑:大宝库)



------分隔线----------------------------
推荐内容
赞助商链接
赞助商链接