单页后台模版

最新推荐文章于 2021-03-10 10:24:37 发布
最新推荐文章于 2021-03-10 10:24:37 发布
阅读量184 收藏
点赞数
文章标签： javascript ViewUI 
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>后台</title>
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>



<ul id="myTab" class="nav nav-tabs">
    
    <li class="active"><a href="#home" data-toggle="tab">首页</a></li>
    
    <li class="dropdown">
      <a href="#" id="myTabDrop1" class="dropdown-toggle" 
         data-toggle="dropdown">
         内容管理 
         <b class="caret"></b>
      </a>
      <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
         <li><a href="#column" tabindex="-1" data-toggle="tab">栏目管理</a></li>
         <li><a href="#article" tabindex="-1" data-toggle="tab">文章管理</a></li>
      </ul>
    </li>
    
    <li><a href="#user" data-toggle="tab">用户管理</a></li>
    
</ul>



<div id="myTabContent" class="tab-content">
   
   <div class="tab-pane fade in active" id="home">

   
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts单文件引入 -->
    <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts图表
        var myChart = echarts.init(document.getElementById('main')); 
        
        var option = {
            tooltip: {
                show: true
            },
            legend: {
                data:['销量']
            },
            xAxis : [
                {
                    type : 'category',
                    data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    "name":"销量",
                    "type":"bar",
                    "data":[5, 20, 40, 10, 10, 20]
                }
            ]
        };

        // 为echarts对象加载数据 
        myChart.setOption(option); 
    </script>

    
   </div>
  


<!-----------------栏目管理------------------------------->  
    <div class="tab-pane fade" id="column">     
        <div class="row">
        <br>
        
        <div class="col-xs-3" id="myScrollspy">
            <ul class="well" data-spy="affix" data-offset-top="125">
                <li><a href="#column-1">添加栏目</a></li>
                <li><a href="#column-2">删除栏目</a></li>
            </ul>
        </div>
        
        <div class="col-xs-9">
            <h2 id="column-1">添加栏目</h2>
            <div style="width:800px;height:auto;margin-left: auto;margin-right: auto;margin-top:10px;margin-bottom:50px;background-color:#B0E0E6;padding:30px;">
            <div style="width:600px;height:auto;margin-left: auto;margin-right: auto;margin-top:50px;margin-bottom:50px;background-color:#F5F5DC;padding:30px;font-size:15px;font-family:Microsoft YaHei">
            <form>
            <input type="text" class="form-control" placeholder="请输入栏目名称"><br>
            <input type="submit" value="提交添加" class="btn btn-primary">
            </form>
            </div>
            </div>
            
            <h2 id="column-2">删除栏目</h2>            
            <div style="width:800px;height:auto;margin-left: auto;margin-right: auto;margin-top:10px;margin-bottom:50px;background-color:#B0E0E6;padding:30px;">
            <div style="width:600px;height:auto;margin-left: auto;margin-right: auto;margin-top:50px;margin-bottom:50px;background-color:#F5F5DC;padding:30px;font-size:15px;font-family:Microsoft YaHei">
            <form>
            <input type="text" class="form-control" placeholder="请输入栏目名称"><br>
            <input type="submit" value="提交添加" class="btn btn-primary">
            </form>
            </div>
            </div>
        </div>
        
        </div>
    </div>
    

   
   
   
   
<!-----------------------文章管理--------------------------->   
    <div class="tab-pane fade" id="article">
        <div class="row">
        <br>
        
        <div class="col-xs-3" id="myScrollspy">
            <ul class="well" data-spy="affix" data-offset-top="125">
                <li><a href="#article-1">添加文章</a></li>
                <li><a href="#article-2">删除文章</a></li>
            </ul>
        </div>
        
        <div class="col-xs-9">
            <h2 id="article-1">添加文章</h2>
            <div style="width:800px;height:auto;margin-left: auto;margin-right: auto;margin-top:10px;margin-bottom:50px;background-color:#B0E0E6;padding:30px;">
            <div style="width:600px;height:auto;margin-left: auto;margin-right: auto;margin-top:50px;margin-bottom:50px;background-color:#F5F5DC;padding:30px;font-size:15px;font-family:Microsoft YaHei">
            <form>
            <input type="text" class="form-control" placeholder="请输入文章名称"><br>
            <input type="submit" value="提交添加" class="btn btn-primary">
            </form>
            </div>
            </div>    
            
            <h2 id="article-2">删除文章</h2>        
            <div style="width:800px;height:auto;margin-left: auto;margin-right: auto;margin-top:10px;margin-bottom:50px;background-color:#B0E0E6;padding:30px;">
            <div style="width:600px;height:auto;margin-left: auto;margin-right: auto;margin-top:50px;margin-bottom:50px;background-color:#F5F5DC;padding:30px;font-size:15px;font-family:Microsoft YaHei">
            <form>
            <input type="text" class="form-control" placeholder="请输入栏目名称"><br>
            <input type="submit" value="提交添加" class="btn btn-primary">
            </form>
            </div>
            </div>
        </div>
        
        </div>
    </div>
    

   
   

