效果图：
HTML文件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>带图标的登陆框</title> <link href="style/style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="sidebar"> <h3>请输入登录的用户名和密码</h3> <form method="post" action="index.html"> <label for="username">Username</label> <input type="text" name="username" id="username" class="text username" /> <label for="password">Password</label> <input type="password" name="password" id="password" class="text password" /> <a href="###">Get your Password?</a> <input type="submit" value="" class="submit" /> </form> </div> </body> </html>
样式文件：
body { background:#fff; font-size:12px; } div{ margin:0 auto; } #sidebar h3 { font-size:12px; font-weight:normal; background:url(../images/warning.gif) no-repeat left center; padding:0 0 0 20px; } #sidebar form * { display:block; margin:8px 0; } #sidebar form label { font-weight:bold; } #sidebar form input.text { width:160px; height:18px; border:1px solid #999; background:#fff; color:#999; } #sidebar form input.username { background:url(../images/username.gif) no-repeat 2px center; padding:0 0 0 20px; } #sidebar form input.password { background:url(../images/password.gif) no-repeat 2px center; padding:0 0 0 20px; } #sidebar form a { width:180px; color:#f60; } #sidebar form input.submit { width:70px; height:21px; background:url(../images/loginin.gif) no-repeat; border:none; cursor:pointer; margin:0 0 0 60px; }
原文：http://www.cnblogs.com/LO-ME/p/3617673.html