介绍 & lt; !DOCTYPE HTML>
& lt; html>
& lt; head>
& lt; title> EasyBuy后台管理系统& lt;/title>
& lt;元charset=皍tf-8"祝辞
& lt; style>
.main_bar {
宽度:1350 px;
身高:350 px;
background - color: # 6495 ed;
margin-top: 10%;
}
# login_form {
宽度:40%;
高度:100%;
background - color: # 112435;
保证金:0汽车;
}
.title {
宽度:100%;
高度:55 px;
颜色:# ffffff;
边界底部:1 px固体# ffffff;
字体大小:20分;
字体类型:“微软雅黑“;
行高:55 px;
text-align:中心;
}
# form_widget {
宽度:100%;
身高:295 px;
background - color: # 808080;
}
. txt {
显示:块;/*设置为独立块(换行)*/宽度:70%;
保证金:0汽车;
高度:35 px;
字体大小:15分;
border - radius: 5 px;/*设置圆角样式*/边界:0;
padding-left: 8 px;
}
# vcode {
高度:35 px;
宽度:40%;
字体大小:15分;
margin-left: 15%;
border - radius: 5 px;
边界:0;
padding-left: 8 px;
}
#{代码
颜色:# ffffff,/*字体颜色白色*/background - color: # 000000;
字体大小:20分;
字体类型:“华康娃娃体W5";
填充:5 px 35 px 10 px 35 px;
margin-left: 5%;
光标:指针;
}
# search_pass_link {
宽度:70%;
text-align:正确;
保证金:0汽车;
填充:5 px;
}/*层级选择器*/# search_pass_link {
颜色:# 000000;
文字修饰:没有;
}/*伪类*/# search_pass_link答:{徘徊
颜色:# ff0000;
文字修饰:下划线;
}
.btn {
宽度:70%;
margin-left: 15%;
高度:40像素;
边界:0;
字体大小:14 pt;
字体类型;“微软雅黑“;
background - color: # FC5628;
颜色:# ffffff;
光标:指针;/*设置指针鼠标的样式*/border - radius: 20 px;/*设置圆角样式*/边界:0;
}
#{版权
宽度:100%;
text-align:中心;
padding-top: 20 px;
字体类型:“微软雅黑“;
颜色:# e0e0e0;
}
& lt;/style>
& lt;/head>
& lt;身体leftmargin=?”;οnlοad=癱hangeImg()“比;
& lt; div类=癿ain_bar"祝辞
& lt; div id=發ogin_form"祝辞
& lt; div类=皌itle"祝辞
EasyBuy系统登录
& lt;/div>
action=& lt;形式“main.html"οnsubmit=胺祷丶觳?)“比;
& lt; div id=癴orm_widget"祝辞
& lt; br>
& lt;输入类型=皌ext"占位符=扒胧淙胝撕拧癷d=癰ox_name"类=皌xt"值=https://www.yisu.com/zixun/庇没唉蟦fοcus="。价值=" "οnblur=叭绻?this.value==? this.value='用户名的"/>
身体 <脚本type=" text/javascript”> var代码;//声明一个变量用于存储生成的验证码 . getelementbyid(“代码”).οnclick=changeImg; 函数changeImg () {//警报(“换图片”); var=new Array(数组 ' 1 ',' 2 ',' 3 ',' 4 ',' 5 ',' 6 ',' 7 ',' 8 ',' 9 ',' 0 ', ' a ', ' b ', ' c ', ' d ',‘e’,‘f’,‘g’,‘h’,‘我’,“j”, ‘k’,‘l’,‘米’,‘n’,‘o’,‘p’,‘问’,‘r’,‘s’,‘t’, ‘你’,‘v’,‘w’,‘x’,‘y’,“z”, ' A ', ' B ', ' C ', ' D ',‘E’,‘F’,‘G’,‘H’,‘我’,“J”, ‘K’,‘L’,‘米’,‘N’,‘O’,‘P’,‘问’,‘R’,‘S’,‘T’, ‘你’,‘V’,‘W’,‘X’,‘Y’,“Z” )； 代码=";//重新初始化验证码//警报(arrays.length);//随机从数组中获取四个元素组成验证码 (var=0;我
本篇文章为大家展示了使用H5 + css3 + js实现带验证码的登录页面,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
登录。html
身体 <脚本type=" text/javascript”> var代码;//声明一个变量用于存储生成的验证码 . getelementbyid(“代码”).οnclick=changeImg; 函数changeImg () {//警报(“换图片”); var=new Array(数组 ' 1 ',' 2 ',' 3 ',' 4 ',' 5 ',' 6 ',' 7 ',' 8 ',' 9 ',' 0 ', ' a ', ' b ', ' c ', ' d ',‘e’,‘f’,‘g’,‘h’,‘我’,“j”, ‘k’,‘l’,‘米’,‘n’,‘o’,‘p’,‘问’,‘r’,‘s’,‘t’, ‘你’,‘v’,‘w’,‘x’,‘y’,“z”, ' A ', ' B ', ' C ', ' D ',‘E’,‘F’,‘G’,‘H’,‘我’,“J”, ‘K’,‘L’,‘米’,‘N’,‘O’,‘P’,‘问’,‘R’,‘S’,‘T’, ‘你’,‘V’,‘W’,‘X’,‘Y’,“Z” )； 代码=";//重新初始化验证码//警报(arrays.length);//随机从数组中获取四个元素组成验证码 (var=0;我
