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

发布日期:2024-11-05 15:02:10     手机:https://m.xinb2b.cn/wenda/news3407.html    违规举报
核心提示:主要特色:使用bootstrap搭建,登陆注册在一个页面,背景图片轮播 说明:图片820×560 代码: <%@ page language=”java” contentType=”text/html; charset=UTF-8″ pag

主要特色:使用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=https://www.xinb2b.cn/aimg/bk33/a6xnb4zdge4yqp24nae7fgr7i3tg3rvd136k7sb9-0.jpg %>img/brandbest.png” />

<!– Bootstrap –>

<link href=https://www.xinb2b.cn/aimg/bk33/a6xnb4zdge4yqp24nae7fgr7i3tg3rvd136k7sb9-0.jpg %>bootstrap/css/bootstrap.min.css” rel=”stylesheet”>

<style>

body:{

}

#login_div{

width:26%;

hight:30%;

margin-left:37%;

margin-top:10%;

color:white;

position:absolute;

z-index:9999;

background-color:#000000;

background-color:rgba(0,0,0,0.3);

}

#regist_div{

width:26%;

hight:30%;

margin-left:37%;

margin-top:10%;

display:none;

color:white;

position:absolute;

z-index:9999;

background-color:#000000;

background-color:rgba(0,0,0,0.3);

}

</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=https://www.xinb2b.cn/aimg/bk33/a6xnb4zdge4yqp24nae7fgr7i3tg3rvd136k7sb9-0.jpg –>

<script type=”text/javascript” src=https://www.xinb2b.cn/aimg/bk33/a6xnb4zdge4yqp24nae7fgr7i3tg3rvd136k7sb9-0.jpg %>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=https://www.xinb2b.cn/aimg/bk33/a6xnb4zdge4yqp24nae7fgr7i3tg3rvd136k7sb9-0.jpg %>img/bg1.jpg” alt=”…”>

<div class=”carousel-caption”>

<!– bg1.jpg –>

</div>

</div>

<div class=”item”>

<img style=”width:100%;” src=https://www.xinb2b.cn/aimg/bk33/a6xnb4zdge4yqp24nae7fgr7i3tg3rvd136k7sb9-0.jpg %>img/bg2.jpg” alt=”…”>

<div class=”carousel-caption”>

<!– bg2.jpg –>

</div>

</div>

<div class=”item”>

<img style=”width:100%;” src=https://www.xinb2b.cn/aimg/bk33/a6xnb4zdge4yqp24nae7fgr7i3tg3rvd136k7sb9-0.jpg %>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=https://www.xinb2b.cn/aimg/bk33/a6xnb4zdge4yqp24nae7fgr7i3tg3rvd136k7sb9-0.jpg %>”/>

<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”>

 
 
本文地址:https://wenda.xinb2b.cn/news3407.html,转载请注明出处。

推荐图文
推荐问答知道
网站首页  |  关于我们  |  联系方式  |  使用协议  |  版权隐私  |  网站地图  |  违规举报  |  蜀ICP备18010318号-4  |  百度地图  | 
Processed in 0.100 second(s), 91 queries, Memory 0.47 M