html相册浏览页面怎么做,ul结合CSS制作网页相册滑动浏览效果
ul结合CSS制作网页相册滑动浏览效果
互联网 发布时间:2008-10-17 19:25:02 作者:佚名 我要评论
英文原文:Sliding Photograph Galleries
翻译整理:西米CC-www.ximicc.com
效果:
运行代码框
接下来将列表项目设置为左浮动:
#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 实现【点击展开阅读全文】功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-10-13
这篇文章主要介绍了CSS实现两个元素相融效果(粘滞效果),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学2020-10-12
这篇文章主要介绍了css为什么要放在head标签中,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-10-12
这篇文章主要介绍了CSS两种常用的封装示例,帮助大家更好的利用CSS制作网页,感兴趣的朋友可以了解下2020-10-12
这篇文章主要介绍了CSS标签模式display属性,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-10-12
这篇文章主要介绍了css 收货地址平行四边形的线条样式示例代码,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-10-09
这篇文章主要介绍了css实现鼠标放上去时图片过渡转换动画,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-10-09
这篇文章给大家介绍了CSS中width和height的默认值auto与%案例,本文通过实例案例给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2020-09-30
这篇文章主要介绍了css一些不常见但很有用的属性操作大全,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-09-28
这篇文章主要介绍了解决搜索框和搜索按钮button边框不能重合的问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-09-28
最新评论
html相册浏览页面怎么做,ul结合CSS制作网页相册滑动浏览效果相关推荐
- html图片滚动浏览,ul结合CSS制作网页相册滑动浏览效果
别开生面纯CSS实现相册预览 ximicc.com body{ font-size:12px; color: #CC0000; } p { background-color: #F1FAFE; } # ...
- html做相册浏览,ul结合CSS制作网页相册滑动浏览效果
别开生面纯CSS实现相册预览 ximicc.com body{ font-size:12px; color: #CC0000; } p { background-color: #F1FAFE; } # ...
- 做网页很实用代码集合和CSS制作网页小技巧整理
做网页很实用代码集合 控制横向和纵向滚动条的显隐?<body style="overflow-y:hidden"> 去掉x轴 <body style=" ...
- html css做网页总结,学习CSS制作网页总结的一些经验
学习CSS制作网页总结的一些经验 互联网 发布时间:2008-10-17 19:28:20 作者:佚名 我要评论 让你使用DIV CSS排版 不是让你用换个标签然后再去按照表格的方式去排版 ...
- 制作html相册需要什么环境,html5和CSS3怎么制作一个相册
html5和CSS3怎么制作一个相册 发布时间:2021-01-25 10:23:25 来源:亿速云 阅读:78 作者:小新 这篇文章主要介绍了html5和CSS3怎么制作一个相册,具有一定借鉴价值, ...
- html ul做成表格,ul li css制作表格
实现方法:(利用div的ul和li列表标记打造类似表格效果) 我们首先分析一下如何制作:li是固定的宽度与高度(单元格),设置li在ul中浮动,当ul不够宽的时候,li就会自动另起一行排列(一行有多少 ...
- 评价页面html,利用html与css制作5星好评页面
五星评价 @font-face { font-family: 'iconfont'; /* project id 247957 */ src: url('//at.alicdn.com/t/font ...
- html css做骰子,纯 CSS 制作摇骰子(随机结果)
大家好,我是 Steven. 这一期,我们会做一个摇骰子的效果.等等,这个很容易?那就挑战一下,不用 JavaScript,只用 CSS 去制作,我们来看看怎么实现. 素材准备 首先,我们要准备一张图 ...
- 公众号滑动图代码_公众号怎么制作图片滑动的效果?怎么做可以上下滑动的长图?...
微信公众号图片怎么制作呢?图片太多又该怎么排版呢?接下来就和小编一起看看,怎么使用壹伴助手这款公众号编辑器,来实现公众号图片的排版吧~ 怎么使用公众号制作多图滑动的效果 在公众号文章中,如果插入的图片 ...
最新文章
- 阿里巴巴云原生的 2020,注定不凡的一年
- 见过世面的人到底有什么区别
- BZOJ 4422 Cow Confinement (线段树、DP、扫描线、差分)
- php函数删除非空目录,删除文件夹(非空目录)及其中所有文件的思路及源代码
- JNDI(datasource)在tomcat,JBOSS下的spring+quartz配置
- iphone上如何绘制饼图(使用CGContextAddArc)(原创)
- Java中的自增操作符与中间缓存变量机制
- 刷机出现未将对象引用设置到对象的实例是什么意思_Java 虚拟机 2:Java 内存区域及对象简单理解...
- html引入苹方字体,原 前端项目,引入苹方字体
- 计算机应用基础综合测试题b卷,10级《计算机应用基础》期末试卷B卷
- 三菱q系列plc连接电脑步骤_三菱plc连接电脑步骤
- DPPM(动态电源路径管理)与VINDPM(输入电压动态电源管理)
- 新手,如何快速建立一个网站?
- jQuery排他思想(siblings)
- 微信聊天记录导出(iOS) [2019.7.24]
- ZK实现SASL认证+Kafka连接ZK
- java工单管理系统_企业工单管理系统--使用mybatis
- Scrapy 规则化爬虫(1)——CrawlSpider及link_extractor
- Post请求body为list,校验里面的对象
- 126. 单词接龙 II