CSSSprite技术.pptVIP

下载本文档

1
0
约3.55千字
约 14页
2017-05-30 发布于北京
举报
版权申诉

CSSSprite技术.ppt

1、本文档共14页，可阅读全部内容。
2、有哪些信誉好的足球投注网站（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击这里二次下载。
4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
5、该文档为VIP文档，如果想要下载，成为VIP会员后，下载免费。
6、成为VIP后，下载本文档将扣除1次下载权益。下载后，不支持退款、换文档。如有疑问请联系我们。
7、成为VIP后，您将拥有八大权益，权益包括：VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
8、VIP文档为合作方或网友上传，每下载1次，网站将根据用户上传文档的质量评分、类型等，对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档

第10章 CSS Sprite技术 10.1 什么是CSS Sprite技术 CSS Sprite技术，从其表面含义上讲就是CSS的精灵技术，而CSS的精灵到底是什么呢？实际上CSS的精灵就是图片里的一个个的图标元素，这些图标可以是按钮、标签、logo等等。如果你有分析网站代码的习惯的话，你会经常可以发现某些HTML所引用的img图片、背景图片所使用的图片是一幅繁杂的图片，它包含各种各样的小图片，它是众多小图片的大杂烩。 CSS Sprite技术听起来很深奥，而其实它实际上就是使用了background-position属性来进行同一个图片使用不同部分来进行显示，或者达到切换图片的效果。 10.2 CSS Sprite的简单应用 #link:hover{ background-position:0px -128px;/*设置背景图片偏移*/ } #link:visited{ background-position:0px -256px; /*设置背景图片偏移*/ } #link:active{ background-position:0px -384px; /*设置背景图片偏移*/ } 10.3 设计热门查询栏 10.3 设计热门查询栏 #frm .l2 .d {background-position:0 -32px; /*设置背景偏移*/} #frm .l3 .d {background-position:0 -64px; /*设置背景偏移*/} #frm .l4 .d {background-position:0 -96px; /*设置背景偏移*/} #frm .l5 .d {background-position:0 -128px; /*设置背景偏移*/} #frm .l6 .d {background-position:0 -160px; /*设置背景偏移*/} #frm .hov {background-color:#888888; /*设置背景颜色*/} 10.3 设计热门查询栏 script type=text/javascript function mouseoverhandle(obj) { obj.className+= hov; /*改变class属性*/ } function mouseouthandle(obj) { obj.className=obj.className.substring(0, 2) ; /*改变class属性*/ } /script 10.4 酷狗电台列表设计 10.4 酷狗电台列表设计 #frm .l1 .d .img {background-position:-38px 0; /*设置背景偏移*/} #frm .l2 .d .img {background-position:-38px -38px; /*设置背景偏移*/} #frm .l3 .d .img {background-position:-38px -76px; /*设置背景偏移*/} #frm .l4 .d .img {background-position:-38px -114px; /*设置背景偏移*/} #frm .l5 .d .img {background-position:-38px -152px; /*设置背景偏移*/} #frm .l6 .d .img {background-position:-38px -190px; /*设置背景偏移*/} #frm .l7 .d .img {background-position:-38px -228px; /*设置背景偏移*/} #frm .l8 .d .img {background-position:-38px -266px; /*设置背景偏移*/} #frm .l9 .d .img {background-position:-38px -304px; /*设置背景偏移*/} #frm .l10 .d .img {background-position:-38px -342px; /*设置背景偏移*/} 10.4 酷狗电台列表设计 script type=text/javascript function mouseoverhandle(obj) { obj.className+= choose; } function mouseouthandle(obj) { obj.className=obj.className.substring(0, 2) ; }/**/ /script 10.4 酷狗电台列表设计