分类“HTML/CSS/XML/XSL”所有日志

PNG 图片在网站设计中是不可或缺的部分，最大的特点应该在于 PNG 可以无损压缩，而且还可以设置透明，对于增强网站的图片色彩效果有重要的作用。
但为什么 PNG 图片却没有 GIF 和 JPG 图片的使用来得广泛呢，这个祸因应归属于微软的 IE 浏览器（Firefox 和 Opera 对 PNG 支持的比较好，而现在浏览器的主流IE6 却无法很好的支持）。不过微软在最近也开始改过自新了，新出的的 IE7 可以很好的支持 PNG，可以想象在未来的网络世界，PNG 图片的重要性将会更加凸显。
但在大家还在绝大多数的使用 IE6 的时候，我们又怎样在 IE6 的世界去完美使用 PNG 图片呢（PNG 图片的时候最重要的地方在于 PNG 透明背景图片的运用）。我们应该庆幸我们是幸福的！IE5.5+ 的 AlphaImageLoader 滤镜为通向 png 提供了一个道路，如果他载入的是 PNG(Portable Network Graphics) 格式，... 6 条评论 »

最常见的 checkbox 的使用：
<input type=”checkbox” name=”test” /> 点击这里没有任何效果
因为 checkbox 在高分辨率下，小方块会很小，很不容易点，这难免在用户体验上大打折扣。
下面看看我们的解决方法：
1、给 checkbox 配个 label “老婆”（老婆的特点：必要的）：
<input type=”checkbox” id=”test” name=”test” /><label for=”test”>点击这里就可以选中label</label>
for属性功能：表示 lable 标签要绑定的 HTML 元素，点击这个标签的时候，所绑定的元素将获取焦点。
补充： 除以上方法，还可以直接用 label 套嵌整个表单组件和文本标签，如：
<label><input type=”checkbox” />点击这里就可以选中label</label>
根据规范这样文本会自动与邻接的表单组件关联... 0 条评论»

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

@import的写法一般有下列几种：
@import ’style.css’ //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
@import “style.css” // Windows IE4/ NS4, Macintosh IE4/NS4不识别
@import url(style.css) // Windows NS4, Macintosh NS4不识别
@import url(’style.css’) // Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
@import url(“style.css”) //Windows NS4, Macintosh NS4不识别
由上分析知道，@import url(style.css) 和 @import url(“style.css”) 是最优的选择，兼容的浏览器也是最多了。而从字节优化的角度来看@import url(style.css) 无愧于最值得推荐的写法。

经常有人问网站重构的流程是先写 DIV 还是先写 CSS ，对于这个问题本人的理解如下：
先结构，后表现，再行为。通俗点就是先 HTML 构架，再 CSS 渲染，最后写入 Javascript。
在 Ajaxian 上看到的一个Gif 动画正好简单阐述了网站从结构到表现的过程。

方法一：改变 html 的排版
例如：
<div>
<img src=”http://www.google.com/intl/en_ALL/images/logo.gif” alt=”google” />
</div>
改为：
<div><img src=”http://www.google.com/intl/en_ALL/images/logo.gif” alt=”google” /></div>
方法二：设置 img 为 display:block
方法三：设置 vertical-align 属性为 top | bottom |middle |text-bottom

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

下划线“_”在 CSS2.1 规范中是被承认的 CSS 标识。
浏览器会忽略未知的 CSS 属性。
MSIE5+（Windows）会忽略 CSS 属性名前的 “_”。

因此，这个 CSS 的分析是，例如： _color:red。首页， 正确的，对于 CSS2.1 规范来说是被允许的（即使软件验证，只支持 CSS2.0 老版本，说它是一个 Bug ：他们是错误的，但它是正确的）。其次， 被任何浏览器忽略，除了 IE 。最后， 当颜色被处理：在 WinIE 中是红色。
如上，这就是所说的 IE 的 Bug ，特征是以简单明了的方式建立仅对 WinIE 有效的 CSS 属性（MacIE 没有这样的 Bug 和特征）。这样很容易调整，例如被错误执行的位置：在 WinIE 中被调整（见例子）。
#menu {
position: fixed;
_position: absolute;
…
}
同样的方法可以用来调整 min-height 的属性在 WinIE 中消失的现象（见例子）
#b... 0 条评论»

分别定义各种浏览器的透明效果：
.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 等浏览器

“*+html”是 css 的中的选择符，被 IE7 与 IE5.01 所使用，而区分 IE7 与 IE5.01 又有很简单的方法,便是 important，这样把 important 写在前面，就形成了单独针对 IE7 hack 的方法了。
*+html div.IE7 {
display:block !important;
display:none;
}

还有另外一个方法《The IE7 CSS Hack》，不过不推荐使用。