后台页面模版

最新推荐文章于 2021-06-26 18:27:24 发布
最新推荐文章于 2021-06-26 18:27:24 发布
阅读量278 收藏
点赞数
分类专栏： python，HTM Django

html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="/static/plugins/bootstrap/css/bootstrap.css"/>
    <link rel="stylesheet" href="/static/plugins/font-awesome/css/font-awesome.css"/>
    <link rel="stylesheet" href="/static/css/commons.css"/>
    <link rel="stylesheet" href="/static/css/backend.css"/>
    {% block css %} {% endblock %}
</head>
<body>
<div class="pg-header">
    <div class="logo left" style="text-align: center;background-color: #1c5a9c;">
        <a href="#" style="color: #ffffff;font-size:30px;font-weight: bold;text-decoration: none">
            EasyStack
        </a>
    </div>

    <div class="left-menu left">
        <a class="menu-item" href="/">博客首页</a>
    </div>

    <div class="right-menu right clearfix">

        <div class="user-info right">
            <a href="#" class="avatar">
                <img class="img-circle" src="/static/imgs/avatar/default.png">
            </a>

            <div class="more-info">
                <a href="#" class="more-item">个人信息</a>
                <a href="/logout.html" class="more-item">注销</a>
            </div>
        </div>

        <a class="user-menu right">
            消息
            <i class="fa fa-commenting-o" aria-hidden="true"></i>
            <span class="badge bg-success">2</span>
        </a>

        <a class="user-menu right">
            通知
            <i class="fa fa-envelope-o" aria-hidden="true"></i>
            <span class="badge bg-success">2</span>
        </a>

        <a class="user-menu right">
            任务
            <i class="fa fa-bell-o" aria-hidden="true"></i>
            <span class="badge bg-danger">4</span>
        </a>
    </div>

</div>
<div class="pg-body">
    <div class="menu">
        <a class="menu-item" href="/backend/article-0-0.html">
            <i class="fa fa-cogs" aria-hidden="true"></i>
            <span>文章管理</span>
        </a>
        <a class="menu-item" href="/backend/category.html">
            <i class="fa fa-cogs" aria-hidden="true"></i>
            <span>分类管理</span>
        </a>
        <a class="menu-item" href="/backend/tag.html">
            <i class="fa fa-cogs" aria-hidden="true"></i>
            <span>标签管理</span>
        </a>
        <a class="menu-item" href="/backend/base-info.html">
            <i class="fa fa-cogs" aria-hidden="true"></i>
            <span>个人信息</span>
        </a>
    </div>
    <div class="content">
        {% block conent %} {% endblock %}
    </div>
</div>
<script type="text/javascript" src="/static/js/jquery-1.12.4.js"></script>
{% block js %}{% endblock %}
</body>
</html>

css:  

https://pan.baidu.com/s/1apyYPtNdKJKfnSHuuzVc1A


没写完： 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock %}</title>
    <link rel="stylesheet" href="/static/css/commons.css" />
    {% block css %}{% endblock %}
    <style>
        body{
            margin: 0;
        }
        .left{
            float: left;
        }
        .right{
            float: right;
        }
        .hide{
            display: none;
        }
        .pg-header{
            height: 48px;
            background-color: #2f72ab;
            min-width: 1100px;
            line-height: 48px;
        }
        .pg-header .logo{
            color: white;
            font-size: 24px;
            width: 200px;
            background-color: #1c5a9c;
            text-align: center;
        }
        .pg-header .hl-menu .item{
            color: white;
            padding: 0 10px;
            height: 48px;
            display: inline-block;
        }
        .pg-header .hl-menu .item:hover{
            background-color: #1c5a9c;
        }
        .pg-header .hl-menu .item-set{
            display: inline-block;
            position: relative
        }
        .pg-header .hl-menu .item-set .sets{
            position: absolute;
            width: 150px;
            background-color: aliceblue;
            border: 1px solid #dddddd;
            display: none;
        }
        .pg-header .hl-menu .item-set .sets a{
            display: block;
            line-height: 30px;
        }
        .pg-header .hl-menu .item-set:hover .sets{
            display: block;
        }
    </style>
