* { 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 []

[ 可先修改部分代码 再运行查看效果 ]