Bootstrap搭建背景輪播的登入介面
阿新 • • 發佈：2018-12-14
Bootstrap搭建精美背景輪播的登入介面
博主經常需要開發專案，然而博主是個後端狗，一些常用的，比如登入介面什麼的，老是找來找去麻煩，直接先寫一個精美背景輪播的登入介面放著，以後好複用。
先上效果圖吧：
（omg，我不會上傳gif圖。靜態的看看吧。）
採用的是bootstrap搭建的，點選註冊出現的是模態框面板。
然後CSS是自定義的。
原始碼如下： login.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE html> <html lang="en"> <head> <base href="<%=basePath%>"> <meta charset="UTF-8"> <title>登入新介面</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="登入,ssm練習,web專案"> <meta http-equiv="description" content="This is login page"> <!-- 順序：先css後jquery最好bootstrap.js --> <link rel="stylesheet" href="css/bootstrap.min.css" /> <link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css" /> <link rel="stylesheet" href="static/css/style.css"> <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> <script type="text/javascript" src="js/bootstrap-datetimepicker.min.js"></script> <script type="text/javascript" src="js/bootstrap-datetimepicker.zh-CN.js"></script> </head> <body style="margin: 8%;"> <div class="container"> <div class="form row"> <!-- ajax提交登入示例 --> <div class="form-horizontal col-md-offset-2" id="login_form"> <h3 class="form-title">歡迎登入商品管理系統</h3> <div class="col-md-9"> <div class="form-group"> <i class="fa fa-user fa-lg"></i> <input class="form-control required" type="text" placeholder="請輸入使用者名稱..." id="username" name="username" autofocus="autofocus" maxlength="20"/> <span id="checkUserNameResult" style="color: red "></span> </div> <div class="form-group"> <i class="fa fa-lock fa-lg"></i> <input class="form-control required" type="password" placeholder="請輸入密碼..." id="password" name="password" maxlength="8"/> <span id="checkPasswordResult" style="color: red "></span> <label class="control-label" for="inputSuccess1" style="color: red;"id="message"></label> </div> <div class="form-group col-md-offset-9"> <button type="submit" class="btn btn-success pull-left" name="login" id="login">登入</button> <button type="button" class="btn btn-danger pull-right" name="register" id="register" data-toggle="modal" data-target="#myModal">註冊</button> </div> </div> </div> </div> </div> <!-- 註冊框 --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"> <span aria-hidden="true">×</span><span class="sr-only">Close</span> </button> <h4 class="modal-title" id="myModalLabel">註冊新使用者</h4> </div> <!-- form表單提交註冊示例 --> <form class="form-horizontal" role="form" action="${pageContext.request.contextPath}/user/register.action" method="post" id="form"> <div class="modal-body"> <!-- 表格 --> <div class="form-group"> <label for="inputEmail3" class="col-sm-3 control-label">使用者名稱:</label> <div class="col-sm-6"> <input type="text" class="form-control" id="username" name="username" placeholder="請輸入使用者名稱" required autofocus> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-3 control-label">密 碼:</label> <div class="col-sm-6"> <input type="password" class="form-control" id="password" name="password" placeholder="請輸入密碼" required autofocus> </div> </div> <!-- js控制以日期類型錄入--> <div class="form-group"> <label for="lastname" class="col-sm-3 control-label">出生日期:</label> <div class="col-sm-6"> <input type="text" class="form-control input-lg form_datetime" id="birthday" name="birthday"> </div> </div> <div class="form-group"> <label for="inputEmail3" class="col-sm-3 control-label">居住地址:</label> <div class="col-sm-6"> <input type="text" class="form-control" id="address" name="address" placeholder="請輸入現居住地址" required autofocus> </div> </div> </div> <div class="modal-footer"> <button type="submit" class="btn btn-primary" id="save">註冊</button> <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button> </div> </form> </div> </div> </div> <script type="text/javascript"> /* 以json的格式提交登入傳參 */ $("#login").click(function() { var username=document.getElementById("username").value; var password=document.getElementById("password").value; var checkUserNameResult = document.getElementById("checkUserNameResult"); //提示語句 var checkPasswordResult = document.getElementById("checkPasswordResult"); //提示語句 if(username.trim().length==0){ checkUserNameResult.innerHTML = "使用者名稱不能為空"; obj.focus(); }else if(password.trim().length==0){ checkUserNameResult.innerHTML = ""; checkPasswordResult.innerHTML = "密碼不能為空"; obj.focus(); }else{ checkPasswordResult.innerHTML = ""; $.ajax({ type : 'post', //提交路徑 url : '${pageContext.request.contextPath}/user/checkLogin.action', //宣告為json格式 contentType : 'application/json;charset=utf-8', //轉為json格式 data : JSON.stringify({ "username" : $("#username").val(), "password" : $("#password").val() }), //點選登入以後拿到資料 success : function(data) { //判斷 if (data == "" || data == null) { $("#message").html("使用者名稱或密碼錯誤！"); } else { //正常跳轉 window.location.href = "${pageContext.request.contextPath}/items/queryItems.action"; } } }); } }); </script> </body> </html>
定義的CSS：style.css
body{ background: url("../images/1.jpg"); animation-name:myfirst; animation-duration:12s; /*變換時間*/ animation-delay:2s; /*動畫開始時間*/ animation-iteration-count:infinite; /*下一週期迴圈播放*/ animation-play-state:running; /*動畫開始執行*/ } @keyframes myfirst { 0% {background:url("../images/1.jpg");} 34% {background:url("../images/2.jpg");} 67% {background:url("../images/3.jpg");} 100% {background:url("../images/1.jpg");} } .form{background: rgba(255,255,255,0.2);width:400px;margin:120px auto;} /*陰影*/ .fa{display: inline-block;top: 27px;left: 6px;position: relative;color: #ccc;} input[type="text"],input[type="password"]{padding-left:26px;} .checkbox{padding-left:21px;}
只需要引入：
<link rel="stylesheet" href="static/css/style.css">
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
即可完成效果。