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通过。
转自:蓝色理想
20个绿色调网站大赏
九月 6, 2009 by zeze · Leave a Comment
有人说绿色是和平、绿色是环保、绿色是希望……，哪到底什么样的产品网页需要用绿色？是个人爱好还是有特别的意思呢？绿色和其他什么颜色搭配起来比较舒服呢？这里举出了20个绿色相关的页面设计供大家参考。
Panda Sofa’s作者：http://downsign.deviantart.com/
aero定义列表: DL DT DD
九月 6, 2009 by zeze · Leave a Comment
定义列表和其他类型的列表稍有不同，它由两部分组成：名称和定义。DT 指定名称，为内联元素。DD 指定定义，为块级元素。
标准属性
id, class, title, style, dir, lang, xml:lang
事件属性
onclick, ondblclick, onmousedown, onmouseup, onmouseover,
onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
我最常用的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%; }
XHTML中的alt属性和title属性
九月 6, 2009 by zeze · Leave a Comment
XHTML是CSS布局的基础，52CSS.com一直强调XHTML知识的学习，重视语义和文档的结构。title 和alt 属性，给我最直观的感受就是，可以提高文档的适应性，并合理提高关键词密度。在XHTML标准里，图片的alt 属性是必须的。
alt属性 阅读全文 >>
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. 