<!------------------------用户管理----------------------------------->   
    <div class="tab-pane fade" id="user">
        <div class="row">
        <br>
        
        <div class="col-xs-3" id="myScrollspy">
            <ul class="well" data-spy="affix" data-offset-top="125">
                <li><a href="#user-1">添加用户</a></li>
                <li><a href="#user-2">删除用户</a></li>
            </ul>
        </div>
        
        <div class="col-xs-9">
            <h2 id="user-1">添加用户</h2>
            <div style="width:800px;height:auto;margin-left: auto;margin-right: auto;margin-top:10px;margin-bottom:50px;background-color:#B0E0E6;padding:30px;">
            <div style="width:600px;height:auto;margin-left: auto;margin-right: auto;margin-top:50px;margin-bottom:50px;background-color:#F5F5DC;padding:30px;font-size:15px;font-family:Microsoft YaHei">
            <form>
            <input type="text" class="form-control" placeholder="请输入用户名称"><br>
            <input type="submit" value="提交添加" class="btn btn-primary">
            </form>
            </div>
            </div>
            
            <h2 id="user-2">删除用户</h2>    
            <div style="width:800px;height:auto;margin-left: auto;margin-right: auto;margin-top:10px;margin-bottom:50px;background-color:#B0E0E6;padding:30px;">
            <div style="width:600px;height:auto;margin-left: auto;margin-right: auto;margin-top:50px;margin-bottom:50px;background-color:#F5F5DC;padding:30px;font-size:15px;font-family:Microsoft YaHei">
            <form>
            <input type="text" class="form-control" placeholder="请输入栏目名称"><br>
            <input type="submit" value="提交添加" class="btn btn-primary">
            </form>
            </div>
            </div>
        </div>
        
        </div>
    </div>
    



</div>
</body>
</html>

 

简单后台单页面管理模板
04-19
简单的后台页面模板，要求不高的可以看看，谢谢，哈哈哈
单页面后台管理html模板
04-19
单页面后台管理html模板，可以随便看看参考下，需要的可以下载看看
单页面后台管理模板
12-26
包含登录页面，后台主页，是一个单页面后台管理模板，比较好看，可以使用
单页面搭建后台模板
qq_39110534的博客
11-10 512
router =&gt; index.js import Vue from 'vue' import Router from 'vue-router' import TOP from '@/components/top.vue' Vue.use(Router) export default new Router({ routes: [ { ...
H5响应式扁平化后台管理系统模板源码\炫酷H5后台管理模板单页版
02-22
"炫酷H5后台管理模板单页版"很可能包含了主HTML文件（如index.html）、CSS样式表（如style.css）、JavaScript脚本（如script.js）以及可能的图片和图标文件。 7. **应用场景**: 这样的后台管理系统模板适用于各种...
后台单页layout网站模板
03-20
后台单页layout网站模板是一款简单的后台网站管理模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
网站后台登录单页模板
03-31
网站后台登录单页模板是网页设计中不可或缺的一部分，主要用于管理员或特定用户访问网站后台系统时的身份验证界面。这种模板设计通常简洁、高效，注重用户体验，同时也要保证安全性。以下是关于这个主题的一些详细...
炫酷H5、html后台管理模板单页版
04-11
为HTML、CSS、JS 构成。 内含单页版后台管理模板和iframe后台管理模板 基于Bootstrap实现的完全响应式后台管理模板页面 同时支持web和移动端，界面扁平化大气炫酷 可以直接点击打开使用
php单页面产品网带后台
01-10
php单页面产品网带后台 已过测试 可用
后台模板，最全的标签，包括列表，单页，按钮，弹窗等等
03-14
后台模板，最全的标签，包括列表，单页，按钮，弹窗等等后台模板，最全的标签，包括列表，单页，按钮，弹窗等等
5套大气漂亮的单页宣传源码合集带后台和数据库
12-21
5套产品单页宣传源码合集-减肥瘦身系列-漂亮大气绝对得物超所值下载回来可以自己改.带有access数据库和后台和提交订单.含订单和后台管理系统.你可以自由发挥修改.
非常漂亮的单页静态模板
01-06
非常漂亮的单页静态模板，给需要的朋友。~
几个后台管理页面模板（html）
08-31
几个后台管理页面模板（html）几个后台管理页面模板（html）几个后台管理页面模板（html）几个后台管理页面模板（html）几个后台管理页面模板（html）几个后台管理页面模板（html）
单页订单管理系统免费版.rar
12-21
单页订单管理系统免费版.rar
分享一套兼容IE8的后台单页模板，简洁漂亮质量很高
weixin_43356560的博客
10-08 3978
基于 layui。 遵循原生 HTML/CSS/JS 的书写与组织形式，上手容易，拿来即用。 最低兼容到IE8浏览器。 适配移动端。 GITHUB 地址
php单页面带后台,请问单页面不用ifarme去做网站后台可行吗？
weixin_29763721的博客
03-10 1719
后台 iframe 具体的意思就是有一套后台模版，不想改成嵌套iframe的，但是这样存在的问题就是，功能的地址会一直变，每个操作都要刷新整个页面用什么方式可以让用户体验更好？回复讨论(解决方案)ajax可以满足你。ajax可以满足你。怎么写呀，没写过。。。。$.post('url',{data},function(msg){//处理数据});打开jquery手册。搜索下post。返回页面的是...
构建单页应用的免编译后台管理模板(简)
weixin_42886931的博客
09-02 1921
构建单页应用的免编译后台管理模板 （Bootstrap4+vue+vue-router） 单页应用(single page web application，SPA)的实践越来越多，尤其是vue-router的流行，如虎添翼，SAP的设计、开发更简单。本文只探讨vue全家桶的研发方案。Vue-cli配合npm+webpack是官网推荐的，下文统一使用vue-cli统称该研发方案。 Vue-cli...
单页应用的原理
奇葩也是花
05-07 346
<a href="#index">Index</a> <a href="#list">List</a> <h1 id="main"></h1> }; /** * 单页应用原理: * 只有 # 后面的 fragment 发生改变时，页面不会重新请求，其他参数发生变化，都会引起页面的重新请求。 * window.onh...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值