CSS技巧：带有小图标的清爽CSS表单设计

首页我们进行整体的规划：
　　建立一个容器main将表单元素及其它相关元素一起扔进去。
　　设置标签h1，放置User Login。
　　设置标签h2，放置“请输入您的用户名和密码”。
　　设置“Username”与“Password”表单提示文字的容器。
　　设置表单输入框。
　　设置密码找回的文字链接。
　　最终我们设置提交表单的按钮图片。

　　我们形成如下的xhtml代码：
<div id="main">
    <h1 id="title">User Login</h1>
    <h2 id="login">请输入您的用户名和密码</h2>
    <p class="formt">Username</p>
    <p><input name="Username" type="text" class="username"></p>
    <p class="formt">Password</p>
    <p><input name="Password" type="password" class="password"></p>
    <p id="forget"><a href="http://www.52css.com/" target="_blank">ForGet Password ? </a></p>
    <p id="button"><input type="image" src="loginin.gif" class="imgbutton" /></p>
</div>

　　下面我们开始进行CSS代码的编写，实现这一款表单效果。

　　我们发现h2元素title与表单提示文字的类formt，除了背景色不同，其它的属性是相同的，我们将它们合并起来编写，在后面我们单独定义类formt与title的不同之处，进一步简化代码。
#title,.formt { width:208px; height:26px; line-height:26px; te