利用bootstrap框架實現靜態登入頁面
阿新 • • 發佈：2019-02-10
暑期實訓第一天，主要串講了html+css的基礎知識，實現了計算器的靜態頁面，計算器就不在這裡展示了。一天的學習結束，留下了作業，實現靜態的登入頁面，可以藉助於bootstrap框架，待實現的頁面如下圖所示。
不得不說bootstrap框架真的好用，再加上老師提供了背景實現粒子的js，很快就實現了頁面。
工程包連結https://download.csdn.net/download/qq_35616167/10520327
bootstrap開源包連結：https://pan.baidu.com/s/1xIbFspdVSx2iA8WxFemH9g 密碼：p4k4
程式碼如下：
<!DOCTYPE html> <html> <style> #box{ width: 370px; height: 400px; border: 1px solid #E2E3E5; position: absolute; left: 50%; top: 50%; margin-left: -185px; margin-top: -200px; } #logo{ width: 370px; height: 95px; font-size: 30px; color: #676A6C; line-height: 95px; margin-left: 40px; } #user{ width: 295px; height: 50px; margin-left: 40px; } #pass{ width: 295px; height: 50px; margin-left: 40px; } .input-group{ margin-left: 40px; } #img-submit { width: 95px; height: 30px; margin-top: 15px; border-radius: 2px; cursor: pointer; position: absolute; z-index: 3; left: 10px; top: 0; } #validateCode { height: 55px; padding-left: 120px; width: 295px; } #verify{ width: 295px; height: 60px; margin-left: 40px; border: 1px solid #EDEDEE; } #btn-login{ width: 295px; height: 50px; margin-left: 40px; margin-top: 20px; } #remember{ width: 80px; height: 20px; margin-left: 50px; margin-top: 20px; color: #676A6C; font-size: 15px; } </style> <head> <meta charset="UTF-8"> <title>登入頁面</title> <meta name="description" content="particles.js is a lightweight JavaScript library for creating particles."> <meta name="author" content="Vincent Garreau" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <link rel="stylesheet" href="../bootstrap.min.css"> <script src="jquery.min.js"></script> <script src="particle.js"></script> </head> <body> <canvas class="particle"></canvas> <div id="box"> <div id="logo">歡迎登陸！</div> <div id="info"> <input type="text" class="form-control" id="user" placeholder="賬號:"> <input type="password" class="form-control" id="pass" placeholder="密碼:"> <div class="input-group"> <img id="img-submit" src="submit.jpg"> <u><input type="text" class="form-control" id="validateCode" name="validateCode" placeholder="驗證碼:"></u> </div> <button class="btn btn-info" id="btn-login" onclick="VerifyLogin()">登入</button> <div id="remember">記住登陸 <input type="checkbox"></div> </div> </div> </body> </html>