HTML+CSS实现登陆界⾯
1、登录界⾯效果图：
2、HTML+CSS代码：
<!DOCTYPE html>
<html lang="cn" xmlns:th="" >
<head>
<meta charset="UTF-8">
<title>⽤户登录页</title>
<link rel="stylesheet" href="/css/bootstrap.min.css">
<script src="/js/jquery-3.6.0.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="/plugins/bootstraptable/bootstrap-table.min.css">
<style>
body{
background-image: url("gimg2.baidu/image_search/src=http%3A%2F%2Fimg.jj20%2Fup%2Fallimg%2Ftp01%2F1ZZQ233331308-0-lp.jp            background-size: cover;
}
*{
box-sizing: border-box;
}
.clear{
clear:both;
}
.section{
text-align: center;
padding: 10px 10px;
margin-bottom: 1px;
}
.section .card,
.section .card1,
.section .card4{
width: 15%;
float: left;
padding: 30px 2px;
}
}
.
section .card{
width: 35%;
}
.section .box{
text-align: center;
padding: 100px 10px;
margin-bottom: 1px;
}
.loginForm{
height: 100%;
-webkit-border-radius: 4px;
-
moz-border-radius: 4px;
border-radius: 4px;
position: relative;
padding-top: 40px;
background: #fff;
}
.dxan{
padding: 0 0 10px 0;
}
</style>
</head>
<body  >
<div class="container">
<section class="section">
<div class="content">
<div class="card1"><div class="box"></div></div>
<div class="card"><div class="box"></div></div>
<div class="card"><div class="box">
<div id="normalLoginTab" class="loginForm" >
<h2 class="loginbox-title">教学信息管理系统</h2>
<div class="container-fluid">
<div class="panel panel-default">
<div class="panel-heading">⽤户登录</div>
<div class="panel-body">
<form>
<div class="form-group">
<label for="username">⽤户名：</label>
<input type="text" class="form-control" id="username" name="username" placeholder="⽤户名">
</div>
<div class="form-group">
<label for="password">密码：</label>
<input type="password" class="form-control" id="password" name="password" placeholder="密码">                                    </div>
<div class="dxan">
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="0" onclick="pd(0)"> 管理员                                        </label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="1" onclick="pd(1)"> 教师                                        </label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="2" onclick="pd(2)"> 学⽣
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="2" onclick="pd(2)"> 学⽣                                        </label>
</div>
<div>
<button type="button" class="btn btn-primary btn-block"  onclick="login()">登  ；录</button>                                    </div>
</form>
</div>
</div>
</div>
</div>
</div></div>
<div class="card4"><div class="box"></div></div>
<div class="clear"></div>
</div>
</section>
</div>
<script type="text/javascript">
function login() {
var name=$("#username").val();
var password=$("#password").val();
var radios = ElementsByName("inlineRadioOptions");
var tag = false;
var val;
for(inlineRadioOptions in radios) {
if(radios[inlineRadioOptions].checked) {
tag = true;
val = radios[inlineRadioOptions].value;
break;
}
}
if(val==0){
//管理员
if (name=="root" && password=="123")
{
window.location.href="/teacher/gly";
}else{
alert("出错了，您的⽤户名和密码有误");
}
}else if(val==1){
//教师
$.ajax({
url:"/webapi/login/teacher",
data:{
username:name,
password:password
}
}).done(function (rs) {
if (rs>=0){
javascript登录注册界面/
/成功
window.location.href="/student/list";
}else{
alert("出错了，您的⽤户名和密码有误");
alert("出错了，您的⽤户名和密码有误");
}
});
}else if(val==2){
//学⽣
$.ajax({
url:"/webapi/login/user",
data:{
username:name,
password:password
}
}).done(function (rs) {
if (rs>=0){
//成功
window.location.href="/score/list?dd="+$("#username").val();
}else{
alert("出错了，您的⽤户名和密码有误");
}
});
}else {
//未选择
alert("请选择管理员/教师/学⽣");
}
}
</script>
</body>
</html>
3、⾝份选择模块解析：
单选框代码：
<div class="dxan">
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="0" onclick="pd(0)"> 管理员    </label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="1" onclick="pd(1)"> 教师    </label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="2" onclick="pd(2)"> 学⽣    </label>
</div>
获取 选择的单选框
var tag = false;
var val;
for(inlineRadioOptions in radios) {
if(radios[inlineRadioOptions].checked) {
tag = true;
val = radios[inlineRadioOptions].value;
break;
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。