一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描述了每一个文字的形态,一般中文文件大,英文文件小,因为中文字符数多:在控制面板中可以找到文字文件夹,在C:\Windows\Fonts下也可以直接找到.另外如果想让自己的电脑上有更加丰富的字体,可以下载新的字体文件后复制到改位置. b).我们在文档中显示的字体应该在系统中能找到才会正常显示,比如你在…

○ css 精灵(Sprites)技术利用photoshop将图片整合,然后用background-images,background-position,background-repeat技术,对图片进行精确定位. ○ 优点:减少http请求数量,减少服务器压力,减少图片字节,提高网页加载速度 ○ 缺点: 后期不好维护,开发比较麻烦,做图片比较繁琐.…

精灵动画的实现 CSS Sprites在国内很多人叫CSS精灵,其实这个技术不新鲜,原理就是:靠不断的切换图片让人感觉视觉上不断在变化,例如gif动画之类的效果 那么前端如何实现精灵效果? 传统的就是靠定时器不断去改变一个元素的background-image属性了,简单的来说就是靠不断的替换图片,但是值得注意的问题就是图片如果很多,加载会比较慢,会占用大量网络资源 大多数的做法就是把图片都合成一张大图再利用CSS的以下属性 background-image background-repeat…

[转自己以前的文章] 无论用什么语言,大家敲程序的时候多多少少都会遇到做按钮的时候.今天分享一个之前学做按钮的技巧,有人叫做css精灵效果. 通常做按钮的思路都用附图中的第一种:两张图片交互的形式,让人看上去有按钮的感觉.但是第一种方式会有弊端,如果图片在服务器上,我们要想成功点击某个“按钮”,那么我们作为客户端必须要向服务器发送两次请求,下载好这两个图片,才能成功点击出现按钮的效果. 我们用第二种方式来看一下,用制图软件(如ps),把两个按钮图片合成上下排版的一张图片,给按钮上半个图片的高,然…

上班差不多有15天了,感觉每天都有写不完的也页面,每天都有不同的东西需要学习进步,很充实哦.今天接触到css精灵这个东西.其实之前有看过这种技术,但是没有操作过,只是听说这个技术很强大,能干嘛干嘛,但是对于没实际使用的我来说感觉 ....当今天真正接触到,才发现原来这么高大上. css精灵是 什么 呢 ? css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了. 它的原理:C…

CSS Sprites CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了.对于当前网络流行的速度而言,不高于200KB的单张图片的所需载入时间基本是差不多的,所以无需顾忌这个问题. CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的"background-image","back…

CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了.对于当前网络流行的速度而言,不高于200KB的单张图片的所需载入时间基本是差不多的,所以无需顾忌这个问题. CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“backg…

前端CSS-font属性,超链接的美化,css精灵,background综合属性 1. font属性 使用font属性,能够将字号.行高.字体,能够一起设置. font:14px/24px "Times New Roman","Microsoft YaHei","SimSun"; 等价于三行语句: font-size:14px; line-height:24px; font-family:"Times New Roman",&…

一.什么是css sprites css sprites直译过来就是CSS精灵.通常被解释为“CSS图像拼合”或“CSS贴图定位”.其实就是通过将多个图片融合到一张图里面,然后通过CSS background背景定位技术技巧布局网页背景.这样做的好处也是显而易见的,因为图片多的话,会增加http的请求,无疑促使了网站性能的减低,特别是图片特别多的网站,如果能用css sprites降低图片数量,带来的将是速度的提升. css sprites是什么通俗解释:CSS Sprites其实就是把网页中一…

在CSDN中浏览博客时,在博客的结束有上一篇和下一篇的按钮,当我们把鼠标放上去的时候,可以看到这两个按钮会进行颜色的改变,这种技术称为CSS精灵技术.通过查看源发现,其实他是通过超级链接的伪类实现的,当鼠标放上去的时候改变背景颜色,这种实现能够通过一个类来控制所有的超级链接标签.文章中是通过图片来设置的. 思路一:准备两张大小相同,内容不同的图片,正常情况显示一张,鼠标经过的时候显示另外一张 a:link 是伪类,是超级链接,默认情况 a:hover 做鼠标放上去的时候 思路二:将两张图片合成一…