首页 未分类

效果总览:
1.png

登陆界面

后台首页

实现方法

一:分析结构

不多赘述,上一篇文章有很详细的分析。传送门

二:添加css

直接贴代码,注释都在了

aurora.php
        <style>
    *{
        margin: 0;
        padding: 0;
        text-decoration: none;
        box-sizing: border-box;
    }/*整体风格*/
    body{
        min-height: 100vh;
        background-image: linear-gradient(120deg,#3498db,#8e44ad);/*渐变色定义*/
    }
    .main{
        width:95%;
        background: #f1f1f1;
        height: 90%;
        padding: 80px 40px ;
        border-radius: 10px;
        position: absolute;
        left:2.5%;
        top:7%;
        transform: translate(0%,0%);
    }
    .highcontrol{
        overflow-y: auto;
        height:100%;
    }/*控高(div)*/
    .typecho-login{
        height:400px;
    }
    .typecho-login-wrap h1
    {
        text-align: center;
        maargin-bottom: 60px;
    }
    .txtb{
        border-bottom: 2px solid #adadad;
        position:relative;
        margin:30px 0;
    }
    .txtb input{
        font-size:15px;
        color:#333;
        border:none;
        width:100%;
        outline:none;
        background:none;
        padding:0 5px;
        height:40px;
    }
    .txtb span::before{
        content: attr(data-placeholder);
        position: absolute;
        top:50%;
        left:5px;
        color:#adadad;
        transform:translateY(-50%);
        z-index:-1;
        transition:.5s;
    }
    .txtb span::after{
        content:'';
    
        width:0%;
        height:2px;
        background:linear-gradient(120deg,#3498db,#8e44ad);
        transition:.5s;
    }
    .focus + span::before{
        top:-5px;
    }
    .focus + span::after{
        width:100%;
    }
</style>

三:改造后台页面

header.php

1.1/17.10.30版本可以直接使用下面内容替换。假如版本不同,请自行删改。

<?php
if (!defined('__TYPECHO_ADMIN__')) {
    exit;
}

$header = '<link rel="stylesheet" href="' . Typecho_Common::url('normalize.css?v=' . $suffixVersion, $options->adminStaticUrl('css')) . '">
<link rel="stylesheet" href="' . Typecho_Common::url('grid.css?v=' . $suffixVersion, $options->adminStaticUrl('css')) . '">
<link rel="stylesheet" href="' . Typecho_Common::url('style.css?v=' . $suffixVersion, $options->adminStaticUrl('css')) . '">
<!--[if lt IE 9]>
<script src="' . Typecho_Common::url('html5shiv.js?v=' . $suffixVersion, $options->adminStaticUrl('js')) . '"></script>
<script src="' . Typecho_Common::url('respond.js?v=' . $suffixVersion, $options->adminStaticUrl('js')) . '"></script>
<![endif]-->';

/** 注册一个初始化插件 */
$header = Typecho_Plugin::factory('admin/header.php')->header($header);

?><!DOCTYPE HTML>
<html class="no-js">
    <head>
        <meta charset="<?php $options->charset(); ?>">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="renderer" content="webkit">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title><?php _e('%s - %s', $menu->title, $options->title); ?></title>
        <meta name="robots" content="noindex, nofollow">
        <?php echo $header; ?>
        <?php include "aurora.php"; ?>
    </head>
    <body<?php if (isset($bodyClass)) {echo ' class="' . $bodyClass . '"';} ?>>
    <!--[if lt IE 9]>
        <div class="message error browsehappy" role="dialog"><?php _e('当前网页 <strong>不支持</strong> 你正在使用的浏览器. 为了正常的访问, 请 <a href="#">升级你的浏览器</a>'); ?>.</div>
    <![endif]-->

至此完成。
程序代码亲测有效,假如出现问题请联系我,我将及时更新。(可以直接在下方评论)




文章评论

TC