一 div+glyphicon图标，效果图如下：
代码如下:
<!-- <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> --> <!DOCTYPE html> <html> <head> <meta charset=utf-8> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit"> <title>登录</title> <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css"> <link rel="stylesheet" href="http://cdn.bootcss.com/font-awesome/4.4.0/css/font-awesome.min.css"> <link rel="stylesheet" href="http://cdn.bootcss.com/ionicons/2.0.1/css/ionicons.min.css"> <style type="text/css"> html,body { height: 100%; } body.login-page { background: #5b99bd; } .login-box { box-shadow: 0 -25px 100px #3f90bf; width: 400px; position: relative; top:30%; margin: auto; } .login-box-body { background: transparent; } .form-control { background: #69a9ce; color: white; border: transparent; } .login-logo { font-family: 'Microsoft Yahei'; color: #0f74ae; font-size: 18px; padding-top: 10px; margin-bottom: 5px; text-align: center; } .login-box input::-webkit-input-placeholder { color: white !important; } .login-box input:-moz-placeholder { /* FF 4-18 */ color: white !important; } .login-box input::-moz-placeholder { /* FF 19+ */ color: white !important; } .login-box input:-ms-input-placeholder { /* IE 10+ */ color: white !important; } </style> </head> <body class="hold-transition login-page"> <div class="login-box"> <div class="login-logo"> 权限系统登录 </div> <div class="login-box-body" style="padding-top: 20px;"> <div data-loginbox-elem="table"> <div class="form-group has-feedback" data-loginbox-elem="emailTr"> <input type="text" class="form-control" placeholder="用户名" data-loginbox-elem="emailInput"> <span class="glyphicon glyphicon-user form-control-feedback"></span> </div> <div class="form-group has-feedback" data-loginbox-elem="passwdTr"> <input type="password" class="form-control" placeholder="密码" data-loginbox-elem="passwdInput"> <span class="glyphicon glyphicon-lock form-control-feedback"></span> </div> <div class="row" style="padding-top: 15px;"> <div class="col-xs-12" > <button type="submit" class="btn btn-primary btn-block btn-flat" style="height:50px;" data-loginbox-elem="loginBtn">登录</button> </div> </div> </div> </div> </div> </body> </html>
2 使用sb-admin相关+form
效果如下：
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title>权限管理系统</title> <!-- Bootstrap Core CSS --> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css"> <link rel="stylesheet" href="http://cdn.bootcss.com/font-awesome/4.4.0/css/font-awesome.min.css"> <link rel="stylesheet" href="http://cdn.bootcss.com/ionicons/2.0.1/css/ionicons.min.css"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> <script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script> <script src="//cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <script src="${pageContext.request.contextPath}/resources/particleground/jquery.particleground.min.js"></script> </head> <body class="hold-transition login-page"> <div class="container"> <div class="row"> <div class="col-md-4 col-md-offset-4" style="margin: 380px 380px"> <div class="login-panel panel panel-default" > <div class="panel-heading"> <h3 class="panel-title" style="text-align: center;">登录</h3> </div> <div class="panel-body"> <form role="form" action="#" method="post" id="form_login"> <fieldset> <div class="form-group"> <input class="form-control" placeholder="用户名" name="username" autofocus> </div> <div class="form-group"> <input class="form-control" placeholder="密码" name="password" type="password" value=""> </div> <!-- Change this to a button or input when using this as a form --> <a href="javascript:void(0)" onclick="submit_form()" class="btn btn-lg btn-success btn-block" id='submitBtn'>Login</a> </fieldset> </form> </div> </div> </div> </div> </div> </body> </html>