2024年清爽背景图片范文
篇一：带有小图标的清爽CSS表单设计
看下面的效果：
首页我们进行整体的规划：
建立一个容器main将表单元素及其它相关元素一起扔进去。
设置标签h1，放置UserLogin。
设置标签h2，放置“请输入您的用户名和密码”。
设置“Username”与“Password”表单提示文字的容器。
设置表单输入框。
设置密码找回的文字链接。
最终我们设置提交表单的按钮图片。
我们形成如下的xhtml代码：
ExampleSourceCode
UserLogin
请输入您的用户名和密码
Username
Password
ForGetPassword?
下面我们开始进行CSS代码的编写，实现这一款表单效果。
我们发现h2元素title与表单提示文字的类formt，除了背景色不同，其它的属性是相同的，我们将它们合并起来编写，在后面我们单独定义类formt与title的不同之处，进一步简化代码。
ExampleSourceCode
#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“请输入您的用户名和密码”
ExampleSourceCode
#login{width: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除了小图标的不同，其它的属性是相同的，进一步简化代码我们也将它们合并编写。
ExampleSourceCode
.username,.password{
background:#fff;
border:1pxsolid#ccc;
color:#000;
2024年清爽背景图片范文
