零基础~仿qq登陆界面

时间 2019-11-24

标签零基础登陆界面栏目腾讯繁體版

原文原文链接

html代码：css

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>QQ登陆界面</title>
    <link rel="stylesheet" type="text/css" href="css/index4.css">
</head>
<body>
    <div id="container">
        <div class="input">
            用户名：<input type="text" id="user">
        </div>
        <div class="input">
            密&nbsp;码：<input type="password" id="password">
        </div>
        <div class="button">
            <input type="button" class="btn" value="登陆">
            <input type="button" class="btn" value="注册">
        </div>
    </div>
</body>
</html>

css代码：html

#container{
    height: 300px;
    width: 400px;
    border: 1px solid;
    margin-top: 300px;
    margin-left: 40%;
    background-image: url("../img/qq.jpg");
    background-repeat: no-repeat;
    background-position: center center;
}
.input{
    height: 40px;
    width: 280px;
    margin-top: 50px;
    margin-left: 50px;
}
.button{
    margin-top: 10px;
    margin-left: 100px;
}
.btn{
    margin-left: 30px;
}
#user{
    background-image: url("../img/head.png");
    background-repeat: no-repeat;/*图片背景取消平铺*/
    padding-left: 30px;
}
#password{
    background-image: url("../img/key.jpg");
    background-repeat: no-repeat;
    padding-left: 30px;
}

图片： url