css Sprites小实例代码
这是一个很简单的应用,不过在设计中,这样做可以减轻服务器的压力,是请求次数减少,是一个不错的方法。
特别要说明的是,在这种小图片上即使是两张图片其实就响应时间来说也慢不了多少,不过有一个问题,就是两张图片交替时容易出现背景图片从新加载而导致很段时间不显示的效果。(时间长短视服务器的响应速度和图片大小而变化)
下面是css的部分:
body {
font-family: "Lucida Sans", "Lucida Sans Unicode";
font-size: 14px;
line-height: 24px;
}
ul {
list-style-type: none;
}
li {
float: left;
}
a{
background-image: url(bg.gif);
height: 26px;
background-position: 53px 0px;
display: block;
margin-right: 10px;
width: 53px;
text-align: center;
color: #333333;
}
li a:link {
text-decoration: none;
}
li a:visited {
text-decoration: none;
}
li a:hover {
text-decoration: none;
background-position: 0 0px;//在这里规定从某一坐标开始显示图片}
从上面的代码不难看出,这里面起决定性作用的是
background-position:* *px;
这样,在复杂的css应用中,我们便可以解决背景图片从新加载的问题
相关推荐
-
js+css实现的圆角边框TAB选项卡滑动门代码分享(2款)
本文实例讲述了js+css实现的圆角边框TAB选项卡滑动门效果.实例包含两款CSS圆角代码,可鼠标点击,也可鼠标移动上去显示效果,分享给大家供大家参考.具体如下: 运行效果图:-------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js+css实现的圆角边框TAB选项卡滑动门代码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio
-
用js实现的抽象CSS圆角效果!!
大概是去年的时候吧,就在网上见过了现成的CSS圆角效果的CSS及HTML代码,例如: <html> <head> <title>css圆角效果</title> <meta http-equiv="content-type" content="text/html; charset=gb2312"> <style type="text/css"> div.RoundedCorne
-
JS+CSS实现的经典圆角下拉菜单效果代码
本文实例讲述了JS+CSS实现的圆角下拉菜单效果代码.分享给大家供大家参考,具体如下: 相信不少朋友会喜欢这一款菜单,CSS+JS实现的圆角下拉菜单,没有使用任何修饰性的图片哦,圆角完全是用JS完成的,因此代码多了些,想使用的朋友把JS文件提取出来另存,这样更合理些. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-jd-cicle-style-button-demo/ 具体代码如下: <!DOCTYPE html PUBLIC &qu
-
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
本文实例讲述了JS+CSS实现自适应选项卡宽度的圆角滑动门效果.分享给大家供大家参考.具体如下: 这是一款JS+CSS打造自适应宽度的圆角滑动门,这里的圆角主要是靠一张背景图片去实现,所指的宽度是滑动门上的导航的宽度,不管文字有多少,它都会一直顺着下去,不会被内容所撑破,兼容性方面,兼容IE6/7/8,火狐未试,应该也兼容 . 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-auto-width-nav-tab-codes/ 具体代
-
CSS+Jquery实现页面圆角框方法大全
所以我就想用一个既方便调用又方便更新的方法来实现,结果如愿以偿.先将此技术点总结如下: 在此之前我也寻找过目前网络上最流行的做法的实现方案,大体共总结出7种方法,但是发现他们的方法多多少少都存在缺陷,后来我自己做出了我自己觉得满意的方法. 先看目前网络上最流行的7种做法: 1,无图片纯css圆角框 收录理由:兼容性强,不用图形 图一 特点: 1.不用任何图形,使用很多个div容器模拟出圆角效果. 2.兼容性:通杀所有浏览器 缺点: 1.构造这个圆角需要加入太多的无语义的标签,结构比较冗余. 2.
-
CSS 使用Sprites技术实现圆角效果
首先来简单说一下什么是Sprites,Sprites是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了.对于当前网络流行的速度而言,不高于200KB的单张图片的所需载入时间基本是差不多的,所以无需顾忌这个问题. 第一步:创建我们的 Sprite 用PS等工具合成如图所示的图片(以一个像素的红线来区分) 第二步:编写HTML代码 首先,我们会给容器 div 一个 .roundedBox
-
CSS实现光滑圆角效果
这个效果非常独特,以前我所见过的这种特效实现过程非常复杂,但这里的源代码却非常简单,推荐收藏. <html xmlns:v><head><style>v\:*{behavior: url(#default#VML);}</style></head><body><v:roundRect style="position:absolute;left:20px;top:50px;width:200px;height:140px
-
纯CSS生成抗锯齿圆角的代码
抗锯齿圆角 .antialias-roundedcorners{width:650px;height:76px;padding:5px;background-color:#3847B4;} .spiffy{display:block} .spiffy *{ display:block; height:1px; overflow:hidden; font-size:.01em; background:#F1FFDD} .spiffy1{ margin-left:3px; margin-right:
-
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
本文实例讲述了JS+CSS实现可拖拽的漂亮圆角特效弹出层的方法.分享给大家供大家参考.具体如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xht
-
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
本文实例讲述了jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码.分享给大家供大家参考.具体如下: 这里实现圆角表单,圆角输入框,无刷新验证,漂亮唯美,是对这款基于HTML5/CSS3/jQuery来实现的表单效果的简要概括,用HTML5可以实现很多超乎寻常的效果,从此你会喜欢上HTML5,会骂一下万恶的IE,到现在IE8还不支持HTML5,正悲哀着呢. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-htm
-
用js实现CSS圆角生成更新
用js生成任意圆角,下一步就是加入直角导角,圆角导外,外圆角导个,还有边框处理,阴影生成,还有柔化处理都是以后的重点和难点. 中工工基 人遥仍失遥士大夫工士大夫花样百出地苛夺花样百出地人测试有的我不想信工大师傅苛夺工士大夫花样百出地模压 械夺棋栽夺苛夺棋地花样百出地模压械夺棋栽夺中工工基 人遥仍失遥士大夫工士大夫花样百出地苛夺花样百出地人测试有的我不想信工大师傅苛夺工士大夫花样百出地模压 械夺棋栽夺苛夺棋地花样百出地模压械夺棋栽夺 makeroalj("modul","con
-
CSS圆角区块容器生成器
当然还是用图片,只是可以生成自己所需色彩的图片. http://www.neuroticweb.com/recursos/css-rounded-box/ 将上面生成的图片和下面代码存在同一个文件夹下: CSS圆角区块容器 .rbroundbox { background: url(nt.gif) repeat; } .rbtop div { background: url(tl.gif) no-repeat top left; } .rbtop { background: url(tr.gif
-
提取自百度有啊的css圆角效果
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu
随机推荐
- MySQL 语句注释方式简介
- 在WIN7下安装和配置SQL Server 2005 Express Edition(精简版)
- sqlserver多版本查看版本号
- jquery弹出关闭遮罩层实例
- spring之Bean的生命周期详解
- 利用Java Apache POI 生成Word文档示例代码
- IOS开发UIButton(左边图片右边文字效果)
- 动态加载用户控件至DataList并为用户控件赋值实例演示
- PHP访问MYSQL数据库封装类(附函数说明)
- 用php解析html的实现代码
- php进行ip地址掩码运算处理的方法
- MySQL中create table语句的基本语法是
- jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
- jQuery 淡出一个图像到另一个图像的实现代码
- Java 敏感信息加密处理
- C#生成条形码图片的简单方法
- Swiper实现轮播图效果
- PHP对称加密算法(DES/AES)类的实现代码
- 推荐10款扩展Web表单的JS插件
- Android编程设计模式之责任链模式详解