![]() |
当前位置: 电脑软硬件应用网 > 设计学院 > 网络编程 > CSS教程 > 正文 |
|
|||
如何使用CSS3来定位一个倾斜的图片 | |||
2010-3-18 9:11:45 文/ximumu 出处:电脑软硬件应用网 | |||
利用纯CSS可以做出千变万化的效果,特别是CSS3的引入更让更多的效果可以做出来.现在就让我们动手做出一个关于凉爽为题的图片库.
第一步:写入以下代码来构建一个基本的框架,下载背影图.
#container { 第二步:用ul来定义一列图片,然后再给每张图片定义li,别忘了给每一张图片添加它们的alt. ======================= alt="Photograph of a waterfall" /></li> alt="Photograph of clouds and sunlight" /></li> alt="Photograph of a lake scene at dusk" /></li> alt="Photograph of a tree and green grass" /></li> alt="Photograph of a beach sunset" /></li> alt="Photograph of a flower and lake" /></li>
第三步:现在我们来给UL添加CSS属性,首先我要得把列表默认的小圆点清除掉,使用一个简单的属性就可以清除: list-style:none ======================= ============================= ======================== <ul class="gallery"> href="http://www.flickr.com/photos/claudio_ar/2214532638 /" class="pic-1"><img src="images/1.jpg" alt="Photograph of a waterfall" /></li> href="http://www.flickr.com/photos/galego/3131005845/" class="pic-2"><img src="images/2.jpg" alt="Photograph of clouds and sunlight" /></li> href="http://www.flickr.com/photos/claudio_ar/1810490865 /" class="pic-3"><img src="images/3.jpg" alt="Photograph of a lake scene at dusk" /></li> href="http://www.flickr.com/photos/claudio_ar/2952099761 /" class="pic-4"><img src="images/4.jpg" alt="Photograph of a tree and green grass" /></li> href="http://www.flickr.com/photos/claudio_ar/2811295698 /" class="pic-5"><img src="images/5.jpg" alt="Photograph of a beach sunset" /></li> href="http://www.flickr.com/photos/claudio_ar/2601700491 /" class="pic-6"><img src="images/6.jpg" alt="Photograph of a flower and lake" /></li> ul.gallery li a.pic-1 { 第七步:因为每张图片在位置上的不同,我们可以为其设置个性的风格.比如说:z-index 和 旋转 的属性. 第八步:现在图片差不多在背景上排列出来了. =============== 第九步:添加 :hover 样式,给z-index加个更高的位置,当鼠标移入的时候可以跳到最上面.同时调整阴影,让图片感觉取消了屏幕 |
|||
最新热点 | 最新推荐 | 相关文章 | ||
CSS伪类选择器nth-child() css3教程:background属性调整增强 css教程:CSS3 Media Queries 详解 CSS 类名的长命名和短命名 CSS实例教程:非浮动区域设置宽度 如何使用css约束一个层不可见? CSS的list-style解释 小议使用“完整”的CSS的缺点 CSS中的相对定位与绝对定位详解 实例使用DIV+CSS制作圆角边框加阴影… |
关于45IT | About 45IT | 联系方式 | 版权声明 | 网站导航 | |
Copyright © 2003-2011 45IT. All Rights Reserved 浙ICP备09049068号 |