CSS Form Example：带有小图标的清爽CSS表单设计！

　　表单的制作是在进行CSS网页布局的时候经常会遇到的，同时表单的制作也是一项比较头疼的问题，我们今天学习一个CSS表单实例，我个人认为效果挺不错。www.52css.com原创，转载请注明出处。
　　看下面的效果：


　　首页我们进行整体的规划：

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

　　我们形成如下的xhtml代码：


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

　　我们发现h2元素title与表单提示文字的类formt，除了背景色不同，其它的属性是相同的，我们将它们合并起来编写，在后面我们单独定义类formt与title的不同之处，进一步简化代码。


　　title与的formt共同属性：
　　　高度与宽度为208px、26px。
　　　行高26px，文字缩进5px。
　　　定义了字体及文字大小。
　　　设置背景色为#ddd浅灰色。
　　类.formt进行单独定义：
　　　设置为块元素，文字加粗。
　　　由于title是h1标签，浏览器默认为加粗，所以不必再单独定义。
　　　设置formt的背景色为#fff白色。www.52css.com原创，转载请注明出处。

接下来我们设置h2“请输入您的用户名和密码”


　　高度与宽度为208px、24px。进行上填充的调整，设置背景图片，文字缩进，以及字体加粗为100等。

　　同上面的情况类似，表单输入框类.username和类.password除了小图标的不同，其它的属性是相同的，进一步简化代码我们也将它们合并编写。


　　背景色为#fff白色，边框1px、实线、#ccc灰色。
　　设置文字颜色，字体及大小。
　　设置输入框的高度与宽度196px、22px。
　　由于想要与提示文字左对齐，我们设置左边距为6px。
　　为了给小图标留下足够的空间，我们内容左填充为20px。
　　输入框input内的文字可能与小图标不能水平对齐，我们预调行高为20px。


　　上面的代码分别给类.username和类.password定义小图标。需要你注意的是背景图片为不重复，定位在距左、距顶均为2px的地方。由于我们在上面的代码中，已定义了左填充为20px，小图标有足够的空间显示出来，而不用担心输入表单的文字会遮盖它。

　　下面我们定义忘记密码的链接与表单的按钮图片。www.52css.com原创，转载请注明出处。


　　关于忘记密码的链接，进行简单的定义就可以了，当然，你也可以完善它，定义链接的hover属性。
　　我们设置按钮图片的容器button宽度和高度208px、28px。
　　表单提交按钮我们在xhtml中，是这样编写的：input type="image" src="loginin.gif"
　　这样编写的好处在于，我们输入完用户名和密码以后，除了可以用鼠标点击提交，直接按回车就可以提交表单。增强用户的易用性。
　　类imgbutton对表单按钮进行了设置，让它处在合适的位置，顶边距与左边距设置一下就可以了。

　　我们来看完整的CSS代码：


　　我们完成了这个表单的xhtml与css代码的编写。从这个小实例中，你应该能够掌握背景图片的灵活运用，这种应用的方式在CSS网页布局中是非常重要的，有很多效果是通过这种方式来实现的。

　　我们看最终的运行效果：www.52css.com原创，转载请注明出处。


　　

Article Provenance: 52CSS
Article Tags: CSS表单实例CSS表单实例