仓酷云

标题: 来谈谈:CSS Sprites简介和优弱点 [打印本页]

作者: 只想知道    时间: 2015-1-15 23:34
标题: 来谈谈:CSS Sprites简介和优弱点
目前我们的站就是div+css做的,美工可以通过css直接控制我的程序输出的页面动态数据的样式DIV就只是布局元素.
网页制造poluoluo文章简介:阿里妈妈UED谈CSSSprites手艺.
CSSSprites简介
一般被意译为“CSS图象拼合”或“CSS贴图定位”。CSSSprites并非一门新手艺,今朝它已在网页开辟中开展得较为成熟,阿里巴巴各子公司的网页中各处都可发明csssprites的影子。但CSSSprites并非甚么清规戒律,但在良多情形下,它有着必定的上风,最主要的是它能够加重服务器的负载,进步网页加载速率。跟着Web计划向着精巧、奇妙的偏向开展,计划师们入手下手思索利用非Javascript的方式制造鼠标滑过、悬停菜单的效果,这时候CSSSprite应运而生。
说白了,CSSSprites实在就是把网页中一些背景图片整合到一张图片文件中,再使用CSS的“background-image”,“background-repeat”,“background-position”的组合举行背景定位,background-position能够用数字能准确的定位出背景图片的地位。
当页面加载时,不是加载每一个独自图片,而是一次加载全部组合图片。这是一个了不得的改善,它年夜年夜削减了HTTP哀求的次数,加重服务器压力,同时延长了悬停加载图片所必要的工夫提早,使效果更流利,不会停留。
CSSSprites使用
在这方面,淘宝网做的对照好,我就以淘宝网为例吧。
实例一:淘宝频道页面导航
最终效果:

点击缩小

sprites图:




网页制造poluoluo文章简介:阿里妈妈UED谈CSSSprites手艺.

实例二:淘宝首页
最终效果:


点击缩小

sprites图:

CSSSprites长处
CSSSprites为何俄然跑火,跟可以提拔网站功能有关。不言而喻,这是它的伟大长处之一。
CSSSprites弱点
固然CSSSprites是云云的壮大,可是也存在一些不成无视的弱点。
CSSSprites总结
功能名列前茅。CSSSprites十分值得进修和使用,出格是页面有一堆ico(图标)。总之良多时分人人要衡量一下利害,在决意是否是使用CSSSprites。为坚持兼容性和保护性,sprites图片中的各个部分坚持必定的间隔是一种不错的做法。

业界越来越关注DIV+CSS的标准化设计,大到各大门户网站,小到不计其数的个人网站,在Div+CSS标准化的影响下,网页设计人员已经把这一要求作为行业标准。
作者: 变相怪杰    时间: 2015-1-17 23:20
可以使用CSS检查工具进行设计。
作者: 若相依    时间: 2015-1-25 08:07
经过两天的学习,总算对Dreamweaver有进一步的了解了,心中不免有些激动。今天和其他几位老师交流了一下,感觉受益匪浅.
作者: 小妖女    时间: 2015-2-2 20:55
以上大概就是文字图片的一些链接方法,通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识,他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起,其功能强大,使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。
作者: 老尸    时间: 2015-2-24 22:33
HTML技术的不断发展和完善,随之而产生了众多网页编辑器,从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器(则原始代码编辑器)
作者: 海妖    时间: 2015-3-7 14:03
还是在Dreamweaver所见即所得添加链接是,可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。
作者: 再现理想    时间: 2015-3-15 08:44
时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上
作者: 小女巫    时间: 2015-3-22 00:10
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。




欢迎光临 仓酷云 (http://ckuyun.com/) Powered by Discuz! X3.2