<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<br>
<br>
<br>
<html>
<head>
<title>登录</title>
<meta name="decorator" content="default"/>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
*{
margin: 0 auto;
}
body{
background-color: #216ED0;
}
.container{
position: relative;
top: 10px;
}
.news-nav{
clear: both;
height: 80px;
margin-left: 10px;
margin-right: 10px;
width: 300px;
margin: 0 auto;
}
.news-nav li{
float: left;
list-style-type: none;
margin: 0 10px;
font-size: 20px;
display: block;
width: 60px;
height: 50px;
text-align: center;
line-height: 50px;
font-weight: bold;
color: #43A9E3;
cursor: pointer;
}
.news-nav li.on{
color: #74dcff;
border-bottom-color: #74dcff;
border-bottom-style: solid;
border-bottom-width: 0.1px;
}
#index-news-list-2{
display: none;
}
.modal-dialog{
max-width: 100% !important;
}
.modal-content{
background:rgba(0,0,0,0.3);
width: 250px;
}
.loginForm{
width: 200px;
}
.loginForm .form-group{
margin: 10px 0;
}
.loginForm .form-group .form-control{
height: 30px;
font-size: 15px;
}
input[type="checkbox"]{
position:relative;
top:-2px;
vertical-align: middle;
cursor: pointer;
zoom:1.6;
}
input[type="radio"]{
position:relative;
top:-3px;
vertical-align: middle;
cursor: pointer;
zoom:1.6;
}
.btn-primary{
background-color: #16A4CA;
border: 0px solid transparent;
width: 200px;
height: 35px;
font-size: 20px;
font-family: STKaiti;
}
label{
color: #17B8E3;
font-size: 10px;
}
</style>
</head>
<body>
<title>分一栏框</title>
<div class="container">
<div class="modal-dialog" id="login_form">
<div class="modal-content">
<div class="modal-title">
<ul class="news-nav js-nav-title">
<li class="on" data="login">登录</li>
<li class="" data="register">注册</li>
</ul>
</div>
<title>登录</title>
<title>class 意思是定义一种类别
id 意思是定义了一个id 值等于号的内容
method="post" 表示以表单数据以post的方法传递</title>
<div class="modal-body index-news-list" id="index-news-list-1">
<form class="loginForm" id="loginForm" action="" method="post">
<title>type=text意思是只能输入数字
type=button 就单纯是按钮功能
type=submit 是发送表单
Submit将表单提交form.submit
</title>
<div class="form-group">
<input class="form-control required" name="name" id="name" type="text" placeholder="请输入用户名">
</div>
<div class="form-group">
<input class="form-control required" name="password" id="password" type="password" placeholder="请输入密码">
</div>
<br>
<div class="form-group">
<button class="btn btn-primary" type="submit">登录</button>
</div>
</form>
</div>
<title>注册</title>
<div class="modal-body index-news-list" id="index-news-list-2">
<form class="loginForm" id="registerForm" action="" method="post">
<div class="form-group">
<input class="form-control required" name="name" id="name" type="text" placeholder="请输入用户名">
</div>
<div class="form-group">
<input class="form-control required" name="password" id="rePassword" type="password" placeholder="请输入密码">
</div>
<div class="form-group">
<input class="form-control required" name="rePassword" id="rePassword1" type="password" placeholder="请再次输入密码">
</div>
<br>
<div class="form-group">
<button class="btn btn-primary" type="submit">
注册
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$(".js-nav-title li").click(function(){
$(this).attr("class","on");
$(this).siblings().attr("class","");
var index = $(".js-nav-title li").index(this);
$(".index-news-list").css("display","none");
$("#index-news-list-"+(index+1)).css("display","block");
});
});
</script>
</body>
</html>
</body>
