JustYeh的前端博客

Home Projects Tools Github
后台管理系统页面模板

2017-07-10

html

这个模板是我总结多个后台管理项目整合出来的，并已有多个线上项目。现在当我碰到这样的需求时，都是基于这个模板进行二次开发，节省了不少精力。所以将这套方法总结出来，同大家分享。

github：https://github.com/justyeh/BSF

在线demo

特性

  • html+css组织，不对js产生影响。
  • 当侧边栏内容较高时，自动滑动。
  • 支持公共文件include。
  • 面向对象、好用的css样式。

页面结构

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />ame="renderer" content="webkit">
<meta name="keywords" contect="keywords">
    <meta name="Description" contect="Description">
     <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">
<title>xx backend</title>
<!--[if lte IE 9]>
            <script src="js/browser-not-supported-ie10.js"></script>
        <![endif]-->
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>

<div class="page">

<include src="header.html"></include>
<include src="silder.html"></include>

<!--main wrap-->
<div class="main">
<div>页面主体内容</div>
</div><!--main wrap end-->

</div>

<div class="dialog">
<div class="wrap">
<p>弹出框内容</p>
</div>
</div>

<script src="js/include.js"></script>

</body>
</html>

BSF采用的是内滚动布局，关于内滚动布局，腾讯isux有一篇专门的文章，我将它转载了过来：内滚动布局的概念与实现方法

CSS的组织

BSF定义了一些常用的样式，命名参考了bootstrap。当然，这里面有些样式你有可能使用不上，直接删除就好了。

reset

