锐客网

  1. 首页 > 睿知 > >

表单让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;

推荐阅读


上一篇：王者荣耀周年庆永久皮肤 王者荣耀周年庆免费送什么皮肤

下一篇：白菜半棵、五花肉150克、粉条 粉条怎么吃