1. 新行网首页
  2. 投稿

bootstrap登录注册界面(bootstrap登录界面实例)

• 投稿 • 阅读 31

主要特色：使用bootstrap搭建，登陆注册在一个页面，背景图片轮播

说明：图片820×560

代码：

<%@ page language=”java” contentType=”text/html; charset=UTF-8″

pageEncoding=”UTF-8″%>

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>

<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

<title>登录注册</title>

<%

String path = request.getContextPath();

String basePath = request.getScheme() + “://”

+ request.getServerName() + “:” + request.getServerPort()

+ path + “/”;

%>

<link rel=”shortcut icon” href=”<%=basePath %>img/brandbest.png” />

<!– Bootstrap –>

<link href=”<%=basePath %>bootstrap/css/bootstrap.min.css” rel=”stylesheet”>

<style>

body:{

}

#login_div{

width:26%;

hight:30%;

/*float:right;

margin-top:110px;

margin-right:160px; */

margin-left:37%;

margin-top:10%;

color:white;

position:absolute;

z-index:9999;

background-color:#000000;/* IE6和部分IE7内核的浏览器(如QQ浏览器)下颜色被覆盖 */

background-color:rgba(0,0,0,0.3); /* IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂，但解析为透明 */

}

#regist_div{

width:26%;

hight:30%;

/*float:right;

margin-top:110px;

margin-right:160px; */

margin-left:37%;

margin-top:10%;

display:none;

color:white;

position:absolute;

z-index:9999;

background-color:#000000;/* IE6和部分IE7内核的浏览器(如QQ浏览器)下颜色被覆盖 */

background-color:rgba(0,0,0,0.3); /* IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂，但解析为透明 */

}

</style>

<!– HTML5 shim and Respond.js for 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=”http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js”></script>

<script src=”http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js”></script>

<![endif]–>

<!– <script type=”text/javascript” src=”js/jquery-3.1.1.js”></script> –>

<script type=”text/javascript” src=”<%=basePath %>js/jquery-1.11.3.js”></script>

<script type=”text/javascript”>

$(function(){

$(“#gologin”).click(function(){

$(“#login_div”).show();

$(“#regist_div”).hide();

});

$(“#goregist”).click(function(){

$(“#login_div”).hide();

$(“#regist_div”).show();

});

});

</script>

</head>

<body>

<div class=”bg” style=”width:100%;height:100%;position:absolute;”>

<div id=”carousel-example-generic” class=”carousel slide” data-ride=”carousel”>

<!– Indicators –>

<ol class=”carousel-indicators”>

<li style=”display:none;” data-target=”#carousel-example-generic” data-slide-to=”0″ class=”active”></li>

<li style=”display:none;” data-target=”#carousel-example-generic” data-slide-to=”1″></li>

<li style=”display:none;” data-target=”#carousel-example-generic” data-slide-to=”2″></li>

</ol>

<!– Wrapper for slides –>

<div class=”carousel-inner” role=”listbox”>

<div class=”item active”>

<img style=”width:100%;” src=”<%=basePath %>img/bg1.jpg” alt=”…”>

<div class=”carousel-caption”>

<!– bg1.jpg –>

</div>

</div>

<div class=”item”>

<img style=”width:100%;” src=”<%=basePath %>img/bg2.jpg” alt=”…”>

<div class=”carousel-caption”>

<!– bg2.jpg –>

</div>

</div>

<div class=”item”>

<img style=”width:100%;” src=”<%=basePath %>img/bg3.jpg” alt=”…”>

<div class=”carousel-caption”>

<!– bg3.jpg –>

</div>

</div>

<!– … –>

</div>

<!– Controls –>

<!– <a class=”left carousel-control” href=”#carousel-example-generic” role=”button” data-slide=”prev”>

<span class=”glyphicon glyphicon-chevron-left”></span>

<span class=”sr-only”>Previous</span>

</a>

<a class=”right carousel-control” href=”#carousel-example-generic” role=”button” data-slide=”next”>

<span class=”glyphicon glyphicon-chevron-right”></span>

<span class=”sr-only”>Next</span>

</a> –>

</div>

</div>

<!– 登录框 –>

<div class=”loginAndRegist”>

<div id=”regist_div”>

<form>

<p style=”text-align:center;font-size:25px;”>用户注册 <a id=”gologin” style=”font-size:10px;cursor:pointer;”>去登录</a></p>

<div class=”form-group”>

<label for=”exampleInputEmail1″>账号</label> <input

type=”email” class=”form-control” id=”regist_name”

placeholder=”account”><span id=”mark” style=”display:hidden;”></span>

</div>

<div class=”form-group”>

<label for=”exampleInputPassword1″>密码</label> <input

type=”password” class=”form-control” id=”regist_pass”

placeholder=”Password”>

</div>

<div class=”form-group”>

<label for=”exampleInputPassword1″>确认密码</label> <input

type=”password” class=”form-control” id=”regist_pass2″

placeholder=”Confirm Password”><span id=”mark2″ style=”display:hidden;”></span>

</div>

<input id=”basePath” type=”hidden” value=”<%=basePath %>”/>

<button style=”background:#96c656;color:white;” type=”button” class=”btn btn-default” id=”btn_regist”>注册</button>

</form>

</div>

<div id=”login_div”>

<p style=”text-align:center;font-size:25px;”>用户登录 <a id=”goregist” style=”font-size:10px;cursor:pointer;”>去注册</a></p>

<form>

<div class=”form-group”>

<label for=”exampleInputEmail1″>账号</label> <input

type=”email” class=”form-control” id=”login_name”

placeholder=”account”>

原创文章，作者：admin，如若转载，请注明出处：https://www.qq65hfghe5.com/tg/48088.html

赞 (0)
上一篇 2024年11月18日 11:06:57
下一篇 2024年11月18日 11:11:59

相关推荐