</head>
<body>
    <div class="pg-header">
        <div class="logo left">城管您说话</div>
        <div class="hl-menu left">
            <a class="item" href="#">菜单一</a>
            <a class="item" href="#">菜单二</a>
            <a class="item" href="#">菜单三</a>
            <div class="item-set">
                <a class="item" href="#">菜单四</a>
                <div class="sets">
                    <a href="#">菜单四-1</a>
                    <a href="#">菜单四-2</a>
                    <a href="#">菜单四-3</a>
                </div>
            </div>
            <div class="item-set">
                <a class="item" href="#">菜单四</a>
                <div class="sets">
                    <a href="#">菜单四-1</a>
                    <a href="#">菜单四-2</a>
                    <a href="#">菜单四-3</a>
                </div>
            </div>

        </div>
        <div class="hr-menu right">

        </div>
    </div>

    <div class="pg-body">
        <div class="menus">

        </div>
        <div class="contents">
            {% block contents %}{% endblock %}
        </div>
    </div>
    <div class="pg-footer"></div>

    {% block js %}{% endblock %}
</body>
</html>






小布很生气
关注
专栏目录
后台管理博客页面
triet的博客
06-09 144
导航条部分的编写 中间内容部分 效果为： 底部内容不变 效果为：
博客后台管理界面模板
11-18
博客后台管理界面 前阵在网上找的 界面感觉蛮简洁的 大家可以下载看看 附件：HTM ASP
个人博客后台管理html模板（简洁的响应式html模板）
01-29
个人博客后台管理html模板（简洁的响应式html模板）。可提供给后台开发者进行开发后端的前端模板。
后台页面模板（页面很多）
11-02
后台模板，很好看的一款后台模板，适合范围广，电子商务、oa系统等
后台博客发布页面
triet的博客
06-10 197
编写导航条 效果图： 添加发布与列表项 效果为： 中间部分输出内容 效果图： 底部页面不变 效果图：
后台页面模板
09-14
【后台页面模板】是网页设计和开发中的一个重要组成部分，它为网站后台管理界面提供了一套预定义的布局和样式，让开发者可以快速构建出功能齐全、界面统一的管理界面，提高工作效率。在描述中提到“个人一直使用，...
H+ v4.1全套后台页面模板 Hplus
07-17
【H+ v4.1 全套后台页面模板 Hplus】是一款专为后台界面设计的高效、美观的页面模板集合。这款模板以其丰富的功能、精美的设计和全面的组件库，成为了众多开发者和设计师的选择。它能够帮助用户快速构建出专业且具有...
javaweb前台+后台界面模板
05-13
这个压缩包"javaweb前台+后台界面模板"提供了丰富的设计资源，对于开发者来说是极其实用的。下面，我们将深入探讨JavaWeb开发中的前台与后台界面模板及其重要性。 首先，我们要了解JavaWeb前台界面模板。前台是用户...
21-bootstrap后台模板 html5后台页面模板 后台静态页面模板.zip
11-13
这款"21-bootstrap后台模板 html5后台页面模板 后台静态页面模板"是一个用于创建管理界面或后台系统的资源包，其主要特点包括： 1. **Bootstrap框架**：Bootstrap是最流行的前端开发框架之一，由Twitter开发并开源...
blogAdminView:个人博客后台页面
04-18
vue管理模板 English | 具有Element UI，axios，iconfont，权限控制和lint的最小vue管理员模板 现场演示： : 当前版本是在vue-cli上构建的v4.0+ 。 如果要使用旧版本，可以将分支切换到 ，它不依赖于vue-cli 构建设置 # clone the project git clone https://github.com/PanJiaChen/vue-admin-template.git # enter the project directory cd vue-admin-template # install dependency npm install # develop npm run dev 这将自动打开 建造 # build for test environment npm run build:stage # build for
精美的后台模板,CMS后台模板,博客后台模板,管理系统模板
06-10
精美的后台模板,CMS后台模板,博客后台模板,管理系统模板,后台管理系统，html的模板
博客后台管理（含界面）
10-13
KAJSH FKASHKFHKSLADHFLKASHDLF ASKFHKA
后台模板 管理后台 好看的后台样式
05-31
后台模板，管理后台，好看的样式，结合了很多样式，基本上项目中用到的页面都可以
精美后台管理页面模板
09-14
个人一直使用和收藏，真心不错，推荐使用！！
个人博客系统(前端展示+后端管理)
03-18
技术:Vue,Springboot,Hibernate,Redis,Mysql; 功能:主页展示+后台管理
博客项目（八）——博客页面后台
努力找工作呀
05-17 1703
一.页面介绍 在之前的项目一文章中，提到了功能划分。我们知道了用户有两种情况，管理员和一般用户。也知道了这两种用户可以完成什么功能。而博客页面就是要把这些功能经过后台处理显示在前台。 这个博客页面的规划参照了一些博客，例如CSDN的规划。我们将这个主页上需要的导航进行拆分，确保每个JSP完成不同的任务，可以在不同的页面进行引用。 1.1 公共页面framework.jsp 在这个页面中会显示站点基本信息，和引入侧边栏和博客页脚页面。 <%@ page language="java" con
用PS做后台首页
weixin_44588195的博客
05-18 1693
用PS做后台首页 一、 1、做后台首先我们要设计有原形图、确定要设计什么东西、以及他的设计风格、下面这张是做的基本原形图，我们可以看见这上面没有彩色的东西，而这是每个后台的基本要求。 （1）左边的LOGO以及导航栏都很简单，还有右边的内容页面也很简单。 （2）在下面这一张图，是根据上面的原形图做出来的一个首页，看起来不是特别的好，拉上标尺线看的话排的...
个人博客系统项目实战入门-----后台登录界面设计
m0_54620396的博客
06-26 1313
第一步：页面设计 新建博客文件夹：blog. 在blog文件里新建文件login.php 引用lay-ui的基本模块： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>后台登
后台网页的分析
weixin_44569346的博客
05-18 309
（作者：陈石军，撰写时间:2019年5月12日） 这是一个游戏后台类型的网站，这个网站是有来统计玩家的信息和管理。现在我们来分析一下怎样才能做出一个好的后台网站，首先我们需要布局，布局要简洁、整齐，在布局方面我们可以从统一的画板尺寸、适配方案、网格单位、栅格、常用模度五个方面出发。 第一统一画板：我的后台网站的画板是统一的，因为我的每一个后台页面都是1440x900尺寸。 第二适配：在设计过程中，...
vue 电商平台后台界面模板演示
最新发布
09-16
Vue电商平台后台界面模板是一套用于构建电商平台管理后台的界面模板，它基于Vue框架开发，具有丰富的功能和优雅的界面设计。 该模板提供了多个页面和组件，包括商品管理、订单管理、用户管理等模块。通过使用该模板，开发人员可以快速构建一个功能强大、易于使用的电商平台管理后台。 模板的界面设计符合现代化的风格，注重用户体验和界面美观，在功能布局和交互设计上具有很高的可扩展性。它采用响应式设计，可以适配不同屏幕尺寸的设备，使管理员可以随时随地进行管理操作。 除了基本的增删改查功能外，该模板还提供了一些高级功能，如数据统计和图表展示、权限管理等。这些功能可以帮助管理员更好地监控销售情况、用户行为以及其他重要指标，为决策提供依据。 该模板的代码结构清晰易懂，提供了丰富的文档和示例代码，开发人员可以根据自己的需求进行定制和扩展。同时，它还使用了一些流行的开源工具和第三方库，如Element UI、Echarts等，使开发过程更加高效和便捷。 总之，Vue电商平台后台界面模板演示是一个功能齐全、易于使用和易于定制的模板，可以帮助开发人员快速搭建一个现代化的电商平台管理后台。无论是新建项目还是对现有项目进行改造，都可以考虑使用该模板来提高开发效率和用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值