基于layui的密码跳转页面

027012
基于layui的密码跳转页面 第1张

        自己写的页面，就是拿layui前端乱套的界面，然后自己写的PHP，无需数据库，前台看不到密码，整体简介清爽，代码量小，就400多行，且layui所用到的东西全部本地化了，送给需要的人，稍微改改就可以了。

        账户和密码在396行和397，跳转网址在401行和404行，账户密码正确就跳转401行的网址，错误就跳转404行的网址，使用用途很多，比如密码下载、密码访问。

 

代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>登录</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style>
.layui-btn {
vertical-align: middle
}
.layui-btn {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none
}
body,button,div,form,input {
margin: 0;
padding: 0;
-webkit-tap-highlight-color: rgba(0,0,0,0)
}
button,input {
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-weight: inherit
}
body {
line-height: 24px;
font: 14px Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif
}
.layui-row:after,.layui-row:before {
content: '';
display: block;
clear: both
}
.layui-col-md3,.layui-col-md6 {
position: relative;
display: block;
box-sizing: border-box
}
@media screen and (min-width:992px) {
.layui-col-md3,.layui-col-md6 {
float: left
}
.layui-col-md3 {
width: 25%
}
.layui-col-md6 {
width: 50%
}
}
.layui-col-space15 {
margin: -7.5px
}
.layui-col-space15>* {
padding: 7.5px
}
.layui-btn,.layui-input {
outline: 0;
-webkit-appearance: none;
transition: all .3s;
-webkit-transition: all .3s;
box-sizing: border-box
}
.layui-elem-field {
margin-bottom: 10px;
padding: 0;
border-style: solid
}
.layui-elem-field legend {
margin-left: 20px;
padding: 0 10px;
font-size: 20px;
font-weight: 300
}
.layui-field-title {
margin: 10px 0 20px;
border-width: 1px 0 0
}
.layui-card {
margin-bottom: 15px;
border-radius: 2px;
background-color: #fff;
box-shadow: 0 1px 2px 0 rgba(0,0,0,.05)
}
.layui-card:last-child {
margin-bottom: 0
}
.layui-card-header {
position: relative;
height: 42px;
line-height: 42px;
padding: 0 15px;
border-bottom: 1px solid #f6f6f6;
color: #333;
border-radius: 2px 2px 0 0;
font-size: 14px
}
.layui-card-body {
position: relative;
padding: 10px 15px;
line-height: 24px
}
.layui-form-label,.layui-input-block {
position: relative
}
.layui-elem-field,.layui-input {
border-color: #e6e6e6
}
.layui-btn {
display: inline-block;
height: 38px;
line-height: 38px;
padding: 0 18px;
background-color: #009688;
color: #fff;
white-space: nowrap;
text-align: center;
font-size: 14px;
border: none;
border-radius: 2px;
cursor: pointer
}
.layui-btn:hover {
opacity: .8;
filter: alpha(opacity=80);
color: #fff
}
.layui-btn:active {
opacity: 1;
filter: alpha(opacity=100)
}
.layui-input {
height: 38px;
line-height: 1.3;
border-width: 1px;
border-style: solid;
background-color: #fff;
border-radius: 2px
}
.layui-input::-webkit-input-placeholder,.layui-select::-webkit-input-placeholder,.layui-textarea::-webkit-input-placeholder {
line-height: 1.3
}
.layui-input {
display: block;
width: 100%;
padding-left: 10px
}
.layui-input:hover,.layui-textarea:hover {
border-color: #D2D2D2!important
}
.layui-input:focus,.layui-textarea:focus {
border-color: #C9C9C9!important
}
.layui-form-item {
margin-bottom: 15px;
clear: both
}
.layui-form-item:after {
content: '20';
clear: both;
*zoom: 1;
display: block;
height: 0
}
.layui-form-label {
float: left;
display: block;
padding: 9px 15px;
width: 80px;
font-weight: 400;
line-height: 20px;
text-align: right
}
.layui-input-block {
margin-left: 110px;
min-height: 36px
}
@media screen and (max-width:450px) {
.layui-form-item .layui-form-label {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap
}
}
@-webkit-keyframes layui-rotate {
from {
-webkit-transform: rotate(0)
}
to {
-webkit-transform: rotate(360deg)
}
}
@keyframes layui-rotate {
from {
transform: rotate(0)
}
to {
transform: rotate(360deg)
}
}
@-webkit-keyframes layui-up {
from {
-webkit-transform: translate3d(0,100%,0);
opacity: .3
}
to {
-webkit-transform: translate3d(0,0,0);
opacity: 1
}
}
@keyframes layui-up {
from {
transform: translate3d(0,100%,0);
opacity: .3
}
to {
transform: translate3d(0,0,0);
opacity: 1
}
}
@-webkit-keyframes layui-upbit {
from {
-webkit-transform: translate3d(0,30px,0);
opacity: .3
}
to {
-webkit-transform: translate3d(0,0,0);
opacity: 1
}
}
@keyframes layui-upbit {
from {
transform: translate3d(0,30px,0);
opacity: .3
}
to {
transform: translate3d(0,0,0);
opacity: 1
}
}
@-webkit-keyframes layui-scale {
0% {
opacity: .3;
-webkit-transform: scale(.5)
}
100% {
opacity: 1;
-webkit-transform: scale(1)
}
}
@keyframes layui-scale {
0% {
opacity: .3;
-ms-transform: scale(.5);
transform: scale(.5)
}
100% {
opacity: 1;
-ms-transform: scale(1);
transform: scale(1)
}
}
@-webkit-keyframes layui-scale-spring {
0% {
opacity: .5;
-webkit-transform: scale(.5)
}
80% {
opacity: .8;
-webkit-transform: scale(1.1)
}
100% {
opacity: 1;
-webkit-transform: scale(1)
}
}
@keyframes layui-scale-spring {
0% {
opacity: .5;
transform: scale(.5)
}
80% {
opacity: .8;
transform: scale(1.1)
}
100% {
opacity: 1;
transform: scale(1)
}
}
@-webkit-keyframes layui-fadein {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
@keyframes layui-fadein {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
@-webkit-keyframes layui-fadeout {
0% {
opacity: 1
}
100% {
opacity: 0
}
}
@keyframes layui-fadeout {
0% {
opacity: 1
}
100% {
opacity: 0
}
}
</style>
</head>
<body>
<?php
$act=$_GET['act'];
if($act=="login"){
    $username=$_GET['username'];
    $password=$_GET['password'];
    $user="zhanghu";//账户
    $passwd="mima";//密码
    if($username==$user and $password==$passwd){
       $url="https://www.baidu.com/";//目标页面
       $msg="登录成功！";
    }else{
        $url=$_SERVER['PHP_SELF'];//跳转本页面;
        $msg="账户或密码错误,请重新登录！";
    }
    echo "<script> alert('$msg');parent.location.href='$url'; </script>";
}else{
    ?>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>用户登录</legend>
</fieldset>   
 
<div style="padding: 20px; background-color: #F2F2F2;">
  <div class="layui-row layui-col-space15">
  <div class="layui-col-md3"></div>
    <div class="layui-col-md6">
      <div class="layui-card">
        <div class="layui-card-header">请填写您的登录信息</div>
        <div class="layui-card-body">
<form class="layui-form" action="<?php echo $_SERVER['PHP_SELF'];?>">
  <div class="layui-form-item">
    <label class="layui-form-label">账户</label>
    <div class="layui-input-block">
      <input type="text" name="username" lay-verify="title" autocomplete="off" placeholder="请输入账户" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">密码</label>
    <div class="layui-input-block">
      <input type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
  </div> 
  <input type="hidden" name="act" value="login">
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button type="submit" class="layui-btn">登录</button>
    </div>
  </div>
</form>
        </div>
      </div>
    </div>
  </div>
</div> 
    <?php
}
?>
</body>
</html>
© 版权声明
文章版权声明 1、本网站名称：KEKC博客
2、本站网址：https://www.kekc.cn
3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长QQ2551654928进行删除处理。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报

THE END
下载专区
喜欢就支持一下吧
点赞12 分享
KEKC的头像-KEKC博客
解决deepl不给白嫖-KEKC博客
解决deepl不给白嫖
解决deepl不给白嫖
2年前 8677
子比主题附加组件-KEKC博客
子比主题附加组件
子比主题附加组件
2年前 7101
子比主题附加组件重构版插件-KEKC博客
子比主题附加组件重构版插件
子比主题附加组件重构版插件
2年前 5755
收集的15个QQ机器人框架源码-KEKC博客
收集的15个QQ机器人框架源码
收集的15个QQ机器人框架源码
2年前 4907
子比主题美化插件全开源版-KEKC博客
子比主题美化插件全开源版
子比主题美化插件全开源版
1年前 3638
学习通自动签到&极速抢答神器下载-KEKC博客
学习通自动签到&极速抢答神器下载
学习通自动签到&极速抢答神器下载
4年前 3564
相关推荐
学习通自动签到&极速抢答神器下载-KEKC博客
学习通自动签到&极速抢答神器下载
学习通自动签到&极速抢答神器下载
4年前 3564
自己整合的一款抽奖系统-KEKC博客
自己整合的一款抽奖系统
自己整合的一款抽奖系统
4年前 1156
[Windows] 分享一个TXT文本分割工具，TXTkiller（TXT杀手）-KEKC博客
[Windows] 分享一个TXT文本分割工具，TXTkiller（TXT杀手）
[Windows] 分享一个TXT文本分割工具，TXTkiller（TXT杀手）
4年前 679
搭建网站镜像站-KEKC博客
搭建网站镜像站
搭建网站镜像站
4年前 543
Pandownload网页版不限速下载复活-KEKC博客
Pandownload网页版不限速下载复活
Pandownload网页版不限速下载复活
4年前 459
又一个私人云盘：Z-File – 开源免费的个人自建网盘程序(支持云存储/OneDrive)-KEKC博客
又一个私人云盘：Z-File – 开源免费的个人自建网盘程序(支持云存储/OneDrive)
又一个私人云盘：Z-File – 开源免费的个人自建网盘程序(支持云存储/OneDrive)
4年前 401
评论 抢沙发
头像
欢迎您留下宝贵的见解！
提交
头像

昵称

取消
昵称

请填写用户信息：

  • 昵称(必填)
  • 邮箱(必填)
常用语
请选择评论常用语：
  • 1、谢谢博主分享！
  • 2、博主NB，666
  • 3、感谢楼主分享！
  • 4、感谢大佬分享！
  • 5、教程很好用，谢谢！
 夸夸
夸夸
还有吗！没看够！
表情
[aoman][baiyan][bishi][bizui][cahan][ciya][dabing][daku][deyi][doge][fadai][fanu][fendou][ganga][guzhang][haixiu][hanxiao][zuohengheng][zhuakuang][zhouma][zhemo][zhayanjian][zaijian][yun][youhengheng][yiwen][yinxian][xu][xieyanxiao][xiaoku][xiaojiujie][xia][wunai][wozuimei][weixiao][weiqu][tuosai][tu][touxiao][tiaopi][shui][se][saorao][qiudale][qinqin][qiaoda][piezui][penxue][nanguo][liulei][liuhan][lenghan][leiben][kun][kuaikule][ku][koubi][kelian][keai][jingya][jingxi][jingkong][jie][huaixiao][haqian][aini][OK][qiang][quantou][shengli][woshou][gouyin][baoquan][aixin][bangbangtang][xiaoyanger][xigua][hexie][pijiu][lanqiu][juhua][hecai][haobang][caidao][baojin][chi][dan][kulou][shuai][shouqiang][yangtuo][youling]
代码

请输入代码：

确认
图片

    暂无评论内容

随机文章

1jetbrains全家桶一键激活

2前端+后端实现的get、post提交验证

3bing必应搜索内陆无法访问

4全国大学生同上一堂疫情防控思政大课以及观后感

5宝塔IDC主机系统的弊端分析

6将《清除购物车按钮》添加到购物车页面和迷你购物车