@charset "utf-8";
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,legend,input,textarea,p,blockquote,th,td,a,img,span{margin:0;padding:0;}
body{font-size:14px;font-family: "Arial","Microsoft YaHei","微软雅黑",sans-serif;background: #fff;color: #454545;}
address,caption,cite,code,dfn,em,th,var,i{font-style:normal;font-weight:normal;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
input,textarea,select{font-family:inherit;font-size:inherit;*font-size: 100%;font-weight:inherit;outline:none;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img,abbr,acronym{border:0;}
a{text-decoration: none;}
a:focus,a:active,button::-moz-focus-inner,input[type="reset"]::-moz-focus-inner,input[type="button"]::-moz-focus-inner,input[type="submit"]::-moz-focus-inner,select::-moz-focus-inner,input[type="file"] > input[type="button"]::-moz-focus-inner{outline: none;}
input[type='button'],input[type='submit']{border:0;}
ol,ul ,li{list-style-type:none;list-style: none;}
caption,th{text-align:left;}
img{vertical-align:middle;border:0;}
p{line-height: 1;}
button,a{cursor: pointer;outline: none;}
img{display: inline-block;vertical-align: middle;}
*::after, *::before{box-sizing: border-box;}
*{box-sizing: border-box;}
html,body{height: 100%;}
body{overflow: hidden;background: #fff;line-height: 1;min-width: 800px;position: relative;}

工具样式

.clearfix:before,.clearfix:after{content:"";display:table; } 
.clearfix:after{clear:both;} 
.clearfix{*zoom:1;/*IE/7/6*/}
.fl{float:left;}
.fr{float:right;}

定位

.clearfix:before,.clearfix:after{content:""; display:table;}
.clearfix:after{clear:both;}
.clearfix{*zoom:1;/*IE/7/6*/}
.relative{position: relative;}
.absolute{position: absolute;}
.fl{float:left;}
.fr{float:right;}

文字

.bold{font-weight: bold;}
.fs36{font-size: 36px !important;}
.fs30{font-size: 30px !important;}
.fs24{font-size: 24px !important;}
.fs18{font-size: 18px !important;}
.fs16{font-size: 16px !important;}
.text-c{text-align: center;}
.text-r{text-align: right;}
.text-l{text-align: left !important;}
.text-ellipsis{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}

颜色

.c-green{color: #2fa820 !important;}
.c-blue{color: #1fbad6 !important;}
.c-red{color: #f32f00 !important;}

动画

.transition3{transition: all 0.3s ease;-moz-transition: all 0.3s ease;-webkit-transition: all 0.3s ease;}
.transition5{transition: all 0.5s ease;-moz-transition: all 0.5s ease;-webkit-transition: all 0.5s ease;}
.transition8{transition: all 0.8s ease;-moz-transition: all 0.8s ease;-webkit-transition: all 0.8s ease;}

分页

.pager{padding: 40px 0;}
.pager a, .pager span{background-color: #fff; border: 1px solid #e4e9ee; color: #758796; float: left; font-family: arial; font-size: 14px; line-height: 1.42857; margin-left: 3px; padding: 3px 9px; position: relative; text-decoration: none;}
.pager .current{background: #1fbad6 !important; border-color: #1fbad6 !important; color: #fff !important;}
.pager a:hover{background: #fff none repeat scroll 0 0; border-color: #1fbad6; color: #1fbad6;}
.pager .current.prev, .pager .current.next{background: #fff none repeat scroll 0 0 !important; border-color: #ddd !important; color: #ccc !important; cursor: not-allowed;}

表格

.table{padding: 20px 0;}
.table table{border-collapse: collapse;border-spacing:0;width: 100%;}
.table table th,.table td{text-align: center;vertical-align: middle;}
.table-grid th,.table-grid td{padding: 20px 10px;border: solid 1px #ccc;}
.table-grid th{color: #18b7ee;font-size: 18px}
.table-grid td{color: #666;font-size: 16px}
.table-zebra tr{border-bottom: solid 1px #ebebeb;}
.table-zebra th{padding: 18px 10px;font-size: 18px;color: #161616;}
.table-zebra td{padding: 13px 10px;font-size: 20px;color: #504f4f;}
.table-default th{font-size: 20px;color: #484848;padding: 50px 10px;}
.table-default td{font-size: 18px;color: #5f5f5f;padding: 10px;}

按钮

.btn{display: inline-block;width: 95px;text-align: center;font-size: 18px;height: 40px;border-style: solid;border-width: 1px;border-radius: 8px;position: relative;}
a.btn{line-height: 38px;}
.btn-default{color: #504f4f;border-color: #d0d0d0;}
.btn-primary{color: #18b7ee;border-color: #18b7ee;}
.btn-danger{color: #da030d;border-color: #da030d;}

弹窗

.dialog{position: fixed;top: 0;left: 0;bottom: 0;right: 0;background: rgba(0,0,0,0.53);overflow-y: auto;padding: 100px 0;/*display: none;*/}
.dialog .wrap{background: #fff;margin: 0 auto;width: 800px;padding: 20px;}

页面样式

/*page*/
.page{position: relative;width: 100%;height: 100%;}

/*header*/
.header{position: absolute;top: 0;height: 80px;left: 0;right: 0;background: #04acf7;}
.header p{height: 80px;line-height: 80px;font-size: 30px;color: #fff;padding-left: 20px;}
.header a{display: inline-block;padding: 0 50px;font-size: 18px;color: #fff;height: 80px;line-height: 80px;}

/*silder*/
.silder{position: absolute;top: 80px;left: 0;bottom: 0;width: 240px;background: #fff;box-shadow: 0 5px 10px rgba(0,0,0,0.2);overflow: hidden;}
.silder .link-menu{position: absolute;top: 0;bottom: 0;left: 30px;overflow-y: auto;width: 210px;height: auto;}
.silder dl{margin-right: 50px;}
.silder dt{font-size: 20px;color: #c2c2c2;border-left: solid #c2c2c2 5px;margin: 40px 0 20px 0;padding-left: 15px;}
.silder dd{padding: 5px 0 5px 20px;}
.silder a{font-size: 16px;color: #c2c2c2;}
.silder .act dt{border-left-color: #18b7ee;color: #18b7ee;}
.silder .act a{color: #18b7ee;}

/*main*/
.main{position: absolute;top: 80px;left: 240px;bottom: 0;right: 0;overflow-x: hidden;overflow-y: auto;}
.main>div:last-child{margin-bottom: 50px;}

/*媒体查询*/
@media only screen and (max-width: 1280px){
.silder{width: 180px;}
.silder .link-menu{left: 10px;}
.main{left: 180px;}
}

JavaScript

BSF有两个个JS文件：

<!--[if lte IE 9]>
    <script src="js/browser-not-supported-ie10.js"></script>
<![endif]-->

这个文件的目是当浏览器不支持时改进行如何处理，BSF的做法是直接跳转并提示用户升级浏览器。

<script src="js/include.js"></script>

在很多项目中，header和silder文件是公用的，includejs是一个前端模板文件加载器，用于引入公用的文件，请注意：includejs要在服务器环境运行。

除此之外，BSF没有关于js的内容，所以需要引入什么脚本（jquery or other）文件由你自己决定。