通过阅读和学习书籍《css3实战》总结
《css3实战》/成林著.—北京机械工业出版社2011.
ui元素状态伪类选择器   ui元素的状态一般包括：可用、不可用、选中、未选中、获取焦点、失去焦点、锁定、待机等。
表单设计原则：   ui设计的一个核心就是让表单更可用、易用和好用。表单设计应该符合三层模型，即表单应该具有三种属性：感知（页面显示的布局）、对话（内容呈现的问题和回答）、关系（交互的任务结构）。
实战体验一：设计可用的表单   设计并实现简洁、美观、可用性好、符合web标准的表单，是web设计师追求的目标。
特点：简洁的线框、可爱的小图标、使得登录表单精巧宜人 html：首先要设计合理的表单结构，离不开表单辅助元素的配合，其中label元素应该通过for属性绑定到表单域上，for的属性值应设置为表单域的name属性值。 用户登录 姓名 密码
css：设计文本框内左侧的图标需要一点技巧：通过左侧补白挤出一点位置用来显示背景，背景当然是精确定位和静止平铺的，同时还应该考虑文本框的高度和输入文本居中等问题。
不可用状态（disabled=“disabled”） 当用户登录成功后，不妨通过脚本把文本框设置为不可用状态（disabled=“disabled”）状态，通过e：disabled选择器 让文本框显示为灰色，以告诉用户该文本框不可用了。
html：在文本框中补加disabled属性
用户登录 姓名 密码
css：在基础样式上添加如下样式
#login input:disabled#name { /*姓名文本框处于不可用状态时的样式*/ background:#ddd url(images/name1.gif) no-repeat 2px 2px; border:1px solid #fff;}#login input:disabled#password { /*密码域处于不可用状态时的样式*/ background:#ddd url(images/password1.gif) no-repeat 2px 2px; border:1px solid #fff;}
进一步美化：设计精美的表单能够留住用户的目光，甚至吸引用户登录。      
设计思路：整体结构分为四块，分别构建表单的不同区域
css样式
实战体验二：设计友好，易用的表单 不带样式表单
  html：
学生信息登记表 姓名：
备注：
兴趣： 文学 艺术 体育 其他
性别： 女 男
专业： 法律 英语 计算机 财会

样式一
css样式：

样式改进一：在title类样式表中添加一个右对齐声明，则标签提示文本向右显示，用户的眼睛就不用再左右两侧跳转了。 .title { width:100px; float:left; text-align:right; font-weight:bold; margin:0 40px;}
样式改进二：对于简单的表单，如果避免使用两列布局，也许会更好使用   对于用户来说，单行布局会更友好，更好用。因为它会降低用户视线左右移动的频率。
form { width:615px; height:450px; background:url(images/bg8.png) no-repeat center; padding:12px 0 12px 40px;}fieldset { border:none; }fieldset legend { display:none; }/*重设该样式表，让标签文本块状显示*/.title { display:block; font-weight:bold;}
样式改进三：添加必填提示信息 css：
.red { color:red; margin-left:-10px; padding-right:2px;}
html：
*姓名

样式改进四：友善的验证反馈信息 html:
*姓名 请填写真实姓名，不要输入别名或者昵称

css：
.error { color:white; background:red; padding:2px; margin:0 4px;}
样式改进五：优化表单项的排列顺序
样式改进六：适当分组用户体验会更好
样式改进七：表单设计要大气，这样用户输入更啊方便，也方便用户检查输入的内容
最终网页代码：
设计友好、易用的表单设计友好、易用的表单 学生信息登记表 必填信息 *姓名 请填写真实的汉字姓名
*性别男 女
*专业 法律 英语 计算机 财会 其他
选填信息 兴趣 文学 艺术 体育 其他
备注