零基礎~仿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

相關標籤/搜索