带有小图标的清爽CSS表单设计.doc

看下面的效果：首页我们进行整体的规划：建立一个容器main将表单元素及其它相关元素一起扔进去。设置标签h1，放置UserLogin。设置标签h2，放置“请输入您的用户名和密码”。设置“Username”与“Password”表单提示文字的容器。设置表单输入框。设置密码找回的文字链接。最终我们设置提交表单的按钮图片。我们形成如下的xhtml代码：Example Source Code UserLogin请输入您的用户名和密码UsernamePasswordForGetPassword?下面我们开始进行CSS代码的编写，实现这一款表单效果。我们发现h2元素title与表单提示文字的类formt，除了背景色不同，其它的属性是相同的，我们将它们合并起来编写，在后面我们单独定义类formt与title的不同之处，进一步简化代码。Example Source Code #title,.formtwidth:208px;height:26px;line-height:26px;text-indent:5px;font-family:verdana,tahoma,sans-serif;font-size:10px;background:#ddd;.formtdisplay:block;font-weight:800;background:#fff;title与的formt共同属性：高度与宽度为208px、26px。行高26px，文字缩进5px。定义了字体及文字大小。设置背景色为#ddd浅灰色。类.formt进行单独定义：设置为块元素，文字加粗。由于title是h1标签，浏览器默认为加粗，所以不必再单独定义。设置formt的背景色为#fff白色。接下来我们设置h2“请输入您的用户名和密码”Example Source Code #loginwidth:208px;height:24px;padding-top:11px;background:url(warning.gif)no-repeat9px8px;text-indent:28px;font-size:12px;color:#666;font-weight:100;高度与宽度为208px、24px。进行上填充的调整，设置背景图片，文字缩进，以及字体加粗为100等。同上面的情况类似，表单输入框类.username和类.password除了小图标的不同，其它的属性是相同的，进一步简化代码我们也将它们合并编写。Example Source Code .username,.passwordbackground:#fff;border:1pxsolid#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 .usernamebackground:url(username.gif)no-repeat2px2px;.passwordbackground:url(password.gif)no-repeat2px2px;上面的代码分别给类.username和类.password定义小图标。需要你注意的是背景图片为不重复，定位在距左、距顶均为2px的地方。由于我们在上面的代码中，已定义了左填充为20px，小图标有足够的空间显示出来，而不用担心输入表单的文字会遮盖它。下面我们定义忘记密码的链接与表单的按钮图片。Example Source Code #forgetawidth:208px;height:20px;line-height:20px;text-indent:3px;font-family:verdana,tahoma,sans-serif;font-size:10px;color:#f60#buttonwidth:208px;height:28px;.imgbuttonmargin-top:7px;margin-left:132px;关于忘记密码的链接，进行简单的定义就可以了，当然，你也可以完善它，定义链接的hover属性。我们设置按钮图片的容器button宽度和高度208px、28px。表单提交按钮我们在xhtml中，是这样编写的：inputtype=imagesrc=loginin.gif这样编写的好处在于，我们输入完用户名和密码以后，除了可以用鼠标点击提交，直接按回车就可以提交表单。增强用户的易用性。类imgbutton对表单按钮进行了设置，让它处在合适的位置，顶边距与左边距设置一下就可以了。我们来看完整的CSS代码：Example Source Code *margin:0;padding:0;#mainwidth:208px;margin:50px;#title,.formtwidth:208px;height:26px;line-height:26px;text-indent:5px;font-family:verdana,tahoma,sans-serif;font-size:10px;background:#ddd;#loginwidth:208px;height:24px;padding-top:11px;background:url(warning.gif)no-repeat9px8px;text-indent:28px;font-size:12px;color:#666;font-weight:100;.formtdisplay:block;font-weight:800;background:#fff;.username,.passwordbackground:#fff;border:1pxsolid#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;.usernamebackground:url(username.gif)no-repeat2px2px;.passwordbackground:url(password.gif)no-repeat2px2px;#forgetawidth:208px;height:20px;line-height:20px;text-indent:3px;font-family:verdana,tahoma,sans-serif;font-size:10px;color:#f60#b