此页面需要导入jquery-3.1.1.min.js包!
首次制作,有兴趣请提出意见,谢谢!
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>XXX信息站</title>
<link rel="stylesheet" href="css/styles.css" />
<script type="text/javascript" src="js/scripts.js" ></script>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
</head>
<body>
<div class="page_all">
<div class="page_center">
<div class="page_center_1">
<font class="page_center_1_fon">欢迎登录!</font>
<form action="longin.html" method="get" name="tijiao">
<input class="page_center_1_name" name="name" type="text" placeholder="请输入用户名">
<br/>
<font class="page_center_1_tishi">*请输入字母或者数字(最长12位不包括空格)</font>
<input class="page_center_1_pwd" name="pwd" type="password" placeholder="请输入密码">
<br/>
<font class="page_center_1_tishi">*请输入字母或者数字(最长12位不包括空格)</font>
<br/>
<div class="page_center_1_yanzheng">
<input class="page_center_1_yanzheng_yanzhengma" name="yanzhengma" type="text" placeholder="请输入验证码">
<img class="page_center_1_yanzheng_yanzhengtu" src="img/4.jpg"/>
</div>
<br/>
<input class="page_center_1_sub" type="button" value="Longin..." onclick="pankong()">
</form>
</div>
<div class="page_center_2">
出品方:小浪儿
</div>
</div>
</div>
</body>
</html>
styles.css
*{
margin: 0px;
padding: 0px;
font-family: "楷体";
text-align: center;
}
a{
text-decoration: none;
color: darkgrey;
text-align: center;
}
ul{
list-style: none;
}
ul li{
text-align: center;
}
div{
text-align: center;
}
input{
outline:none;
}
.page_all{
width: 100%;
height: 790px;
background: url(../img/6.jpg) no-repeat center;
background-size: cover;
}
.page_all .page_center{
margin: auto;
width: 600px;
height: 100%;
background-color: rgba(255,255,255,0.4);
position: relative;
}
.page_all .page_center .page_center_1{
width: 420px;
height: 270px;
background-color: rgba(0,0,0,0.2);
border-radius:50px ;
position: absolute;
left: 90px;
top: 220px;
background-size: cover;
}
.page_all .page_center .page_center_1 .page_center_1_fon{
width: 100%;
height: 70px;
font-family: "微软雅黑";
font-size: 26px;
color: black;
display: inline-block;
font-weight: 600;
line-height: 70px;
}
.page_all .page_center .page_center_1 .page_center_1_name{
margin: auto;
width: 180px;
height: 27px;
border-radius: 18px;
}
.page_all .page_center .page_center_1 .page_center_1_pwd{
margin: auto;
width: 180px;
height: 27px;
border-radius: 18px;
}
.page_all .page_center .page_center_1 .page_center_1_sub{
margin: auto;
width: 80px;
height: 27px;
border-radius: 18px;
color: #717238;
}
.page_all .page_center .page_center_1 .page_center_1_tishi{
width: 100%;
height: 18px;
margin: auto;
color: red;
font-size: 13px;
display: inline-block;
}
.page_all .page_center .page_center_1 .page_center_1_yanzheng{
margin: auto;
width: 100%;
height: 40px;
line-height: 40px;
}
.page_all .page_center .page_center_1 .page_center_1_yanzheng .page_center_1_yanzheng_yanzhengma{
margin: 0px -8px;
width: 88px;
height: 27px;
border-radius: 18px;
}
.page_all .page_center .page_center_1 .page_center_1_yanzheng .page_center_1_yanzheng_yanzhengtu{
margin: 0px -1px;
width: 89px;
height: 27px;
border: 2px solid #A9A9A9;
border-radius: 18px;
vertical-align:middle;
}
.page_all .page_center .page_center_2{
width: 100%;
height: 30px;
color: blue;
font-size: 12px;
text-align: right;
position: absolute;
right: 0px;
bottom: 0px;
}
scripts.js
function pankong(){
var name = document.getElementsByName("name")[0].value;
var pwd = document.getElementsByName("pwd")[0].value;
var yanzhengma= document.getElementsByName("yanzhengma")[0].value;
if (name.length == 0) {
alert("用户名不可为空");
}else if(pwd.length == 0){
alert("密码不可为空");
}else if(yanzhengma.length ==0){
alert("验证码不可为空");
}else{
if(name.length >= 12){
alert("超出可写入用户名");
}else if(pwd.length >=12){
alert("超出可写入密码");
}else{
var j =/^[0-9a-zA-Z]+$/;
if(j.test(name)){
document.tijiao.submit();
}else if(j.test(pwd)){
document.tijiao.submit();
}else{
alert("请输入字母或者数字");
}
}
}
}
longin.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
嘟嘟嘟
</body>
</html>
登录背景图片
页面效果展示