CSS制作规范
十月 18, 2009 by zeze · Leave a Comment
01. 一般常用CSS样式的范本：
* { background:#fff; margin:0; padding:0; font-family: Arial, Helvetica, sans-serif; color: #000; }
ul, ol, menu, dl { list-style:none; }
p {text-indent:2em;} 阅读全文 >>
CSS设置滚动条颜色
九月 9, 2009 by zeze · Leave a Comment
我们在浏览网页的时候有时可以看到网页滚动条颜色不是系统默认的样式，而是漂亮的红色或其它颜色样式，其实这就是在网页代码之间加入代码来实现的，这就是CSS设置滚动条颜色的作用。
页面滚动条代码及其解释如下：
scrollbar-highlight-color 设置或检索滚动条3D界面的亮边（ThreedHighlight）颜色 阅读全文 >>
IE6.0、IE7.0 与FireFox CSS兼容的写法(二)
九月 9, 2009 by zeze · Leave a Comment
1、 针对firefox ie6 ie7的css样式
现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，但是ie7对!important可以正确解释，会导致页面没按要求显示！找到一个针对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了。现在写一个CSS可以这样：
* html #1 { color: #666; } /* IE6 */
*+html #1 { color: #999; } /* IE7 */
那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。 阅读全文 >>
IE6.0、IE7.0 与FireFox CSS兼容的写法(一)
九月 9, 2009 by zeze · Leave a Comment
1.DOCTYPE 影响 CSS 处理
2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行
3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中
4.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width
5.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式
6.div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行
7.cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以
8.FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar,给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。 阅读全文 >>
input按钮鼠标移上去变色
九月 7, 2009 by zeze · Leave a Comment
第一步
把如下代码加入<head>区域中
<!–
input{color:fff; background: #B7B7B7; border:1px solid #555;}
.over {color:#fff; background: #7A7979; border:1px solid #555;}
.down {color:#fff; background: navy; font-style: italic}
–>
</style>
第二步
在<body>区中加入如下代码 more
<input
type=”Button”
onMouseOver=”this.className=’over’;”
onMouseOut=”this.className=”;”
onMouseDown=”this.className=’down’;”
onMouseUp=”this.className=’over’;”
value=”点击按钮”
onClick=”this.value=’欢迎进入WEB起点’” name=”Button”>
</center>
CSS解决未知高度垂直居中
九月 7, 2009 by zeze · Leave a Comment
原文标题：Vertical Centering in CSS
副标题：Yuhu’s Definitive Solution with Unknown Height
尽管有CSS的vertical-align特性，但是并不能有效解决未知高度的垂直居中问题（在一个DIV标签里有未知高度的文本或图片的情况下）。
标准浏览器如Mozilla, Opera, Safari等.，可将父级元素显示方式设定为TABLE(display: table;) ，内部子元素定为table-cell (display: table-cell),通过vertical-align特性使其垂直居中，但非标准浏览器是不支持的。
非标准浏览器只能在子元素里设距顶部50%，里面再套个元素距顶部-50% 来抵消。
CSS
body {padding: 0; margin: 0;}
body,html{height: 100%;}
#outer {height: 100%; overflow: hidden; position: relative;width: 100%; background:ivory;}
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; position: static;}
#inner {position: relative; top: -50%;width: 400px;margin: 0 auto;} /* for explorer only */
*+html #outer[id] {position: relative;} /* for IE7 */
*+html #middle[id] {position: absolute;} /* for IE7 */
div.greenBorder {border: 1px solid green; background-color: ivory;}
xhtml
<div id=”outer”>
<div id=”middle”>
<div id=”inner” class=”greenBorder”>
</div>
</div>
</div>
以上CSS代码的优点是没有hacks，采用了IE不支持的CSS2选择器#value[id]。
CSS2选择器#value[id]相当于选择器#value，但是Internet Explorer不支持这种类型的选择器。同样地.value[class]，相当于.value,这些只有标准浏览器能读懂。
测试：Firefox、Opera9.0、IE6.0、IE7.0、IE5.0通过。
转自:蓝色理想
我最常用的10个CSS类
九月 6, 2009 by zeze · Leave a Comment
在指定类名到元素时，许多开发人员常常感到困惑，而且他们也常常在最后才会发现使用的类竟然是错误的。
类名不应当描述元素看起来像什么或在哪里使用它。一个良好的类名应该说明它代表的是些什么内容或功能。这是我最常用的10个类名及其解释，希望能给你一个明确的应该使用什么样的类名的概念。
class=”fixed”
我在每个样式表中都使用这个类名。我将这个类指定在包含浮动子元素的容器上。我要用它来清除该容器内的浮动，使用这些代码：
.fixed:after{ content:"."; display:block; height:0; clear:both; visibility:hidden; } .fixed{ display:block; } /* */ .fixed{ min-height:1%; } * html .fixed{ height:1%; }
Pure CSS Animated Progress Bar(纯粹的CSS进度条)
九月 5, 2009 by zeze · Leave a Comment
Here’s a simple demonstration of how you can create animated progress bar using pure css. The trick is very simple. We need 3 elements, one container and 2 nested elements.
The Concept
We’ll put a cool background image in the container and define fixed width and height. First child (SPAN) will act as a progress bar. We’ll absolutely position second child (EM) above the progress bar and shift it to the left to a desired value. EM has the same background as the container so it gives an effect of progress bar stopping at certain percentage.
Markup
To keep it as meaningful as possible I used definition list (DL) to list for several values. For single progress bar you can use any element you want. I love paragraphs so I used P in my example.
<dd> <span><em style="left:100px">50%</em></span> </dd>
I decided to use inline styles for left EM placement. It is more convenient to write both values at the same place at once.
Animation
How is it done? Using animated gif of course. Remember those? SPAN has a 200px wide background gif that animates from “zero” to 200px. No matter what percentage we use it goes all the way and stops. Effect of stopping at certain percentage is done with EM as I mentioned earlier.
EM placement
In my example I use 200 pixels wide progress bar. EM element is also 200px wide. So each percentage is 2px wide. If we want to accurately shift the EM we need to multiply percentages with 2.
i.e. 50% will mean 100px left offset, 24% will mean 48px offset, 75% – 150px etc. You get the picture. 
