Slog82_ArthurSlong个人网站后台管理页面GET！

最新推荐文章于 2022-05-10 14:51:40 发布

ArthurSlog

最新推荐文章于 2022-05-10 14:51:40 发布

阅读量133

点赞数

分类专栏：个人网站文章标签： ArthurSlog 后台管理 web 管理登陆界面

本文链接：https://blog.csdn.net/u010997452/article/details/82826675

版权

个人网站专栏收录该内容

15 篇文章 0 订阅

订阅专栏

ArthurSlog

ArthurSlog
SLog-82
Year·1
Guangzhou·China
September 24th 2018

关注微信公众号“ArthurSlog”

慎终如始终无败事

开发环境MacOS(High Sierra 10.13.6 (17G65))

需要的信息和信息源：

开始编码

本篇对ArthurSlog.com 后台管理页面登陆界面进行设计
暂时先把样式和html写在一起
完整的页面代码如下：

~/Desktop/ArthurSlogWebsize/client/dist/manager.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>ArthurSlogManagerPathfrom</title>
</head>

<body>
    <div class="header">
        <a href="http://www.arthurslog.com">
            <img src="./ArthurSlog_Logo.png">
        </a>
    </div>
    <div class="container">

        <form action="demo_form.asp" method="POST" id="logininfo">
            <input type="text" name="userName" placeholder="UserName" required="required">
            <br>
            <br>
            <input type="password" name="password" placeholder="Password" required="required">
            <br>
            <br>
            <input class="loginButton" type="submit" form="logininfo" value="Login">
        </form>
    </div>

    <footer>
        <a href="http://www.miitbeian.gov.cn">粤ICP备18088522号-1</a>
    </footer>
</body>

<style>
    html,
    body {
        position: relative;
        margin: 0%;
        padding: 0%;
        height: 100%;
        display: block;
        overflow: hidden;
        background-color: #797e85;
    }

    .header {
        width: 256px;
        height: 95px;
        position: relative;
        left: calc(50% - 104.5px);
        margin: 1px;
        padding: 1px;
    }


    .container {
        display: block;
        width: 350px;
        height: 150px;
        background-color: #d3d3d3;
        position: relative;
        left: calc(50% - 175px);
        padding: 24px;
        border: 1px solid #bbb;
        box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
        margin: 0%;
        border-radius: 4px;
    }

    input {
        width: 300px;
        height: 38px;
        font-size: 100%;
        border: 0;
        padding: 0 25px 0 25px;
        margin: 0;
        border-radius: 4px;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4);
    }

    .loginButton {
        width: 350px;
        background-color: #2593de;
        color: white;
        font-size: 100%;
        margin: 0%;
        border-radius: 4px;
        border: 1px solid #aaa;
        padding: 0 80px 0 80px;
    }

    .spreaLine {
        height: 10px;
    }

    footer {
    font-size: .8rem;
    position: absolute;
    height: 5vh;
    bottom: 1vh;
    left: calc(50% - 80px);
}
</style>

</html>

实际效果请移步 www.ArthurSlog.com/manager.html
至此，完成了 ArthurSlog网站的后台登陆界面。

欢迎关注我的微信公众号 ArthurSlog

关注微信公众号“ArthurSlog”

如果你喜欢我的文章欢迎点赞留言

谢谢

ArthurSlog

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Slog82_ArthurSlong个人网站后台管理页面GET！

ArthurSlogSLog-82Year·1Guangzhou·ChinaSeptember 24th 2018ArthurSlog.comMSDN: ArthurSlogGitHub: BlessedChildNPMJS.com: arthurslog掘金主页简书主页segmentfault慎终如始终无败事...
复制链接

扫一扫