网页每次加载不同样式的实现方法
2010-12-27 15:54:32 阅读85 评论0 272010/12 Dec27
【明确需求】
网页加载样式表default.css，会展现默认风格。同时为实现多种风格，制作了skin1.css，skin2.css，skin3.css三种定制样式。如果在加载default.css后，再加载其中某一样式表，则会覆盖默认风格，展示新风格；
每次随机加载skin1.css、skin2.css、skin3.css，或者使用默认风格。需要注意的一点是，随机加载也有可能使这一次和上一次的样式相同。
【实现思路】
使用document.write动态向<head />中写入css载入语句；
通过生成的随机数，随机加载样式表；
使用cookie机制记录当前风格，确保下次下次风格与当前风格一定不同。
浏览器Hack
2010-11-30 15:06:49 阅读36 评论0 302010/11 Nov30
ie7 *_color:#fff;
ie8 color:#fff\0;
ie6/ie7 *color:#fff;
ie7/ie8 color/*\**/:#fff\9;
ie6/ie7/ie8 color:#fff\9;
firefox @-moz-document url-prefix(){.a{color:#fff;}}
safari/chrome @media screen and (-webkit-min-device-pixel-ratio:0){.a{color:#fff;}}
mobile webkit/iphone @media screen and (max-device-width: 480px) {.a{color:#Fff;}}
body em 字体大小
2010-11-29 11:26:51 阅读50 评论0 292010/11 Nov29
任意瀏覽器的預設字型高都是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會繼續父級元素的字型大小。
所以我們在寫CSS的時候，需要注重：
1. body選取器中聲明Font-size=62.5%；
2. 將你的原來的px數值除以10，然後換上em作為單位；
3. 重新計算那些被拉近的字型的em數值。避免字型大小的重複聲明。
CSS Border使用小分享
2010-11-2 15:56:41 阅读39 评论0 22010/11 Nov2
#test1 {
height:20px;
width:20px;
border-color:#FF9600 #3366ff #12ad2a #f0eb7a;
border-style:solid;
border-width:20px;
}
#test2 {
height:20px;
width:20px;
border-color:#FF9600 #3366ff #12ad2a #f0eb7a;
border-style:dotted;
border-width:20px;
}
全局字体最佳实践
2010-9-9 17:14:10 阅读47 评论0 92010/09 Sept9
body {font-family: Arial, sans-serif; } 这是我迄今发现的最好的全局字体解决方案。当然，所谓“最好”，也只是基于我个人的评判标准。所以我还是得分析一下其他的写法有什么缺点，最后再总结这个写法的特点。
body {font-family: "宋体", sans-serif; } 这个写法可能的缺点在于：
1. 宋体在Safari和Vista的IE 7下，看起来很难看。（我稍后把截图补上）
2. 宋体的英文字很难看。
3. 如果在CSS里写中文，你得小心你HTML和CSS的编码是否一致。
body {font-family: SimSun,sans-serif; } 这样写，可以避免上面的第三个问