emlog后台登陆页面美化特效教程 - 小Q博客

今日站长很懒 一篇文章都没更新 | 共分享了个资源

emlog后台登陆页面美化特效教程

本文作者: 小Q博客     发布于「2019-6-30」 -  emlog教程

作者: 小Q博客

全网最全的网络资源分享网站

手机扫码查看

标签:

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!

Emlog博客后台登陆随机显示不同背景图的方法,

让你每次登陆后台都能看到不同的背景图片,想一想是不是有点小激动呢。

话不多说,下面就开始教程,

后台模板是杨小杰博客分享出来的,用起来很清爽,非常干净简洁又好看的一个后台界面。

模板的代码如下,使用方法:

网站目录下找到/admin/views/login.php文件替换里面的内容即可,替换之前一定一定一定要备份你的login.php文件!!!负责出错容易造成文件丢失!

动漫随机图API:http://acg.bakayun.cn/randbg.php

<?php if(!defined('EMLOG_ROOT')) {exit('error!');}?>
<html>
<head>
  <meta itemprop="name" content="子成君博客后台"/>
  <meta itemprop="image" content="http://www.zcjun.com/logo.png" />
  <meta name="description" itemprop="description" content="账号:admin \r\n 密码:password" />
  <meta name="viewport" content="width=device-width">
  <meta name="author" content="Youngxj" />
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>用户登录</title>
  <!-- Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="./views/login/js/verificationNumbers.js" tppabs="./views/login/js/verificationNumbers.js"></script>
  <script src="./views/login/js/Particleground.js" tppabs="./views/login/js/Particleground.js"></script>
<style>
    body{background:url('这里填入随机图片背景api接口');background-repeat:no-repeat;background-attachment:fixed;overflow:hidden;}
    /*web background*/
    .container{
      display:table;
      height:100%;
    }
    .row{
      display: table-cell;
      vertical-align: middle;
    }
    /* centered columns styles */
    .row-centered {
      text-align:center;
    }
    .col-centered {
      display:inline-block;
      float:none;
      margin-right:-4px;
    }
    .row-centered{
      z-index: 0;/* 为不影响内容显示必须为最高层 */
      position: relative;
      overflow: hidden;
    }
    .row-centered:after {
      content: "";/* 必须包括 */
      position: absolute;/* 固定模糊层位置 */
      left: -100%;/* 回调模糊层位置 */
      top: -100%;/* 回调模糊层位置 */
      background:url(1.jpg) no-repeat center center fixed;/* 与上面的bg中的background设置一样 */
      filter: blur(20px);/* 值越大越模糊 */
      z-index: -2;/* 模糊层在最下面 */
    }
    .well{
      background-color: rgba(0, 0, 0, 0.2);/* 为文字更好显示,将背景颜色加深 */
    }
    .well {
      position: relative;
      margin: 0 auto;
      padding: 1em;
      max-width: 30em;
      border-radius: .3em;
      box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset,
        0 .5em 1em rgba(0, 0, 0, 0.6);
      text-shadow: 0 1px 1px hsla(0,0%,100%,.3);
      background: hsla(0,0%,100%,.3);
      overflow: hidden;
      text-align:left;
      /*    -webkit-filter: blur(3px);
      filter: blur(3px);*/
    }
    .well::before {
      content: '';
      position: absolute;
      top: 0; right: 0; bottom: 0; left: 0;
      z-index: -1;
      -webkit-filter: blur(20px);
      filter: blur(20px);
      margin: -30px;
      /*background: rgba(255,0,0,.5);*/
    }
  .form-control{background-color:rgba(255, 255, 255, 0);}
  #sizing-addon1{background:rgba(255, 0, 0, 0);}
  </style>
</head>
<body>
  <div class="container">
    <div class="row row-centered">
      <div class="well col-md-6 col-centered">
        <h2>欢迎登录</h2>
        <form action="./index.php?action=login" method="post" role="form" name="f">
          <div class="input-group input-group-md">
            <span class="input-group-addon" id="sizing-addon1"><i class="glyphicon glyphicon-user" aria-hidden="true"></i></span>
            <input type="text" class="form-control" id="user" name="user" placeholder="请输入用户ID"/>
          </div>
          <div class="input-group input-group-md">
            <span class="input-group-addon" id="sizing-addon1"><i class="glyphicon glyphicon-lock"></i></span>
            <input type="password" class="form-control" id="pw" name="pw" placeholder="请输入密码"/>
          </div>
          <br/>
          <div class="createCode">
          <?php echo $ckcode; ?>
          </div>
          <div class="login-button">
            <div class="checkboxs"> <input type="checkbox" name="ispersis" id="ispersis" value="1" /><span><label for="ispersis">记住我</label></span></div>
          </div>
          <div class="login-ext"><?php doAction('login_ext'); ?></div>
          <button type="submit" class="btn btn-success btn-block">登录</button>
          <?php if ($error_msg): ?>
            <div class="login-error"><?php echo $error_msg; ?></div>
          <?php endif;?>
        </form>
      </div>
    </div>
  </div>
  <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
  <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
<script>
  $(document).ready(function() {
    createCode();
  });
</script>
</html>
分享到:
打赏

本站开启投稿功能注册账号即可投稿
头像
本文作者描述: 专注于网络资源娱乐技术教程分享
文章版权信息

阅读时间:  发布于:2019-6-30
本文标题:emlog后台登陆页面美化特效教程
本文链接:http://www.xiaoqbk.com/140.html
版权声明:文章为《 小Q博客》原创,转载请保留出处!

百度:[百度已收录]360:[360已收录]搜狗:[搜狗已收录]

评论

未显示?请点击刷新
切换注册

登录

您也可以使用第三方帐号快捷登录

切换登录

注册

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