别开生面：纯CSS实现相册滑动浏览（2）
作者：ximicc 来源：西米CC 发布时间：2008-06-26 13:24:00
标签：相册,css,滑动
接下来将列表项目设置为左浮动：
#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。
0
投稿猜你喜欢
- 这篇文章主要介绍了Python如何使用函数做字典的值,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友
- 本文实例讲述了python获取一组汉字拼音首字母的方法。分享给大家供大家参考。具体实现方法如下：#!/usr/bin/env python
- 第一招、mysql服务的启动和停止net stop mysqlnet start mysql第二招、登陆mysql语法如下： mysql -
OpenCV中在图片上输出中文一般需要借助FreeType库实现。FreeType库是一个完全免费（开源）的、高质量的且可移植的字体引擎，它- try { int readByte = 0;
- 本文实例主要是Python中获取当前运行函数的名称，具体如下。python 具有强大的自省能力，在函数运行时，可以在函数内部获取到当前所在的
- 本文实例讲述了Python基于二分查找实现求整数平方根的方法。分享给大家供大家参考，具体如下：x=int(raw_input('pl
- python中的列表和元组# 1.列表的格式# [数据1,数据2,数据3,···]# 列表 可变数据类型# 列表可以存储多个数据，数据之间的
- 第一种方式：使用{}firstDict = {"name": "wang yuan wai ", &
- 前言Python语言提供了Socket套接字来实现网络通信。Python的应用程序通常通过Socket"套接字"向网络发
- MySQL—触发器将两个关联的操作步骤写到程序里面，并且要用事务包裹起来，确保两个操作称为一个原子操作，要么全部执行，要
- 方法说明： 同步版的 stat() 。方法返回一个stat数组对象，包含以下信息：(以下信息为案例中读取的文件信息，非默认值){
- 昨天在网上看到一个防采集软件，说采集只访问当前网页，不会访问网页的图片、JS等，今天突然想到，通过动态程序和Js访问分别记录访问者的IP，然
- 博主在这个问题上卡了挺久的，贴出来解决方法帮助需要的朋友，直接上代码（测试环境：win10+Python2.7）：# coding=utf-
- 天气真的是越来越冷啦，有时候我们想翻看网页新闻，但是又冷的不想把手拿出来，移动鼠标翻看。这时候，是不是特别想电脑像讲故事一样，给我们念出来呢
- XA事务支持限于InnoDB存储引擎。MySQL XA实施是针对外部XA的，其中，MySQL服务器作为资源管理器，而客户端程序作为事务管理器
- 需要ping一个网段所有机器的在线情况，shell脚步运行时间太长，用python写个多线程ping吧，代码如下：#!/usr/bin/py
- 简单的Tensorflow验证码识别应用，供大家参考，具体内容如下1.Tensorflow的安装方式简单,在此就不赘述了.2.训练集训练集以
- 我的大体思路是：时时监听鼠标的坐标，当鼠标移动时，透明层随着鼠标移动，大图片相对透明层的移动而移动。不废话了，看代码。 <!DOCTY
- 应用 MySQL 时，会遇到不能创建函数的情况。出现如下错误信息：ERROR 1418 : This function has none o
