使用 妹子UI 开发后台管理页面

已于 2022-10-10 10:04:47 修改
阅读量618 收藏
点赞数
分类专栏： HTML 文章标签： html
于 2022-10-09 09:30:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gc666888/article/details/127220470
版权

使用 Amaze UI 开发漂亮的后台管理页面，管理端登录页面、管理端列表页面、管理端保存页面。
页面布局样式使用固定定位和flex实现。
创作时间：2022年10月9日09:21:36

登录页面效果

在这里插入图片描述

列表页面效果

在这里插入图片描述

保存页面效果

在这里插入图片描述

引入 妹子UI 样式文件

<link rel="stylesheet" href="/assets/css/amazeui.min.css">

开发登录页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="/assets/css/amazeui.min.css">
    <link rel="stylesheet" href="/assets/css/lss-admin.css">
</head>
<body>
<div class="lss-admin lss-admin-login">
    <div class="lss-admin-login-container">
        <form class="am-form" action="/admin/list">
            <div class="am-form-group">
                <label for="loginName">账号</label>
                <input type="text" class="" id="loginName" placeholder="输入账号">
            </div>

            <div class="am-form-group">
                <label for="password">密码</label>
                <input type="password" class="" id="password" placeholder="输入密码">
            </div>

            <button type="submit" class="am-btn am-btn-primary">登录</button>
        </form>
    </div>
</div>
</body>
</html>

开发列表页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
    <link rel="stylesheet" href="/assets/css/amazeui.min.css">
    <link rel="stylesheet" href="/assets/css/lss-admin.css">
    <link rel="stylesheet" href="/assets/css/lss.css">
</head>
<body>
<div class="lss-admin">
    <div class="lss-admin-list-left">
        <ul class="am-list am-list-border">
            <li><a href="#" class="current"><i class="am-icon-pencil am-icon-fw"></i>链接管理</a></li>
            <li><a href="#"><i class="am-icon-pencil am-icon-fw"></i>项目管理</a></li>
            <li><a href="#"><i class="am-icon-pencil am-icon-fw"></i>日志管理</a></li>
            <li><a href="#"><i class="am-icon-pencil am-icon-fw"></i>报销管理</a></li>
            <li><a href="#"><i class="am-icon-pencil am-icon-fw"></i>加班管理</a></li>
        </ul>
    </div>
    <div class="lss-admin-list-right">
        <ol class="am-breadcrumb am-breadcrumb-slash">
            <li class="am-active">用户管理</li>
        </ol>
        <form class="am-form-inline lss-mb30" role="form">
            <div class="am-form-group">
                <input type="text" class="am-form-field" placeholder="名称">
            </div>

            <button type="submit" class="am-btn am-btn-primary">查询</button>
            <button type="button" class="am-btn am-btn-default">清空</button>
        </form>
        <div class="lss-mb20">
            <a class="am-btn am-btn-primary" href="/admin/save">添加</a>
            <button class="am-btn am-btn-danger">删除</button>
        </div>
        <table class="am-table am-table-bordered">
            <thead>
            <tr>
                <th>网站名称</th>
                <th>网址</th>
                <th>创建时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>Amaze UI</td>
                <td>http://amazeui.org</td>
                <td>2012-10-01</td>
                <td>
                    <a href="/admin/save" class="am-btn am-btn-primary am-btn-xs">修改</a>
                    <button class="am-btn am-btn-danger am-btn-xs">删除</button>
                </td>
            </tr>
            <tr>
                <td>Amaze UI</td>
                <td>http://amazeui.org</td>
                <td>2012-10-01</td>
                <td>
                    <a href="/admin/save" class="am-btn am-btn-primary am-btn-xs">修改</a>
                    <button class="am-btn am-btn-danger am-btn-xs">删除</button>
                </td>
            </tr>
            <tr class="am-active">
                <td>Amaze UI(Active)</td>
                <td>http://amazeui.org</td>
                <td>2012-10-01</td>
                <td>
                    <a href="/admin/save" class="am-btn am-btn-primary am-btn-xs">修改</a>
                    <button class="am-btn am-btn-danger am-btn-xs">删除</button>
                </td>
            </tr>
            <tr>
                <td>Amaze UI</td>
                <td>http://amazeui.org</td>
                <td>2012-10-01</td>
                <td>
                    <a href="/admin/save" class="am-btn am-btn-primary am-btn-xs">修改</a>
                    <button class="am-btn am-btn-danger am-btn-xs">删除</button>
                </td>
            </tr>
            <tr>
                <td>Amaze UI</td>
                <td>http://amazeui.org</td>
                <td>2012-10-01</td>
                <td>
                    <a href="/admin/save" class="am-btn am-btn-primary am-btn-xs">修改</a>
                    <button class="am-btn am-btn-danger am-btn-xs">删除</button>
                </td>
            </tr>
            </tbody>
        </table>
        <ul class="am-pagination">
            <li class="am-disabled"><a href="#">&laquo;</a></li>
            <li class="am-active"><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">&raquo;</a></li>
        </ul>
    </div>
