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

浏览器环境：

Camino
Firefox 1.0 PR Mac
Firefox 1.0 PR Win
IE 5 Mac
IE 6 Win
Opera 7.53 Mac
Opera 7.53 Win
Safari

表单控件：

Buttons
Submit buttons
Select boxes, single
Select boxes, multiple
Single line text inputs
Multi-line text inputs
Checkboxes
Radio buttons
File select controls

Buttons

Submit buttons

Select boxes, single

Select boxes, multiple

Single line text inputs

Multi-line text inputs

Checkboxes

Radio buttons

File select controls

更多请阅读：《Styling even more form controls》

html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre { display: block }
li { display: list-item }
head { display: none }
table { display: table }
tr { display: table-row }
thead { display: table-header-group }
tbody { display: table-row-group }
tfoot { display: table-footer-group [...]

1、使用 fieldset 和 legend标签
在 form 中，我们经常会对 form 中的信息进行分组，比如注册 form ，我们可能会将注册信息分组成基本信息（一般为必填），详细信息（一般为可选），那我们如何更好的来实现呢？我们可考虑在 form 中加入下面两个标签：

fieldset：对表单进行分组，一个表单可以有多个fieldset
legend：说明每组的内容描述

<form id=”demoform” class=”democss” action=”">
<fieldset>
<legend>Basic Register</legend>
<p>First name: <input type=”text” name=”fname” value=”" /></p>
…
</fieldset>
<fieldset>
<legend>Detailed Register</legend>
<p>Interest: <input type=”text” name=”interest” value=”" /></p>
…
&... 0 条评论»

form 无论是在网站的制作中，还是在网站的重构中，我们都会频繁地“碰面”，当“碰面”的次数多了，反而觉得他更让人迷茫，有种熟悉的“陌生”，越来越把握不了他。
下面我们将带大家走进 form 的世界，一起来熟悉、探讨、掌握他的“脾性”。

对于简单 form 的设计图（如图，yahoo 注册页面的一部分），我们如何来做整体的布局呢？大体我们可以选用以下 3 种方式来做布局：
1、使用 table 来布局
这是大家最常用的方法，虽然现在到处都在谈标准化，甚至更多的在说 div+css ，但怿飞还是推荐使用 table 来布局 form。对于标准，个人的另类理解“更符合逻辑，更效率快捷”。
为什么推荐大家使用呢？table 本就是用来显示二维数据，用 table 来布局 form 可以说是他的“老本行”。另外重要的一点是，对于复杂的 form ，table 能... 1 条评论 »

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) 格式，... 4 条评论 »

最常见的 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