css一个图片包含多个图片|网站侧栏导航
<html>
<head><title>Hello World</title>
<style>
.style1{
width:60px;margin-left:570px;position:fixed;left:50%;bottom:134px;_position:absolute;_top:expression(documentElement.scrollTop+documentElement.clientHeight - this.clientHeight - 134+'px');display:block;
}
.style1 a{
background:url(./img/aa.png) no-repeat;
display:block;
width:60px;height:50px;
text-decoration:none;font:16px/50px "Microsoft YaHei";text-align:center;
color:white;
}
.style1 a span{
text-align:center;
display:none;
}
.style1 a:hover span{
background-color:#39F ;
display:block;width:59px; }
.style1 .gouwu{
background-position:-85px -185px;
}
.style1 .liren{
background-position:-85px -236px;
}
.style1 .xiuxian{
background-position:-144px -236px;
}
.style1 .huidingbu{
background-position:-144px -185px;
}
</style>
</head>
<body>
<div><span>Hello World</span></div>
<div class="style1">
<a href="javascript:window.scrollTo(0,638)" class="gouwu"><span>购物</span></a>
<a href="javascript:window.scrollTo(0,1600)" class="liren"><span>丽人</span></a>
<a href="javascript:window.scrollTo(0,2080)" class="xiuxian"><span>休闲</span></a>
<a href="javascript:window.scrollTo(0,0)" class="huidingbu"><span>回顶部</span></a>
</div>
</body>
</html>
css一个图片包含多个图片|网站侧栏导航的更多相关文章
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- iHover – 30+ 纯 CSS 实现的超炫的图片悬停特效
iHover 是一个令人印象深刻的图片悬停效果集合,完全基于 CSS3 实现,无依赖,能够搭配 Bootstrap 3 很好地工作.基于 SCSS 技术构建,便于修改变量.有模块化的代码,无需包含整个 ...
- CSS鼠标点击式变化图片透明度
今天分享前端代码主题:jequery控制css图片透明度 很多时候在网站图片处理上需要实现一些辅助效果,比如鼠标在图片上滑动时或点击时改变图片颜色(变灰或者其他),其实一个简单的办法就是改变图片css ...
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法(转)
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- 减少HTTP请求之合并图片详解(大型网站优化技术)
原文:减少HTTP请求之合并图片详解(大型网站优化技术) 一.相关知识讲解 看过雅虎的前端优化35条建议,都知道优化前端是有多么重要.页面的加载速度直接影响到用户的体验.80%的终端用户响应时间都花在 ...
- 浅谈CSS和JQuery实现鼠标悬浮图片放大效果
对于刚刚学习网页前台设计的同学一定对图片的处理非常苦恼,那么这里简单的讲解一下几个图片处理的实例. 以.net为平台,微软的Visual Studio 2013为开发工具,当然前台技术还是采用CSS3 ...
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法及优缺点分析
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- 利用Js或Css滤镜实现IE6中PNG图片半透明效果 IE6PNG妥妥的
接下来介绍几种PNG图片在IE6中不透明的解决办法 1.用自己的PNG,让IE6一边去吧 首先制作PNG图片的时候,另存为一个GIF图片,因为IE6是支持GIF图片透明,然后在css定义 .pngte ...
- 常量,字段,构造方法 调试 ms 源代码 一个C#二维码图片识别的Demo 近期ASP.NET问题汇总及对应的解决办法 c# chart控件柱状图,改变柱子宽度 使用C#创建Windows服务 C#服务端判断客户端socket是否已断开的方法 线程 线程池 Task .NET 单元测试的利剑——模拟框架Moq
常量,字段,构造方法 常量 1.什么是常量 常量是值从不变化的符号,在编译之前值就必须确定.编译后,常量值会保存到程序集元数据中.所以,常量必须是编译器识别的基元类型的常量,如:Boolean ...
随机推荐
- js 鼠标事件的抓取代码
js 鼠标事件的抓取代码,分享给大家. 1.通过ele.setCapture();设置鼠标事件的抓取. 2,应用可以通过单.双击文字来获取时间. <html> <head> & ...
- "=="和equals方法究竟有什么区别
(单独把一个东西说清楚,然后再说清楚另一个,这样,它们的区别自然就出来了,混在一起说,则很难说清楚) ==操作符专门用来比较两个变量的值是否相等,也就是用于比较变量所对应的内存中所存储的数值是否相同, ...
- 内存管理、ARC
内存管理 一.基本原理 1.什么是内存管理 移动设备的内存极其有限,每个app所能占用的内存是有限制的 当app所占用的内存较多时,系统会发出内存警告,这时得回收一些不需要再使用的内存空间.比如回收一 ...
- LintCode-Unique Path II
Follow up for "Unique Paths": Now consider if some obstacles are added to the grids. How m ...
- 20145120 《Java程序设计》第3周学习总结
20145120 <Java程序设计>第3周学习总结 教材学习内容总结 基本类型与类类型的概念 在java里使用数组和字符串 封装的概念 在java定义函数 重载的概念 static的概念 ...
- android编程常见问题-程序真机中不显示
新手编程常见问题: 问题表现:连接上手机后,程序不显示 解决版本:检查AndroidManifest.xml 文件中SDK版本的设置(要求要兼容当前手机版本系统),如下:
- Kali Linux 优化过程
修改输入法横向候选字 vim ~/.config/fcitx/conf fcitx-classic-ui.config 修改此行 为 false :VerticalList=False mb这玩 ...
- Highcharts-3.0.6
Highcharts-3.0.6 报表插件
- ExtJs3带条件的分页查询的实现
使用ExtJs的同志们一定知道GridPanel哈~神器一般,非常方便的显示表格类型的数据,例如神马用户列表.产品列表.销售单列表.XXXX列表等.从数据库中查询所需的数据,以列表的形式显示出来,我们 ...
- php 安全处理方案
Safe::mysqlSafe(); sql注入,升级5.3.6以上版本php 方案一:将所有请求中所有数据(get/post/cookie)实现mysql_escape_string进行安全处理. ...