</div>
</body>
</html>

开发保存页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>保存</title>
    <link rel="stylesheet" href="/assets/css/amazeui.min.css">
    <link rel="stylesheet" href="/assets/css/lss-admin.css">
    <link rel="stylesheet" href="/assets/css/lss.css">
</head>
<body>
<div class="lss-admin">
    <div class="lss-admin-save-left">
        <ul class="am-list am-list-border">
            <li><a href="#" class="current"><i class="am-icon-pencil am-icon-fw"></i>链接管理</a></li>
            <li><a href="#"><i class="am-icon-pencil am-icon-fw"></i>项目管理</a></li>
            <li><a href="#"><i class="am-icon-pencil am-icon-fw"></i>日志管理</a></li>
            <li><a href="#"><i class="am-icon-pencil am-icon-fw"></i>报销管理</a></li>
            <li><a href="#"><i class="am-icon-pencil am-icon-fw"></i>加班管理</a></li>
        </ul>
    </div>
    <div class="lss-admin-save-right">
        <ol class="am-breadcrumb am-breadcrumb-slash">
            <li><a href="/admin/list" id="goBack">用户管理</a></li>
            <li class="am-active">用户保存</li>
        </ol>
        <form class="am-form am-form-horizontal">
            <div class="am-form-group">
                <label for="doc-ipt-3" class="am-u-sm-2 am-form-label">电子邮件</label>
                <div class="am-u-sm-10">
                    <input type="email" id="doc-ipt-3" placeholder="输入你的电子邮件">
                </div>
            </div>

            <div class="am-form-group">
                <label for="doc-ipt-pwd-2" class="am-u-sm-2 am-form-label">密码</label>
                <div class="am-u-sm-10">
                    <input type="password" id="doc-ipt-pwd-2" placeholder="设置一个密码吧">
                </div>
            </div>

            <div class="am-form-group">
                <div class="am-u-sm-10 am-u-sm-offset-2">
                    <button type="submit" class="am-btn am-btn-primary">保存</button>
                    <button type="button" class="am-btn am-btn-default" id="goBackBtn">返回</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script src="/assets/js/jquery.min.js"></script>
<script>
    $("#goBackBtn").click(function(){
        location.href=$("#goBack").attr("href");
    })
</script>
</body>
</html>

lss-admin.css 样式文件

.lss-admin {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    /*设置背景图片*/
    background-image: url("/assets/i/login.jpg");
    background-repeat: no-repeat;
    background-position: center 0;
    background-size: cover;
}

/*后台登录页面*/
.lss-admin-login {
    display: flex;
    align-items: center;
    justify-content: center;
}

.lss-admin-login-container {
    background-color: rgba(255, 255, 255, .85);
    width: 400px;
    overflow-y: hidden;
    padding: 20px;
}

