别开生面:纯CSS实现相册滑动浏览(2)
作者:ximicc 来源:西米CC 时间:2008-06-26 13:24:00
接下来将列表项目设置为左浮动:
#gallery li {
float: left;
}
这个样式现在不会对浏览器的解析效果产生任何影响,但它是必须的,它确保了分置在各个列表项中的图片显示在同一行,你可以在整体效果完成之后删除这行代码比较一下差别。接下来是一组很关键的CSS定义,针对li中的链接标签a:
#gallery li a {
display: block;
width: 28px;
height: 240px;
border-right: #fff 1px solid;
overflow: hidden;
cursor: default;
}
首先将链接对象转换为块级元素,以便为其设置宽和高,这里的宽度28px即缩略图的截取区域,相册中的图片最好能进行一些预处理,除了之前提到的尺寸规格之外,还可以看看能否在这28×240的缩略区内尽可能多的传递图片信息。这里面最重要的一行代码是overflow: hidden; ,它让图片的可视部分限制在a标签的宽高范围之内。另外样式中还定义了鼠标指针的外观,并为每个链接区域设置了1px的白色右边框,让其中的图片之间具有更明显的视觉分隔。
添加了链接的图片,在浏览器中往往会显示出紫色的外边框,我们通过下面的CSS来消除它:
#gallery li a img {
border:0;
}
最后是鼠标滑过时显示完整图片的实现,我们之所以在图片上添加链接,很大一部分原因在于我们需要一个行为来触发相册浏览,而利用伪类a:hover来实现再适合不过了:
#gallery li a:hover {
width: 320px;
}
CSS中我们只要简单的改变已经转换为块级元素的a标签的宽度就可以了。
最后来说明一下ul的宽度为什么要设置为495px。结合缩略图和大图浏览的功能,相册整体的宽度至少应该是一张大图加上六张小图,即320+28×6=488px,而在设计的过程中,我们还未每个a标签添加了1px的右边框,也就是每张图片都有各自1px的右边框,所以相册的宽度在原来的基础上再加7px,即最后的495px。
标签:相册,css,滑动
0
投稿
猜你喜欢
Python GUI学习之登录系统界面篇
2023-01-06 14:32:42
python中内置库os与sys模块的详细介绍
2021-12-05 21:30:33
Python 中将二进制转换为整数的多种方法
2023-01-11 17:30:53
python计算两个数的百分比方法
2021-06-20 16:39:45
用python给csv里的数据排序的具体代码
2021-02-15 01:12:25
利用Python和OpenCV库将URL转换为OpenCV格式的方法
2021-08-10 13:41:43
使用bandit对目标python代码进行安全函数扫描的案例分析
2021-04-07 02:01:22
http请求405错误方法不被允许的解决 (Method not allowed)
2022-10-12 11:12:10
asp如何遍历Cookies集合?
2009-11-08 19:07:00
利用Python分析一下最近的股票市场
2023-06-14 23:46:03
如何在SQL2000的查询中使用XML-Data?
2010-06-18 19:26:00
对numpy中向量式三目运算符详解
2023-06-28 02:14:55
20行Python代码实现一款永久免费PDF编辑工具
2023-11-17 23:51:45
golang cache带索引超时缓存库实战示例
2023-07-24 04:43:11
Python实现批量自动整理文件
2023-05-10 21:58:12
Python中gevent模块协程使用
2023-10-23 02:56:46
pip安装py_zipkin时提示的SSL问题对应
2021-03-14 18:27:55
利用jupyter网页版本进行python函数查询方式
2022-05-23 17:27:12
Python中获取图片的大小问题
2022-11-08 21:43:23
Matplotlib控制坐标轴刻度间距与标签实例代码
2022-01-26 03:47:39