CSS樣式案例(2)-製作一個簡單的登入介面

weixin_34054866發表於2016-10-11
CSS

 首先來張完工的效果圖。

 

 

 一、html檔案如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>登入介面</title>
        <link rel="stylesheet" type="text/css" href="css/login.css"/>
    </head>
    <body>
        
        <div class="content">
            <div class="panel">
                <div class="group">
                    <ul>
                        <li><label>賬號</label></li>
                        <li><input type="text" placeholder=" 請輸入賬號" /></li>
                    </ul>
                    <ul>
                        <li><label>密碼</label></li>
                        <li><input type="password" placeholder=" 請輸入密碼" /></li>
                    </ul>
                </div>
                <div class="login">
                    <button type="button">登入</button>
                </div>
            </div>
            <div class="register">
                <button type="button">註冊</button>
                <button type="button">找回密碼</button>
            </div>
        </div>
    </body>
</html>

 

二、對應的login.css檔案如下，需要將CSS檔案放到對應的CSS資料夾中:

*{
    margin:0 auto;
    padding:0;
}
/*新增一個淺灰色背景*/
body{
    background-color:#eee;
}

.content{
    /*border:1px solid red;*/
    width:300px;
    margin-top:50px;
}

.content .panel{
    border:1px solid #ccc;
    border-radius:5px;
    height:220px;
    background-color:#fff;
}
.content .panel .group{
    margin:30px 10px 10px 20px;
}
.content .panel .group ul{
    list-style: none;
    margin-top:15px;
}

.content .panel .group ul li{
    margin-top:2px;
}

.content .panel .group ul li input{
    line-height:22px;
    width:250px;
    font-size: 14px;
    font-family: "微軟雅黑","宋體";
}
.content .panel .group ul li label{
    font-size: 14px;
    font-family: "黑體","微軟雅黑","宋體";
    font-weight: bold;
}

.content .panel .login{
    text-align: center;
    /*border:1px solid red;*/
    margin-top:20px;
    
}
.content button{
    width:255px;
    height:30px;
    background-color:#008000;
    border:none;
    color:#fff;
    font-size:16px;
    font-weight: bold;
    cursor:pointer;
}


.content .register{
    margin-top:15px;
    text-align: center;
}

.content .register button{
    width:80px;
    height:30px;
    border:none;
    font-size:14px;
    background-color:#4c6bb2;
    color:#fff;
    font-family: "微軟雅黑";
    text-align: center;
    margin-left:30px;
    
}

 

相關文章