绑定图标文字表单

原创 Dale111 随笔 css 231阅读 2017-05-25 15:11:23 举报

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

    <title>登录页面</title>
    <style type="text/css">
        body{font-size: 12px;}
        .user{display: flex;width: 100%;}
        .user span{display: inline-block;width: 20px;height: 20px;}
        .name-label .user-icon{background: url(img/p.png) no-repeat;
        background-size: contain;}
        .pass-label .pass-icon{background: url(img/yuan.png) no-repeat;
        background-size: contain;}
        .name-label,.pass-label{width: 20%;text-indent: 0.8rem;}
    </style>
</head>
<body>

    <div class="login">
        <form action="#" method="post" name="form">
            <div class="user">
                <div class="name-label">
                    <span class="user-icon"></span><label for="username">用户名</label>
                </div>
                <div class="name-input">
                    <input type="text" placeholder="请输入用户名" id="username"/>
                </div>
            </div>
            <div class="user">
                <div class="pass-label">
                    <span class="pass-icon"></span>
                    <label for="password">密码</label>
                </div>
                <div class="pass-input">
                    <input type="password" placeholder="请输入密码" value="" id="password"/>
                </div>
            </div>
    </div>

</body>

</html>

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复