表单让CSS来制作并体验亲和力


表单让CSS来制作并体验亲和力

文章插图
表单让CSS来制作并体验亲和力

文章插图

【表单让CSS来制作并体验亲和力】对于表单,很常用 。但是在web standard建站的时候,他的排版往往让人遗忘,到了真正用到的时候就发现让人头疼,当然我也遇到过 。我现在要介绍一个用
标签制作漂亮而且具体亲和力的表单的方法 。
基本的xhtml:
已注册用户登录


用户登录














您忘记密码?


看了代码,发现标单描述文字都在中,只要让标签浮动左对齐,fieldset包含的清除浮动,就可以实现我们常见的那类布局 。
下面是基本的CSS:

运行代码框
Form demo已注册用户登录
用户登录

您忘记密码?

未注册创建帐户
用户注册您的电子邮箱不会被公布出去,但是必须填写. 在您注册之前请先认真阅读服务条款.
*(最多30个字符)
*
*(最多15个字符)
*
先看看条款? ** 在提交您的注册信息时, 我们认为您已经同意了我们的服务条款.
* 这些条款可能在未经您同意的时候进行修改.

[Ctrl A 全部选择 提示:你可先修改部分代码,再按运行]
2.表单界面设计的亲和力,布局,颜色,字体,文字大小,行高等要素 。我使用了
字体: Arial, Helvetica, sans-serif
字体大小:12px 14px
颜色:#666666 #1E7ACE #000000 淡兰色,灰色,黑色给用户稳重安全的感觉
fieldset label {
float:left;
width:120px;

推荐阅读