前端页面后台管理模板

今天分享下”前端页面后台管理模板“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。近期自身需要一套管理后台的模版，随后去网络上搜索，模版确实许多，可是合适我的并不是很多。我需要的模版是不可能非常大，我可以操纵代码，款式不必太古色古香，最好是有点儿CSS3的实际效果。最终总算寻找一张首页，随后再依据这一首页来编写别的的后台管理一部分。第一眼见到这一款式，就特别令人满意。如今只干了四张网页页面，登陆、主页、菜单栏管理方法和菜单栏加上网页页面。

电脑浏览器兼容是尽可能保证IE8之上能够应用，firefox、chrome浏览器等能彻底兼容。因为IE8没法分析CSS3，因此很多地区会超额的制做CSS。下边的代码都没有完全的代码，详细代码能够参照下载的demo。

前端页面后台管理模板—代码实例_html

一、页面大量使用了HTML5与CSS3
自己对于html5的理解一直很肤浅，缺少想象力，这次通过这个模版页面可以更多的了解到这些标签在什么场合下比较适合用。很多地方也用到了选择器，拓宽了自己的眼见。左边栏的小图标原先是用img展示的，现在都被我换成了icon字体了，直接通过icomoon网站在线获取，使用icon字体将很容易控制样式以及大小。

<header ><hgroup><h1 ><a href="index.html">Website Admin</a></h1><h2 >Dashboard</h2><div ><a href="http://www.cnblogs.com/strick/">View Site</a></div></hgroup></header>

.quick_search input[type=text] {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
border: 1px solid #bbb;
height: 26px;
width: 90%;
color: #ccc;
-webkit-box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
-moz-box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
text-indent: 30px;
background: #fff url(../images/icn_search.png) no-repeat;
background-position: 10px 6px;
}

二、宽度使用%比，复用更方便
这套模版全部是用%设置宽度，这次我也感受到了这种设置方式的便捷。模版只提供了首页，登录页面是后面自己加的。这个部分就是自己在最外层定义了一个宽度，里面的根据百分比显示，完全没有走样，也不用修改代码。

前端页面后台管理模板—代码实例_html_02

<div ><section  ><article ><header><h3>登录</h3></header></article></section></div>

只是简单的加了个<div >就完成了一个页面布局。

三、通用美观的提示
这个提示直接复制就可以，代码很简洁，样式看着就是很舒服。

前端页面后台管理模板—代码实例_html_03

前端页面后台管理模板—代码实例_html_04

<h4 >Welcome to the free MediaLoot admin panel template, this could be an informative message.</h4>
<h4 >A Warning Alert</h4>
<h4 >An Error Message</h4>
<h4 >A Success Message</h4>

四、通用table样式
后来展示列表信息，用table比较方便，宽度也是用%比展示，复制到各个页面能够很和谐的融入进去。用icon来展示操作，也很清晰。

前端页面后台管理模板—代码实例_html_05

五、CSS3按钮
一直就想试试用CSS3来制作按钮特效了，这次终于有机会啦，在网上找了一套，自己做了些细微修改，并做了浏览器的兼容。

前端页面后台管理模板—代码实例_html_06

效果的确不错，但是CSS的代码一下子就增加了好多，而且为了能让IE8这些不兼容CSS3的浏览器能达到差不多的效果，还额外写了点CSS，通过JS插件modernizr辅助。

a.button {
display:inline-block;
position: relative;
height: 25px;
width: 80px;
margin: 0 10px 18px 0;

text-decoration: none;
font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight: bold;
line-height: 25px;
text-align: center;-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;

}

a.button:before,
a.button:after {
content: ‘’;
position: absolute;
left: -1px;
height: 25px;
width: 80px;
bottom: -1px;

-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;

}

a.button:before {
height: 23px;
bottom: -4px;
border-top: 0;

-webkit-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;-webkit-box-shadow: 0 1px 1px 0px #bfbfbf;
-moz-box-shadow: 0 1px 1px 0px #bfbfbf;
box-shadow: 0 1px 1px 0px #bfbfbf;

}

/* MODERNIZR FALLBACK */
.no-cssgradients a.button, .no-cssgradients a.button:visited,
.no-borderradius a.button, .no-borderradius a.button:visited,
.no-generatedcontent a.button, .no-generatedcontent a.button:visited {
background: url(…/images/img_btn.png) no-repeat 0 0px;
height: 32px;
width: 82px;
}

