ul结合CSS制作网页相册滑动浏览效果
互联网 发布时间：-10-17 19:25:02 作者：佚名 我要评论
英文原文：Sliding Photograph Galleries
翻译整理：西米CC-
效果：
运行代码框
接下来将列表项目设置为左浮动：
#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 实现【点击展开阅读全文】功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下-10-13
这篇文章主要介绍了CSS实现两个元素相融效果(粘滞效果),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学-10-12
这篇文章主要介绍了css为什么要放在head标签中,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下-10-12
这篇文章主要介绍了CSS两种常用的封装示例，帮助大家更好的利用CSS制作网页，感兴趣的朋友可以了解下-10-12
这篇文章主要介绍了CSS标签模式display属性,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下-10-12
这篇文章主要介绍了css 收货地址平行四边形的线条样式示例代码,代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下-10-09
这篇文章主要介绍了css实现鼠标放上去时图片过渡转换动画,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下-10-09
这篇文章给大家介绍了CSS中width和height的默认值auto与%案例，本文通过实例案例给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧-09-30
这篇文章主要介绍了css一些不常见但很有用的属性操作大全,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下-09-28
这篇文章主要介绍了解决搜索框和搜索按钮button边框不能重合的问题,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下-09-28
最新评论
