html模块化样例在线预览,HTML5模块化后台管理简约清爽的模板

模板描述：HTML5 模块化后台管理 简约 清爽的 模板。HTML5模块化后台管理简约清爽的模板，只使用于PC

代码结构

1. 引入CSS

2. 引入JS

3. HTML代码

模块化后台管理模板

数据概况

• 页面基础布局

  弹性盒子布局

  瀑布流布局

• 按钮UI

  基础按钮

• 表格UI

  基础表格

• 表单UI

  表单结构样式

• 弹出窗口

  基础弹出层

• 百度统计echarts图表

  echarts统计图表

• 文本编辑器

  百度UEDITOR编辑器

• 进度条

  progress进度条兼容

• Tab选项卡

  Tab选项卡

• 下拉菜单

  按钮式下拉菜单

• 页面分组标题

  页面标题

• 分页

  jquery分页效果

• 旋转动画

  刷新加载动画

• 面包屑导航

  面包屑

• 文本面板

  文本面板

• 块引用

  块引用

• 第三方弹窗组件

  web弹层组件

© DeathGhost 版权所有

• 前台访问

• 清除缓存

• 管理员:DeathGhost

• 系统消息

• 安全退出

模块化后台管理模板

简约风模快化后台管理模板，自由打造个性化后台管理系统,

HTML5+CSS3经典组合;

该模板由DeathGhost个人提供,仅供参考。

---

原始模板为php文件格式，css为less分类编辑，您所看到的生成后的html版本

当前页面左侧导航根据根据路径而定，这里可能未产生效果

引入样式建议link的方式引入页面，避免使用css导入样式，特此说明

本模板基于HTML5+CSS3的基础上进行设计制作，仅支持高版本浏览器，如果亲还在使用低版本浏览器，

暂时只能i'm sorryO(∩_∩)O咯~望亲见谅！

内容包含：页面基础排版(flex/column-count)布局、按钮系列组、表格系列、进度条、分页、表单、

文本编辑器、统计图表、TAB选项卡、CSS3基础动画及第三方弹层插件等常见页面使用元素。

浏览器兼容：google chrome、microsoft edge、360浏览器、火狐浏览器、uc浏览器等高版本浏览器。

上一周

下一周

搜索

今日订单数(单位：单)今日订单额(单位：元)今日销售量(单位：件)库存警告(单位：件)

839 ￥12000.00 932 8

批量编辑

批量删除

不可编辑

• 后台模板不存在页面seo优化问题，这里将head单独提出来，加载公共引入文件。

• 整体结构比较清晰，大家可根据项目对其调整； 该模板色值预定义6类，对应每个模块颜色。

  即：text-muted、

  text-primary、

  text-success、

  text-info、

  text-warning、

  text-danger需要重新定义或增删自行修改即可。

• 文本编辑器及数据统计图表均引用百度相关插件，可另行处理。

• 样式通过简单的less格式分类引入，需要二次编辑处理可以对其进行调整。

• javascript包含公共库及第三方插件以及页面js文件。

• images文件为模板所需图片文件；upload为测试图片，亲们可根据项目定义路径。

• 正式项目可以文件进行实际操作时直接归置到该模板的根目录下即可，而现在所看到的仅为demo演示而已，可对其删除。

//分页

$(".pagination").createPage({

pageCount:5,

current:1,

backFn:function(p){

console.log(p);

}

});

//demo1

var dom = document.getElementById("demo1");

var myChart = echarts.init(dom);

var app = {};

option = null;

function randomData() {

now = new Date(+now + oneDay);

value = value + Math.random() * 21 - 10;

return {

name: now.toString(),

value: [

[now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),

Math.round(value)

]

}

}

var data = [];

var now = +new Date(1997, 9, 3);

var oneDay = 24 * 3600 * 1000;

var value = Math.random() * 1000;

for (var i = 0; i < 1000; i++) {

data.push(randomData());

}

option = {

tooltip: {

trigger: 'axis',

formatter: function (params) {

params = params[0];

var date = new Date(params.name);

return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];

},

axisPointer: {

animation: false

}

},

xAxis: {

type: 'time',

splitLine: {

show: false

}

},

yAxis: {

type: 'value',

boundaryGap: [0, '100%'],

splitLine: {

show: false

}

},

series: [{

name: '模拟数据',

type: 'line',

showSymbol: false,

hoverAnimation: false,

data: data

}]

};

setInterval(function () {

for (var i = 0; i < 5; i++) {

data.shift();

data.push(randomData());

}

myChart.setOption({

series: [{

data: data

}]

});

}, 1000);;

if (option && typeof option === "object") {

myChart.setOption(option, true);

}

//demo2

var dom = document.getElementById("demo2");

var myChart = echarts.init(dom);

var app = {};

option = null;

option = {

tooltip: {

trigger: 'axis'

},

grid: {

left: '3%',

right: '4%',

bottom: '3%',

containLabel: true

},

xAxis: {

type: 'category',

boundaryGap: false,

data: ['周一','周二','周三','周四','周五','周六','周日']

},

yAxis: {

type: 'value'

},

series: [

{

name:'邮件营销',

type:'line',

stack: '总量',

data:[120, 132, 101, 134, 90, 230, 210]

},

{

name:'联盟广告',

type:'line',

stack: '总量',

data:[220, 182, 191, 234, 290, 330, 310]

},

{

name:'视频广告',

type:'line',

stack: '总量',

data:[150, 232, 201, 154, 190, 330, 410]

},

{

name:'直接访问',

type:'line',

stack: '总量',

data:[320, 332, 301, 334, 390, 330, 320]

},

{

name:'搜索引擎',

type:'line',

stack: '总量',

data:[820, 932, 901, 934, 1290, 1330, 1320]

}

]

};

;

if (option && typeof option === "object") {

myChart.setOption(option, true);

}

©Copyright 2016 DeathGhost.cn

author:deathghost

|

[email protected]

捐赠