/*后台列表页面、保存页面*/
.lss-admin-list-left, .lss-admin-save-left {
    position: fixed;
    left: 20px;
    top: 20px;
    bottom: 20px;
    width: 300px;
    background-color: rgba(255, 255, 255, .85);
    border-radius: 16px;
    padding: 20px;
    overflow: auto;
}

.lss-admin-list-right, .lss-admin-save-right {
    position: fixed;
    left: 340px;
    top: 20px;
    right: 20px;
    bottom: 20px;
    background-color: rgba(255, 255, 255, .85);
    border-radius: 16px;
    padding: 20px;
    overflow: auto;
}

.lss-admin-list-left .am-list-border > li > a:focus, .lss-admin-list-left .am-list-border > li > a:hover, .lss-admin-save-left .am-list-border > li > a:focus, .lss-admin-save-left .am-list-border > li > a:hover {
    background-color: transparent;
}

.lss-admin-list-left .am-list > li, .lss-admin-save-left .am-list > li {
    margin-bottom: 0;
    background-color: transparent;
    border: none;
}

.lss-admin-list-right hr {
    margin: 20px 0;
}

.lss-admin-save-right .am-form-group, .lss-admin-login .am-form-group {
    margin-bottom: 20px;
}

.am-pagination > .am-disabled > a, .am-pagination > li > a {
    background-color: transparent;
}

.am-form input[type=number], .am-form input[type=search], .am-form input[type=text], .am-form input[type=password], .am-form input[type=datetime], .am-form input[type=datetime-local], .am-form input[type=date], .am-form input[type=month], .am-form input[type=time], .am-form input[type=week], .am-form input[type=email], .am-form input[type=url], .am-form input[type=tel], .am-form input[type=color], .am-form select, .am-form textarea, .am-form-field {
    background-color: transparent;
}