六、CSS3分页
这个也是后面自己添加上去的，挺融入这个风格中的，在里面也加了些CSS3的元素

前端页面后台管理模板—代码实例_html_07

ul.paginationA01 li a
{
color:#474747;
border:solid 1px #B6B6B6;
padding:6px 9px 6px 9px;
background:#E6E6E6;
background:-moz-linear-gradient(top,#FFFFFF 1px,#F3F3F3 1px,#E6E6E6);
background:-moz-linear-gradient(http://www.qlyl1688.com/product_index.html)
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#FFFFFF),color-stop(0.02,#F3F3F3),color-stop(1,#E6E6E6));
}

ul.paginationA01 li a:hover,
ul.paginationA01 li a.current
{
background:#FFFFFF;
}
ul.paginationA01 li a:active{
background:#D9D9D9;
background:-moz-linear-gradient(top,#FFFFFF 1px,#EAEAEA 1px,#b6b6b6);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#FFFFFF),color-stop(0.02,#EAEAEA),color-stop(1,#b6b6b6));
}

七、单元测试的模块
在tests文件夹下面，我已经添加好单元测试的模块，能够让自己以后的JS脚本代码更加的健壮。

前端页面后台管理模板—代码实例_html_08

通过上面的几个分解模块，基本上可以满足后台管理各个部分的样式需求，自己也可以有一套能修改的管理模版啦！

今天的文章就分享到这啦，内容转自divcss5平台，下篇文章再见！

前端页面后台管理模板—代码实例相关推荐

X-admin经典前端后台管理模板，基于layui的轻量级前端后台管理框架，简单，兼容性好，面向所有层次的前后端程序
X-admin 简介 X-admin基于layui的轻量级前端后台管理框架,简单免费,兼容性好,面向所有层次的前后端程序.创立于2017年初,为了敏捷WEB应用开发和简化企业应用开发而诞生的.#X-a ...
使用前端后台管理模板库admin-lte
使用前端后台管理模板库admin-lte 使用前端后台管理模板库admin-lte 安装搭建环境安装安装admin-lte,可以通过以下几种办法安装,下图是GitHub中admin-lte的主页 ...
vue3+ts+vite后台管理模板
vue3+ts+vite后台管理模板支持前后端控制权限,使用uniapp+vue3+ts+elementplus+vite开发,码云地址:https://gitee.com/yongqiang062 ...
再来 20 个免费的 Bootstrap 的后台管理模板
http://www.oschina.net/news/52033/free-bootstrap-admin-templates 6月14日上海 OSC 源创会开始报名,送机械键盘和开源无码内裤之前 ...
inspinia admin 最新版 inspinia 2.7.1 一套非常优秀的bootstrap后台管理模板
演示地址: http://www.inspinia.net 介绍 inspinia admin 最新版 bootstrap 完全响应式后台管理模板,采用扁平化设计.使用Bootstrap 3+ Fr ...
bootstrap 提交表单给后台_基于Bootstrap的响应式后台管理模板Ace
Ace是一个轻量级.功能丰富,基于Bootstrap3的响应式后台管理模板.支持多种皮肤,集成了多种插件,如Bootstrap,jQuery UI等.支持IE 8/9/10/11.Chrome.Fir ...
bootstrap4 后台管理模板_开源的后台管理模板
后台管理模板 vue-Element-Admin vue-element-admin 是一个后台前端解决方案,它基于 vue 和 element-ui 实现. 它使用了最新的前端技术栈,内置了 i18 ...
Minima黑色响应式后台管理模板
Minima黑色响应式后台管理模板基于Bootstrap3.3.4制作,黑色风格,兼容PC端和手机移动端,全套模板,包括登录.仪表盘.按钮.窗口部件.网格布局.图表等后台模板页面. 模板截图代码截图 ...
Metronic – 超赞！基于 Bootstrap 的响应式后台管理模板
Metronic 是一套精美的响应式后台管理模板,基于强大的 Twitter Bootstrap 框架实现.Metronic 拥有简洁优雅的 Metro UI 风格界面,6 种颜色可选,76 个模板页 ...

前端页面后台管理模板—代码实例

前端页面后台管理模板—代码实例相关推荐

最新文章

热门文章