带图标的登陆框

效果图：

 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;
}

 

posted @ 2014-03-22 15:57  胡椒粉hjf  阅读(565)  评论(0)  编辑  收藏  举报