友善表单的设计
网上的前辈们说表单的设计也是一门学问，去网上搜索了下资料。原文参考这里
先看一下表单排版：一个核心的衡量标准，最适合阅读和辨认习惯的为最佳的选择，同时根据表单内容尝试不同排版，并从中找出最合适的排列模式。
接着是背景区域的划分方式：简单的背景区分，也能达到很好的功能提醒的作用，当然这也要平衡运用，做到简洁有效；
还有是分清主次交互：交互节点（按钮）最大的作用是引导用户进入下一个流程，如果交互点含糊不清，会导致用户迷失该进入的步骤而导致整个交互过程的失败。
上面是局部细节，下面是整体调整：视觉辨别和阅读习惯还是最重要的考虑因素， 下图的简单提示能给我们很多设计提示。
相关内容还有：
使IE也支持属性选择器和focus行为
你是不是还在不厌其烦地为每种表单元素（input）类型（type）加上相应的class,（text、password、file...），Firefox, Opera等可以支持属性选择器input[type="???"]及其伪类:focus，那IE怎么办？我们还有javascript。
遍历所有的input元素
var input= document.getElementsByTagName("input");
for (var i = 0; i < input.length; i++)
{
input[i].className = input[i].type;
}给相应type的input定义一个className，名称等同于type，（type="password"则它的class="password"）。focus的效果可以用onfocus和onblur
input[i].onfocus = function() {
this.className = this.className + " " + this.className + "focus";
}
input[i].onblur = function() {
this.className = this.type;
}然后定义相应事件下的样式，比如.textfocus, .passwordfocus等。最后你当然要判断一下，因为Firefox, Opera不需要这些代码的支持，所以
window.onload = function() {
if (document.all && !window.opera) //判断是否为IE
{
styleform();
}
}具体效果看这里
vertical-align
我们在排版中经常碰到文字跟图片的垂直位置关系，以前我们一般都是直接在img标签里加align="absmiddle"绝对居中的属性，如果要在样式表里控制，该如何做呢？我以前一直不知道，原来可以用vertical-align，具体的演示可以看这里，（可能大家会问它跟valign的区别，valign是元素內的子元素的垂直位置，vertical-align不是，事实上他是用在inline元素上的，用来决定一个inline元素的垂直位置，像img默认是inline元素）
<img src="images/sample.jpg" align="absmiddle" />
OR
<img src="images/sample.jpg" style="vertical-align:middle;" />用div+css构架网页结构的时候，float的使用频率非常高，用了float，你就得想着怎么clear掉它，不然页面就歪给你看。
以前做网页，就干脆多加一个元素，给一个clear:both;的属性来clear.
<div id="wrapper" style="width:200px;background:#000;">
<div id="left" style="width:50px;float:left;background:#333;">浮动到左边<br />宽度50px</div>
<div id="right" style="width:150px;float:left;background:#666;">浮动到左边<br />宽度150px</div>
<div style="clear:both;"></div>
</div>这样虽然起到了效果，不过毕竟多了好多无关元素，结构看起来很乱。今天特别去网上搜索了下前辈们总结出来的方法，如下:
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */这样你只要给#wrapper加一个clearfix的className就可以了。