.lss-admin-list-left .current, .lss-admin-save-left .current {
    color: #095f8a !important;
}
牧小七
关注
专栏目录
从零开始，搭建博客系统MVC5+EF6搭建框架（4）上,前后台页面布局页面实现，介绍使用的UI框架以及JS组件
wo4366175的博客
02-13 1667
一、博客系统进度回顾以及页面设计 1.1页面设计说明     紧接前面基础基本完成了框架搭建，现在开始设计页面，前台页面设计我是模仿我博客园的风格来设计的，后台是常规的左右布局风格。 1.2前台页面风格     主页面： 技术博客风格： 详情页风格： 详情页留言风格： 1.3后台风格： 表格风格： 博客发布风格： 以上看到的系统页面是目前系统完成的
Mint UI入门系列教程
qq_38822390的博客
05-09 378
Vue移动端框架Mint UI教程-搭建环境引入框架（一） 官网：https://mint-ui.github.io/#!/zh-cn Github: https://github.com/ElemeFE/mint-ui/ 今天具体说一说比较常用的；Mint UI框架的按钮组件，Mint UI是 饿了么团队开发基于vue .js的移动端UI框架，它包含丰富的 CSS 和 JS 组件，能够满足日...
妹子UI框架
01-21
妹子UI框架 最近刚流行 的 UI框架
使用妹子UI开发的体验分享
weixin_30907935的博客
03-15 192
前阵子看到一个类似bootstrap的前端UI框架，好奇心驱使下，去琢磨了一些，最终决定网站改版用这个UI试试效果： 首页+头部： 投稿页： 现成拷贝过来的评论列表： 总结： 上手难度： （熟悉bootstrap）：★ （不熟悉bootstrap）：★★★ 优点： 一、很多组件都能直接用，常用组件基本都有了，比较适用于快速开发； 二、官网文档挺详细...
Amaze UI后台管理模板 2.7.2
05-01
Amaze后台管理模板，简洁大气，全套模板，包括的后台登录页面、表单提交页、 数据表格页、相册、帮助页、个人资料、控制台、错误日志、404错误页等后台模板页面。Amaze UI后台管理模板 2.7.2 更新日志：2016-08-17JS:Improved #900 处理Modal元素停止冒泡引发的使用不变问题；Improved #901 调整Tabs样式，适应元素超出tab内容的使用场景。
Amaze UI后台管理模板
04-20
Amaze后台管理模板，简洁大气，全套模板，包括的后台登录页面、表单提交页、 数据表格页、相册、帮助页、个人资料、控制台、错误日志、404错误页等多个后台模板页面。
Amaze UI Admin后台管理系统模板
06-25
_后台 管理系统 系统 后台ui oa cms系统 login 登录 全屏 适应 左栏 后台界面 后台管理系统 Amaze ui 图表 ui管理界面
基于妹子ui的pc端支付页面
10-24
在"基于妹子ui的pc端支付页面"项目中，我们主要关注的是如何利用Amaze UI来创建一个美观且功能齐全的支付界面。 首先，我们需要了解Amaze UI的基本结构和使用方法。Amaze UI的核心在于其模块化的设计，包括CSS、JS...
超实用 UI 设计四原则！
tanzhidan1994的博客
03-20 584
1. 产品思路要吃透 详细地分析需求，能让设计师更好的把握产品的思路。多看需求中交互或产品给出的产品流程图，在初步的交互结构图中，可以根据需求大致的构造页面的布局和排版，把页面内容布局和排版记入心中，为整个项目打下一个埋点，为将来设计创作时找设计参考打好基础。 2. 换位思考很重要 分析需求时，需要更多的站在交互或产品经理的角度上去看待问题，多看交互流程图，多想产品的逻辑思维，消化交互（...
Amaze UI后台管理模板 v2.7.2
SEO资源下载
01-15 375
介绍 Amaze后台管理模板，简洁大气，全套模板，包括的后台登录页面、表单提交页、 数据表格页、相册、帮助页、个人资料、控制台、错误日志、404错误页等多个后台模板页面。 下载地址 http://www.bytepan.com/95GiqkXq3w8 图片 ...
【AmazeUI】黑白两种主题后台管理模板 - admin
08-23
【AmazeUI】黑白两种主题后台管理模板
Amaze后台管理模板，简洁大气，全套模板，
03-11
包括的后台登录页面、表单提交页、 数据表格页、相册、帮助页、个人资料、控制台、错误日志、404错误页等后台模板页面.zip
基于AmazeUI的漂亮后台模板
09-21
一套基于amaziui的后台模板，非常简洁美观，易于开发。推荐下载！
管理页面的css样式
03-07
管理页面的css样式，有在做后台页面的看看，有其他需要的可以联系我
基于amazeui商城销售管理后台模板html源码
03-17
基于amazeui商城销售管理后台模板html源码
amazeui 后台模板
aita6163的博客
08-21 341
<!doctype html> <html class="no-js"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Amaze UI Admin 404...
Python+Flask(1)--AmazeUI后台管理开发框架
阿桂天山的技术栈
10-14 1098
前言:后台管理的前端框架有很多种,今天就来尝试用AmazeUI前端框架作为我的后台管理开发框架。
探索 Laravel5-AmazingUI-Admin：一款高效易用的后台管理框架
最新发布
gitblog_00097的博客
03-31 452
探索 Laravel5-AmazingUI-Admin：一款高效易用的后台管理框架 laravel5-amazeui-adminlaravel5 amazeui admin项目地址:https://gitcode.com/gh_mirrors/la/laravel5-amazeui-admin 在这个数字化的时代，快速构建功能完备且美观的后台管理系统是开发者们的一大需求。为此，我们向您推荐——一...
AmazeUI后台管理框架
11-01
Amaze UI 是一个轻量级（所有 CSS 和 JS gzip 后 100 kB 左右）、 Mobile first 的前端框架， 基于开源社区流行前端框架编写
产品UI设计四大基本原则
"强悍的纽约设计师妹子教你App设计四大原则" 本文总结了从建筑到产品UI的四个设计的基本原则，分别是轴、对齐、强化、运动和连续性。 首先，轴是UI设计中最基本、最常见的概念，也是用来组织界面结构的重要核心。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值