首页
|
网址导航
|
星座运势
|
天气预报
|
便民查询
|
万年历
|
手机查询
|
电子地图
|
交流论坛
影视预告
音乐咖啡
生活百科
CSS编程
JS编程
PHP编程
MYSQL编程
Linux服务器架设
Linux编程开发
热门搜索:
有限公司
感人故事
上海电视节
警匪
有情人
更多>>
热烈祝贺台州朗动科技的站长论坛隆重上线!(2012-05-28)
热烈庆祝伟大的祖国60周年生日 点击进来我们一起为她祝福吧(2009-09-26)
站长论坛禁止发布广告,一经发现立即删除。谢谢各位合作!.
(2009-08-08)
热烈祝贺台州网址导航全面升级,全新版本上线!希望各位一如既往地支持台州网址导航的发展.
(2009-03-28)
台州站长论坛恭祝各位新年快乐,牛年行大运!(2009-01-24)
台州Link正式更名为台州网址导航,专业做以台州网址为主的网址导航!(2008-05-23)
热烈祝贺台州Link资讯改名为中国站长资讯!希望在以后日子里得到大家的大力支持和帮助!(2008-04-10)
热烈祝贺台州Link论坛改名为台州站长论坛!希望大家继续支持和鼓励!(2008-04-10)
台州站长论坛原[社会琐碎]版块更名为[生活百科]版块!(2007-09-05)
特此通知:新台州站长论坛的数据信息全部升级成功!">
特此通知:新台州站长论坛的数据信息全部升级成功!
(2007-09-01)
台州站长论坛对未通过验证的会员进行合理的清除,请您谅解(2007-08-30)
台州网址导航|上网导航诚邀世界各地的网站友情链接和友谊联盟,共同引领网站导航、前进!(2007-08-30)
禁止发广告之类的帖,已发现立即删除!(2007-08-30)
希望各位上传与下载有用资源和最新信息(2007-08-30)
热烈祝贺台州站长论坛全面升级成功,全新上线!(2007-08-30)
网址推荐:
龙岩市人民政府
东吴证券
中国招商银行
Linux之家
非常美学
抗美援朝纪念馆
沟通空间
您当前的位置:
首页
»
DIV+CSS编程
»
无延迟翻滚的图形/CSS混合风格的按钮
无延迟翻滚的图形/CSS混合风格的按钮
论坛链接
无延迟翻滚的图形/CSS混合风格的按钮
发布时间:2007-09-26 22:01:21 浏览数:7042 发布者:superadmin 设置字体【
大
中
小
】
在一个具有图形背景的按钮中添加CSS风格的文本,这种建立按钮的方法结合了具有CSS翻滚(CSS rollover)标记的开发速度和效率,从而有效地提高按钮外表图像的三维效果。
相比于常规的图形按钮,这些图形/CSS混合按钮可易于建立和载入,因为你只需要为空白按钮外面建立和载入一个图像,而不是为每一个按钮建立各自的图像。
同一个图像可以使用在网页所有按钮的背景。按钮的文本标签都是简单的CSS风格文本。
预先载入的
图形/CSS混合风格的为数不多问题之一是对翻滚效果有所限制。使用这一技术的最简单的方法是,指定CSS风格文本的翻滚效果,并使用所有翻滚状态(rollover states)的相同按钮外形图像。这可以给你带来快速、简洁的翻滚效果,但在一定程度上限制了你的开发选项。
你也可以建立一些可交替使用的按钮图像并构建你的CSS规则,以为不同的翻滚状态改变背景图像。然而,这些方法给你带来更多灵活的设计,但当浏览器首次载入图像文件时,这些可交替使用的铵钮图像会出现延迟现象(除非你采用预先载入按钮图像的方法)。
预先载入图像技术已被人熟知,而且也被人们所接受。问题是预先载入图像增加了网页载入和出现在访问者浏览器的时间。用户访问的第一二分钟非常关键,所以你无论如何都必须使得网页的初始化更加快速。使用图形/CSS混合按钮可以减少图像预先载入的时间,当然如果预先载入能够消除,页面的初始化则更加快速。
没有延迟的翻滚──不使用预先载入图像
我已经找到一种创新的方法,这种方法可以满足不同的翻滚状态的可交替使用的按钮图像,而其中不需要任何图像文件的载入。我第一次接触这一技术是在网络设计者捷克人Petr Stanicek的站点上的文章上发现的。
为了获得一个典型的按钮翻滚效果,你通常需要建立三个独立的图像,如图A所示。其中一个是普通的按钮,一个是悬浮状态,以及一个是激活状态。普通按钮的图像文件将成为初始化页面载入的一部分,但其它两个图像将被分开地载入,这样使得它们能够在用户的浏览器中得以使用。
图A
无预先载入翻滚技术通过结合所有三个按钮外表图像而成为单一图像文件而得以实现,如图B所示。然而,不需要为每一翻滚状态指定不同的背景图像文件,你指定的是合成图像的位置偏移量。在页面初始化载入过程中,合成图像文件能够自动地载入,所以无需要预先载入;而且,在浏览器获得不同图像文件过程中也没有时间上的延迟。
图B
超大图像与背景图像位置偏移的结合使用可以使你有选择性地为每一按钮状态显示图像的不同部分。按钮文本的CSS框尺寸决定着显示在浏览器的背景图像的百分比。
对于这一技术,你必须清楚按钮外表的确切水平和垂直尺寸,并正确使用这些尺寸,才能建立图像文件和按钮的CSS规则。
上一篇:
Css:制作一个更漂亮一些的多选列
下一篇:
使用 CSS 创建固定宽度的布局
娱乐休闲专区
A 影视预告
B 音乐咖啡
C 英语阶梯
D 生活百科
网页编程专区
E AMPZ
F HTML
G CSS
H JS
I ASP
J PHP
K JSP
L MySQL
M AJAX
Linux技术区
N 系统管理
O 服务器架设
P 网络/硬件
Q 编程序开发
R 内核/嵌入
管理中心专区
S 发布网址
T 版主议事
U 事务处理