与“CSS”标签相关日志

三角的一个特殊做法：
CSS部分：
em {
display:block;
font:0/0 “宋体”;
border:6px solid;
border-color:#fff #fff #fff #000 ;
}
XHTML部分：
<em></em>
代码简单，还可以利用border的颜色轻松做出各个方向的三角！

尽管有 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... 4 条评论 »

分别定义各种浏览器的透明效果：
.transparent{
filter:alpha(opacity=12);
-moz-opacity:0.12;
opacity:0.12;
background-color:#000;
}

filter:alpha(opacity=12); 支持 IE 浏览器
-moz-opacity:0.12; 支持 FireFox 浏览器
opacity:0.12; 支持 Opera，safari 等浏览器

Website：http://www.qrone.org/cssdesigner.html
作者是一位日本人，该CSS在线编辑有实时预览功能，并提供了写成类和直接定义两种代码。
能编辑文字，背景，边框，高宽，边距，布局等相关的一些简单效果，对于初学者会很有帮助。
首次需要加载的数据很多，网络慢需要耐心等待。