为kurblog修改后台登录样式

又一遍抠脚一边打代码，完成了kurblog主题froyo的后台登录样式修改，没什么好说的。最多公布下代码而已，代码在本文章，自己修改一下就可以用于任何博客系统。

<!doctype html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <script src="/static/common/js/jquery.min.js"></script>
    <link href="/theme/froyo/css/main.css?1510548490" type="text/css" rel="stylesheet"/>
    <link href="/theme/froyo/css/froyo-style.css?1510548490" type="text/css" rel="stylesheet"/>

</head>
<body>
<style> .admin-login-tittle{font-size:21px;font-weight:300;}.admin-login-form div{margin-bottom:1em;}.login-body{text-align:center;padding-top:15%;}.admin-login-form input{width:350px;border:1px solid #ececec;padding:10px 15px;border-radius:0px;box-sizing:border-box;font-family:-apple-system,"Helvetica Neue",Helvetica,"Nimbus Sans L",Arial,"Liberation Sans","PingFang SC","Hiragino Sans GB","Source Han Sans CN","Source Han Sans SC","Microsoft YaHei","Wenquanyi Micro Hei","WenQuanYi Zen Hei","ST Heiti",SimHei,"WenQuanYi Zen Hei Sharp",sans-serif;}.admin-name{margin-top:2em;}#login-button{font-size:15px;width:350px;background:#02B875;color:#fff;border:1px solid #02B875;padding-top:5px;padding-bottom:5px;cursor:pointer;}.admin-face{text-align:-webkit-center;margin-bottom:3em;}.admin-face img{border-radius:50em;width:150px;}.admin-face img{margin:0 auto;-webkit-border-radius:110px;border-radius:110px;-webkit-transition:-webkit-transform 0.5s ease-out;-moz-transition:-moz-transform 0.5s ease-out;-o-transition:-o-transform 0.5s ease-out;-ms-transition:-ms-transform 0.5s ease-out;}.admin-face img:hover{cursor:pointer;-webkit-transform:rotateZ(360deg);-moz-transform:rotateZ(360deg);-o-transform:rotateZ(360deg);-ms-transform:rotateZ(360deg);transform:rotateZ(360deg);}.face-img{width:150px;border-radius:50em;-webkit-box-shadow:0px 14px 30px -15px rgba(0,0,0,0.75);-moz-box-shadow:0px 14px 30px -15px rgba(0,0,0,0.75);-ms-box-shadow:0px 14px 30px -15px rgba(0,0,0,0.75);-o-box-shadow:0px 14px 30px -15px rgba(0,0,0,0.75);box-shadow:0px 14px 30px -15px rgba(0,0,0,0.75);}</style>

<div class="wrapper">

    <div class="froyo-frame login-body">
        <div class="admin-face">
            <div class="face-img">
            <img src="/theme/froyo/images/nobnewface.jpg" alt="大雄">
        </div>
        </div>
        <h1 class="admin-login-tittle">「从现在开始，为每一天写下一篇记录」</h1>
        <div class="admin-login-form">
            <form class="form" action="{:url('admin/login/index')}" method="post" autocomplete="off">
                <div class="admin-name"><input name="username" type="text" placeholder="用户名"></div>
                <div class="admin-password"><input name="password" type="password" placeholder="密码"></div>
                <div class="admin-button"><button type="submit" id="login-button">登录</button></div>
            </form>
        </div>
    </div>

</div>

<script type="text/javascript">
    $('#login-button').click(function(event){
        event.preventDefault();
        $('form').fadeOut(500);
        $('.wrapper').addClass('form-success');
        $('.form').submit();
    });
</script>

</body>
</html>

下面放一张抠脚大汉关关@sinkey.cc 以前做的，Froyo演示地址：http://199508.com/admin

完-

如果你也想加入kurblog，请联系我们！

0 likes