bootstrap div模組 組成的登陸介面
公司logo是圖片形式,方便更換,
下面的自動化巡檢BOX是文字形式,自帶陰影效果,便於更換,
下面的版權所有也是文字形式,直接更換,
使用者登入框子也是div模組,格式不變。
bootstrap框架和jquery的使用,結合了大小屏的各種情況,併兼用了ie,火狐,谷歌瀏覽器。
最終效果圖如下:
jsp頁面原始碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <script type="text/javascript" src="js/jquery-1.4.1.min.js"></script> <link href="css/bootstrap.min.css" rel="stylesheet"> <script type="text/javascript"> window.onload = function(){ changeSize(); } window.onresize = function(){ changeSize(); } function changeSize(){ var ttingo = $(window).height()-117; $("#imageheight").css("height",ttingo); } $().ready(function () { $('#login').click(function () { $.ajax({ type: "POST", url: "login.action", data: "sysUser.loginName=" + escape($('#username').val()) + "&sysUser.password=" + escape($('#password').val()), success: function (msg) { if (msg == "success") { parent.document.location.href = "mainPage.action"; //如果登入成功則跳到管理介面 } if (msg == "failure") { alert('使用者名稱或密碼錯誤!'); $('#username').val(""); $('#password').val(""); } }, error: function (XMLHttpRequest, textStatus, thrownError) { alert('模組載入異常!'); } }); }); }); $().ready(function () { $('#reset').click(function(){ $('#username').val(""); $('#password').val(""); }); }); $().ready(function () { $("body").keydown(function(e) { e = e||event; <span><span class="comment">//這邊是火狐和ie,使用的標準不同,所以新增一個e引數,相容ie和火狐! if (e.keyCode == "13") {//keyCode=13是回車鍵 $('#login').click(); } }); }); </script> </head> <body> <div class="container-fluid" id="imageheight" style="background-image:url('image/background.png');background-repeat: no-repeat;min-width: 600px;min-height:589px;"> <div class="row" style="margin-top: 1%;"> <div class="col-md-12" align="center"> <img src="image/a_03.png" align="center"/> </div> </div> <div class="row" style="margin-top: 1%;"> <!--<div class="col-md-12" align="center"> <img src="image/a_07.png" align="center"/> </div>--> <div class="col-md-12" align="center" style="background-color: #0389DE;font-family:黑體;font-size:45px;color:white;text-shadow: 0 8px 9px black, 0px -2px 1px #fff;"> 自動化巡檢BOX </div> </div> <div class="row" style="margin-top: 2%;"> <div class="col-md-8 col-sm-5 col-xs-5"></div> <div class="col-md-4 col-sm-7 col-xs-7" style="background-image:url(image/aaaa.png);background-repeat: no-repeat;height: 339px;width: 344px;"> <form action="" method="post" id="loginform"> <div class="row" style="margin-top: 80px;"> <div class="col-md-12" style="width: 325px; margin-left: 10px;"> <div class="input-group"> <span class="input-group-addon"><img src="image/ren16.png"/></span> <input type="text" class="form-control" aria-describedby="sizing-addon2" id="username" value="" placeholder="請輸入賬號"> </div> </div> </div> <div class="row" style="margin-top: 15px;"> <div class="col-md-12" style="width: 325px; margin-left: 10px;"> <div class="input-group"> <span class="input-group-addon"><img src="image/suo16.png"/></span> <input type="password" class="form-control" aria-describedby="sizing-addon2" id="password" value="" placeholder="請輸入密碼"> </div> </div> </div> </form> <div class="row" style="margin-top: 30px;"> <div class="col-md-12" align="center" style="padding-left: 25px; padding-right: 25px;"> <input type="button" value="登入" id="login" class="btn-info" style="width: 100%;border: 1px solid #55bafb;height: 41px;"/> </div> </div> <div class="row" style="margin-top: 15px;"> <div class="col-md-12" align="center" style="padding-left: 25px; padding-right: 25px;"> <input type="button" value="取消" id="reset" class="btn-infohui" style="width: 100%;border: 1px solid #999999;height: 41px;"/> </div> </div> </div> </div> </div> <div class="container-fluid" style="min-width: 600px;"> <div class="row" > <div class="col-md-12" align="center" style="background-color: #0389DE;height: 117px;line-height: 117px;font-family:黑體;font-size:15px;color:white;"> </div> </div> </div> </body> </html>
相關推薦
bootstrap div模組 組成的登陸介面
公司logo是圖片形式,方便更換, 下面的自動化巡檢BOX是文字形式,自帶陰影效果,便於更換, 下面的版權所有也是文字形式,直接更換, 使用者登入框子也是div模組,格式不變。 bootstrap框架和jquery的使用,結合了大小屏的各種情況,併兼用了ie,火狐,谷歌瀏覽
bootstrap div 固定
brush div css highlight bar clas boot 樣式 bootstra div固定在頂部樣式: .navbar-fixed-top div固定在底部樣式 .navbar-fixed-bottom bootstrap div 固定
bootstrap 一個簡單的登陸頁面
window tran 修改 min tle mar text ace rap 效果如圖:用bootstrap 寫的一個簡單的登陸 一、修改樣式 樣式可以自己調整,例如換個背景色之類的,修改 background-color屬性就可以 #from
cas+shiro+springboot+pac4j 自定義登陸介面以及驗證碼等
首先 我把主要參考的文章貼出來: https://blog.csdn.net/weixin_39819191/article/details/80361301 https://blog.csdn.net/u010588262/article/category/7548325
c# Winform登陸介面設計,登陸使用者不同許可權設定
要求:登陸介面,使用者只有管理員和普通使用者 管理員可以進行資料庫的增、刪、改、查;
一步一步實現web程式資訊管理系統之一----登陸介面實現
一步一步實現web程式資訊管理系統 在web程式中特別是資訊管理系統,登陸功能必須有而且特別重要。每一個學習程式開發或以後工作中,都會遇到實現登陸功能的需求。而登陸功能最終提供給客戶或展現給客戶的最基本的就是2個文字框一個按鈕使用者名稱與密碼,外加一個登陸按鈕。本篇記錄一下登陸功能的前端介面的實現。 1.
python_01作業(編寫登陸介面)
import linecache error=0 for j in range(0,3,1): name = input("賬戶:") error_name= linecache.getline("D:\\work1error.txt", 1) if int
簡單的登陸介面
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Login</title></head><body> <h2&
QML與C++互動 登陸介面設計
分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!  
如何實現WPF登陸介面的記住賬號密碼功能()
剛開始學程式設計。學了三個月了,學的C#和.net(貌似有點坑),公司應該是讓做b/s,socket和資料庫比較難,暫時不怎麼會,對WPF花的時間比較多一些(畢竟視覺化效果看起來比價有成就感)(WPF的課程案例貌似不多,加油) 新手菜鳥,大神勿噴。我覺得幾個有趣的地方,左上角的【HIM是畫
易班登陸介面接入例項
接入流程: 一,準備工作: 1,去易班開放平臺申請成為易班開發者並建立一個web應用。 2,獲取到APPID和APPSECRET,這兩個東西是這個應用的唯一憑證; 3,上面的首頁地址和回撥地址先寫成你的網站首頁地址 二,具體操作: 去易班開放平臺下載好SDK:https:
登陸介面測試
1,前提是你得有安裝好了的jmeter。這裡具體安裝教程自己百度學著弄吧。2,點選安裝了的jmeter檔案,bin路徑下找到jmeter.bat,以管理員方式執行開啟。3,這樣我們就來到了主介面。4,建立執行緒。5,我們以建立三個執行緒,跑一次為例子。6,在我們的指令碼中建立一個http請求。這裡的第一個請求
java swing 製作一個登陸介面,親測有效
一、介紹 Swing 是一個為Java設計的GUI工具包。 Swing是JAVA基礎類的一部分。 Swing包括了圖形使用者介面(GUI)器件如:文字框,按鈕,分隔窗格和表。 Swing提供許多比AWT更好的螢幕顯示元素。它們用純Java寫成,所以同Java本身一樣可以跨平臺執行,這一點不像AWT。它
CAS4.0.3服務的搭建實戰二【自定義登陸介面、登陸驗證、返回使用者資訊】
一切技術框架都會有一個使用者自定義的入口檔案,cas中自定義配置檔案在deployerConfigContext.xml中。 一、自定義登陸驗證 Tips:本專案使用mysql資料庫,因此已經在pom中匯入mysql的驅動。 開啟deployerConfigCo
老男孩作業之編寫登陸介面
編寫登陸介面 輸入使用者名稱,密碼 認證成功顯示歡迎資訊 輸入錯誤三次後鎖定使用者 import getpass #讀取檔案中的使用者名稱 def read_to_file(name): with open("wrong.txt","r") as f:
【python tkinter】登陸介面
密碼輸入錯誤會彈出messagebox,輸入正確後可調轉到MainPage(下一節編寫) from tkinter import * from tkinter.messagebox import * class LoginPage(Frame): def __init__(se
自制登陸介面
初次製作還請見諒!!!! <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://sc
用H5表單屬性製作簡易的登陸介面
今天學了H5新增的表單屬性,知道如何用新增的那些屬性(如form、placeholder)製作一個建議的登陸介面。 首先,在form中用input寫一個文字框。關鍵程式碼如下: <form method="post"> 使用者名稱:<input typ
伺服器重啟登陸介面死迴圈
重灌顯示卡驅動 賬戶下的.run檔案 作為nvidia驅動 sudo sh NVIDIA.390.87.run -no-x-check -no-nouveau-check -no-opengl-files (因為如果不加run後面的那些,x-server可能顯示未關閉
session超時,登陸介面巢狀
在session超時,跳往登陸介面時,會出現頁面巢狀問題,如下圖: 解決辦法,在登陸介面加以下js程式碼: <script> $(function(){ if(top.location != self.location){ top.locat