表单的制作是在进行CSS网页布局的时候经常会碰到的，同时表单的制作也是一项比较头疼的问题，我们今天学习一个CSS表单实例，我个人认为效果挺不错。
看下面的效果：
首页我们进行整体的规划： 建立一个容器main将表单元素及其它相关元素一起扔进去。
设置标签h1，放置User Login。
设置标签h2，放置“请输入您的用户名和密码”。
设置“Username”与“Password”表单提示文字的容器。
设置表单输入框。
设置密码找回的文字链接。
最终我们设置提交表单的按钮图片。
我们形成如下的xhtml代码：
Example Source Code
[www.21shipin.com]<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.21shipin.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的不同之处，进一步简化代码。
Example Source Code
[www.21shipin.com]#title,.formt { width:208px; height:26px; line-height:26px; text-indent:5px; font-family:verdana, tahoma, sans-serif; font-size:10px; background:#ddd;}
.formt { display:block; font-weight:800; background:#fff;}
title与的formt共同属性：
高度与宽度为208px、26px。
行高26px，文字缩进5px。
定义了字体及文字大小。
设置背景色为#ddd浅灰色。
类.formt进行单独定义：
设置为块元素，文字加粗。
由于title是h1标签，浏览器默认为加粗，所以不必再单独定义。
设置formt的背景色为#fff白色。
接下来我们设置h2“请输入您的用户名和密码”
Example Source Code
[www.21shipin.com]#login { width:208px; height:24px; padding-top:11px; background:url(warning.gif) no-repeat 9px 8px; text-indent:28px; font-size: 12px; color:#666; font-weight:100;}
高度与宽度为208px、24px。进行上填充的调整，设置背景图片，文字缩进，以及字体加粗为100等。
同上面的情况类似，表单输入框类.username和类.password除了小图标的不同，其它的属性是相同的，进一步简化代码我们也将它们合并编写。
Example Source Code
[www.21shipin.com].username,.password {
background:#fff;
border:1px solid #ccc;
color:#000;
font-family:verdana, tahoma, sans-serif;
font-size:12px;
width:196px;
height:22px;
margin-left:6px;
padding-left:20px;
line-height:20px;
}
背景色为#fff白色，边框1px、实线、#ccc灰色。
设置文字颜色，字体及大小。
设置输入框的高度与宽度196px、22px。
由于想要与提示文字左对齐，我们设置左边距为6px。
为了给小图标留下足够的空间，我们内容左填充为20px。
输入框input内的文字可能与小图标不能水平对齐，我们预调行高为20px。
Example Source Code
[www.21shipin.com].username { background:url(username.gif) no-repeat 2px 2px;}
.password { background:url(password.gif) no-repeat 2px 2px;}
上面的代码分别给类.username和类.password定义小图标。需要你注重的是背景图片为不重复，定位在距左、距顶均为2px的地方。由于我们在上面的代码中，已定义了左填充为20px，小图标有足够的空间显示出来，而不用担心输入表单的文字会遮盖它。
下面我们定义忘记密码的链接与表单的按钮图片。
Example Source Code
[www.21shipin.com]#forget a { width:208px; height:20px; line-height:20px; text-indent:3px; font-family:verdana, tahoma, sans-serif; font-size:10px; color:#f60}
#button { width:208px; height:28px; }
.imgbutton {margin-top:7px; margin-left:132px; }
关于忘记密码的链接，进行简单的定义就可以了，当然，你也可以完善它，定义链接的hover属性。
我们设置按钮图片的容器button宽度和高度208px、28px。
表单提交按钮我们在xhtml中，是这样编写的：input type="image" src="loginin.gif"
这样编写的好处在于，我们输入完用户名和密码以后，除了可以用鼠标点击提交，直接按回车就可以提交表单。增强用户的易用性。
类imgbutton对表单按钮进行了设置，让它处在合适的位置，顶边距与左边距设置一下就可以了。
我们来看完整的CSS代码：
Example Source Code
[www.21shipin.com]* { margin:0; padding:0;}
#main { width:208px; margin:50px;}
#title,.formt { width:208px; height:26px; line-height:26px; text-indent:5px; font-family:verdana, tahoma, sans-serif; font-size:10px; background:#ddd;}
#login { width:208px; height:24px; padding-top:11px; background:url(warning.gif) no-repeat 9px 8px; text-indent:28px; font-size: 12px; color:#666; font-weight:100;}
.formt { display:block; font-weight:800; background:#fff;}
.username,.password {
background:#fff;
border:1px solid #ccc;
color:#000;
font-family:verdana, tahoma, sans-serif;
font-size:12px;
width:196px;
height:22px;
margin-left:6px;
padding-left:20px;
line-height:20px;
}
.username { background:url(username.gif) no-repeat 2px 2px;}
.password { background:url(password.gif) no-repeat 2px 2px;}
#forget a { width:208px; height:20px; line-height:20px; text-indent:3px; font-family:verdana, tahoma, sans-serif; font-size:10px; color:#f60}
#button { width:208px; height:28px; }
.imgbutton {margin-top:7px; margin-left:132px; }
我们完成了这个表单的xhtml与css代码的编写。从这个小实例中，你应该能够把握背景图片的灵活运用，这种应用的方式在CSS网页布局中是非常重要的，有很多效果是通过这种方式来实现的。
我们看最终的运行效果：
Source Code to Run [www.21shipin.com]
QQ：2693987339(点击联系)购买教程光盘
:
