仓酷云

标题: 来一发利用CSS Sprite的一些最好理论 [打印本页]

作者: 山那边是海 时间: 2015-1-15 23:35
标题: 来一发利用CSS Sprite的一些最好理论
有了CSS，我们不再需要用FONT标签或者透明的1pxGIF图片来控制标题，改变字体颜色，字体样式等等
网页制造poluoluo文章简介：尽人皆知，削减网站加载工夫的最无效的体例之一就是削减网站的HTTP哀求数。完成这一方针的一个无效的办法就是经由过程CSSSprites――将多个图片整合到一个图片中，然后再用CSS来定位.
　尽人皆知，削减网站加载工夫的最无效的体例之一就是削减网站的HTTP哀求数。完成这一方针的一个无效的办法就是经由过程CSSSprites——将多个图片整合到一个图片中，然后再用CSS来定位。明天我们经由过程一个实例来进修CSSSprites的利用办法。
上面是一张样图：

图片1
　　本文的目标并非讲CSSSprite怎样让一个网站更快，而是说一些利用CSSSprite的时分的一些最好理论。
　　不要比及你完成切片以后才入手下手sprite.

　　假如你边切图边写CSS，然后等你完成了全部网站以后再来拼接这些图片到一个Sprite中，你就不能不完整重写你的CSS，你也必需要消费良多的工夫来用PS拼接大批的图片——这是件使人倍感纠结的事变。可是假如边切图边整合，就会对照简单些。
　　把图片放到它要显现的中央的绝对的中央

　　这个小技能貌似对照难了解。我直到创立一个对照年夜的sprite的时分才了解到这一点。好比，假如我们但愿一个图片呈现在一个元素的左边：

　　将谁人图片放到sprite图片的右侧(本文入手下手的谁人sprite图片)。如许的话，当你经由过程CSS挪动背景图片的地位的时分，基础上不成能有别的的小图片不测的呈现在它的四周。利用Sprite的时分经常碰到的一个成绩是图片会呈现在它不应呈现的地位。
　　定位时制止利用bottom或right等

　　当利用CSSsprite的时分，只用background-position:bottom-300px或background-position:right-200px;十分简单。这刚入手下手的时分是可行的，可是成绩是，当你在宽度上或高度上扩大相干sprite图片的时分，本来设置的地位多是错的，由于谁人图片已不再Sprite图片的底部或右部了。利用切实的地位来制止这个成绩。
　　给每一个图片充足的空间

　　就像你在本文顶部的实例图片看到的那样，那些小图片都被预留了充足的空间。为何不把他们塞到一块来让sprite图片更小呢?由于利用这些图片的元素一般城市有大批的内容并且大概会必要扩大的间距，以致于别的图片不会心外呈现。
　　例子：

　　例子中的每一个条目都有个带数字的图片作为背景图片。假如你细心看了下面的那张图片，你能够看到这三个数字图片是怎样错开分列的，如许假如内容增加，别的图片就不会心外呈现。
　　不必忧虑Sprite图片的像素巨细

　　假如你的网站经由优秀的计划，那末你将会有一年夜堆的图片来整合进到sprite内里，如许你就必要你个十分年夜的sprite来得当的安排这些图片。这是很不错的。sprite里的空缺不会占用太多的文件巨细。

在几乎所有的浏览器上都可以使用。15.以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。

作者: 冷月葬花魂 时间: 2015-1-17 23:34
在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

作者: 只想知道 时间: 2015-1-23 16:48
由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。

作者: 第二个灵魂 时间: 2015-1-31 19:11
Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

作者: 若相依 时间: 2015-2-7 00:00
只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。

作者: 透明 时间: 2015-2-19 07:19
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。

作者: 活着的死人 时间: 2015-3-6 14:12
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。

作者: 蒙在股里 时间: 2015-3-13 03:08
在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

作者: 分手快乐 时间: 2015-3-13 03:08
时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上

作者: 再见西城 时间: 2015-3-13 03:08
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

作者: 因胸联盟 时间: 2015-3-20 11:01
dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

欢迎光临仓酷云 (http://ckuyun.com/)