1. 程式人生 > >使用bootstrap的登陸頁面

使用bootstrap的登陸頁面

這裡使用的是使用比較流行的bootstrap完成的登陸介面:

執行主要截圖以及程式碼如下:

 

主要CSS程式碼:


@charset "UTF-8";
.grad{
    position: absolute;
    width:100%;
    height:100%;
    background: -webkit-linear-gradient(90deg, #c0abde, #98e2bf);
    background: linear-gradient(90deg, #c0abde, #98e2bf);
}
.logindiv{
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width:25%;
}
.hint{
    width: 100%;
    height: 50px;
    font-size: 15px;
    text-align: center;
    font-family: 'Glyphicons Halflings';
}
.title{
    font-size: 70px;
    letter-spacing: 10px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    bottom: 70px;
    font-style:italic;
    font-family:Georgia, serif;
    text-shadow:2px 2px 0.1px #1d0000;
    left: 50%;
    top: 20%;
    transform: translate(-50%, -50%);
    -webkit-user-select:none;
       -moz-user-select:none;
       -ms-user-select:none;
       user-select:none;
}
 

 主要頁面程式碼:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="login.css">
        <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
        <script src="bootstrap/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="grad">
            <div class="title">選課管理</div>
            <div class="logindiv">
                <form class="bs-example bs-example-form" role="form" action="login/check" method="post">
                    <div class="input-group input-group-lg">
                        <span class="input-group-addon"> <span class="glyphicon glyphicon-user"></span></span>
                        <input type="text" class="form-control" name="username" placeholder="使用者名稱">
                    </div>
                    <br>
                    <div class="input-group input-group-lg">
                        <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                        <input type="password" class="form-control" name="password" placeholder="請輸入密碼">
                    </div>
                    <br>
                    <div class="hint" id="hint">
                            使用者名稱或密碼錯誤。
                    </div>
                    <div class="input-group input-group-lg" style="margin: 0 auto;width:100%;">
                        <button type="submit" class="buttonlarg btn btn-primary btn-lg" style="width:100%;">登陸</button>
                    </div>
                </form>
            </div>
        </div>
        <script>
            $("[name='username'] ,[name='password']").focus(function() {
                $("#hint").empty();
            })
        </script>
    </body>
</html>

檔案下載地址:http