CSS Sprite (CSS精灵)
摘要:也许你遇到过这样的情况,当你看到一个好看的网站,想下载它的图片时,发现下下来的不是一个单独的图片,而是好多图片组合在一起的一张大图片。这就是典型的CSS精灵。CSS精灵,英文名称CSS Sprite,是一种将网站中的小图片组合成一张大图片在网站中使用的方式。为什么要将小图片组合成大图片呢?主要是为了减少浏览器对服务器的请求次数。因为用户在浏览网站的时候,每次请求都是需要时间的。也许你的网页代码,图片,JS等的下载并不是最占用用户浏览时间的,占用户浏览时间最多的是用户每次的请求时间。html每个请求都要经过TCP协议的三次握手,用http watch观察一下浏览网站的时间构成,就能发现,请求占用
阅读全文
posted @
2011-12-14 08:58
冬之鸟
阅读(630)
推荐(0)
Ie6下弹出层光标闪的问题
摘要:我用JS生成一个弹出层<div><div>,这个弹出层下面有一个文本框,当文本框获取到焦点时,里面的光标一闪一闪的,这时,弹出层也无法遮住闪烁的光标,也就是页面上看到弹出层里有一个地方,有条竖线一闪一闪的,解决方法:$(this).focus(); $(this).blur();先这样解决吧,如果大家有啥好的见意可以说一下。
阅读全文
posted @
2011-12-12 14:56
冬之鸟
阅读(520)
推荐(0)
LESS介绍及其与Sass的差异
摘要:CSS本身对我来说从来不是问题,但是我很好奇使用变量来沿着一个调色盘为我的网站或模板创建一些东西的想法。拥有一个提供固定数量选项可选的色盘可以让我避免颜色太跳跃以至于从一个已定的风格中脱离。
阅读全文
posted @
2011-11-30 17:10
冬之鸟
阅读(495)
推荐(0)
CSS Hack
摘要:由于不同的浏览器对CSS的支持及解析结果不一样,还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。
CSS Hack大致有3种表现形式,CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack,CSS Hack主要针对IE浏览器。
阅读全文
posted @
2011-09-27 09:25
冬之鸟
阅读(985)
推荐(0)
如何制作一个漂亮的 CSS 按钮
摘要:如今 Web Application 横行,在 Web 2.0 网站的各种设计元素中,按钮是无法或缺的。如何用最简洁的方法制作最漂亮的按钮就成为了一个问题。本文讲述的方法,代码上简洁,符合 XHTML 标准,不需要 Javascript,只需要纯 CSS 即可完成,而且通用性很好,使用起来也很方便。上图即为最终成品的例子,下面我将详述整个制作过程,相信通过这个教程您肯定可以学会。
阅读全文
posted @
2011-09-15 16:42
冬之鸟
阅读(3562)
推荐(0)
用css实现网页背景渐变
摘要:用css实现网页背景渐变的代码如下:一、从上往下渐变Example Source Code:body{FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#000000);}二、从左上至右下渐变Example Source Code:body{FILTER: Alpha( style=1,opacity=25,finishOpacity=100,startX=50,finishX= 100,startY=50,finishY=100);backgr
阅读全文
posted @
2011-09-14 09:46
冬之鸟
阅读(1318)
推荐(0)
target 属性 -- 链接目标
摘要:_blank -- 在新窗口中打开链接
_parent -- 在父窗体中打开链接
_self -- 在当前窗体打开链接,此为默认值
_top -- 在当前窗体打开链接,并替换当前的整个窗体(框架页)
一个对应的框架页的名称 -- 在对应框架页中打开
阅读全文
posted @
2011-08-09 14:58
冬之鸟
阅读(282)
推荐(0)
png在IE6下的解决办法
摘要:正常情况下,ie6不支持png图片做背景,一是不透明,二是不能定位,三是不能循环
阅读全文
posted @
2011-06-22 11:23
冬之鸟
阅读(4837)
推荐(4)
为页面添加正确的doctype声明-W3C标准
摘要: DOCTYPE是document type的简写。主要用来说明你用的XHTML或者HTML是什么版本,浏览器根据你DOCTYPE定义的DTD(文档类型定义)来解释页面代码。
阅读全文
posted @
2010-01-13 16:17
冬之鸟
阅读(1210)
推荐(0)
css中em与px的介绍及换算方法
摘要:em是什么?
em指字体高,任意浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。为了简化font -size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。
em有如下特点:
1. em的值并不是固定的;
2. em会继承父级元素的字体大小。
阅读全文
posted @
2010-01-06 11:38
冬之鸟
阅读(506)
推荐(0)
css规范
摘要:近期在做样式的时候发现之前自己写的样式一点也不规范,东拼西凑,名字也不统一,遂在网上搜了点资料,跟大家分享一下: 一.文件命名规范 全局样式:global.css; 框架布局:layout.css; 字体样式:font.css; 链接样式:link.css; 打印样式:print.css; 二.常用类/ID命名规范 页 眉:header 内 容:content 容 器:cont...
阅读全文
posted @
2009-07-23 13:34
冬之鸟
阅读(4293)
推荐(1)
scrollWidth,clientWidth与offsetWidth的区别
摘要:scrollWidth
是对象的实际内容的宽,不包边线宽度,会随对象中内容的多少改变(内容多了可能会改变对象的实际宽度)。
clientWidth
是对象可见的宽度,不包滚动条等边线,会随窗口的显示大小改变。
offsetWidth
是对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变。
阅读全文
posted @
2009-07-22 16:38
冬之鸟
阅读(244)
推荐(0)
DIV+CSS设计时浏览器兼容性
摘要: 什么是浏览器兼容:当我们使用不同的浏览器(Firefox IE7 IE6)访问同一个网站,或者页面的时候,会出现一些不兼容的问题,在这种浏览器下显示正常,在另一种下就乱了,我们在编写CSS的时候会很恼火,刚修复了这个浏览器的问题,结果另外一个浏览器却出了新问题。
阅读全文
posted @
2009-07-21 13:55
冬之鸟
阅读(1048)
推荐(0)