HTML

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Log</title>
    <link href="style.css" rel="stylesheet" media="all">
</head>
<body>
    <div class="sign">
        <div class="title">SIGN IN</div>
        <div class="user">
            <table>
                <tr>
                    <td>USERNAME</td>
                    <td><input class="input" type="text" name="username" > </td>
                </tr>
                <tr>
                    <td>PASSWORD</td>
                    <td><input class="input" type="text" name="password" > </td>
                </tr>
            </table>
        </div>
        <div class="button_position" >
            <input class=button type="submit" name="submit" value="SIGN IN">
        </div>
        <div class=copy >
            <small>copyright Ⓒ right 2016</small>
        </div>

    </div>
</body>
</html>

 

CSS

@charset "utf-8";

body{
    background: url(img/background.jpeg);
    background-size: cover;
    background-repeat: no-repeat;
}

.sign{
    font-family:monospace;
    font-weight: bolder;
    background-color: rgba(228, 255, 252, 0.3);
    border: #5a5a78 2px solid;
    border-radius:10px;
    padding: 50px 30px;
    max-width: 300px;
    position: absolute;
    right: 250px;
    top: 100px;
}

.title{
    font-size: 35px;
    text-align: center;
    margin-bottom: 20px;
}

.user{
    font-size: 20px;
}

.input{
    border-radius: 5px ;
}

.button_position{
    text-align: center;
}

.button{
    margin-top: 20px;
    margin-bottom: 40px;
    width: 60%;
    border-radius: 7px;
}

.copy{
    text-align: center;    
    margin-bottom: -25px;
    font-size: 10px;
}

 

 

sign in.jpg

 

 

 

Rate 3/10

 

 

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 A&B 的頭像
    A&B

    網頁前端新手上路辛酸史

    A&B 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