漂亮精简版的HTML后台管理页⾯
最近⾃⼰需要⼀套后台管理的模版，然后去⽹上查，模版的确很多，但是适合我的并不多。我需要的模版是不会很⼤，我能够控制代码，样式不要太古朴，最好有点CSS3的效果。最后终于到⼀张主页，然后再根据这个主页来编辑其他的后台部分。第⼀眼看到这个样式，就⾮常满意。现在只做了四张页⾯，登录、⾸页、菜单管理和菜单添加页⾯。
浏览器兼容是尽量做到IE8以上可以使⽤，firefox、chrome浏览器等能完全兼容。由于IE8⽆法解析CSS3，所以有些地⽅会额外的制作CSS。下⾯的代码都不是完整的代码，完整代码可以参考下载的demo。
⼀、页⾯⼤量使⽤了HTML5与CSS3
⾃⼰对于html5的理解⼀直很肤浅，缺少想象⼒，这次通过这个模版页⾯可以更多的了解到这些标签在什么场合下⽐较适合⽤。很多地⽅也⽤到了选择器，拓宽了⾃⼰的眼见。左边栏的⼩图标原先是⽤img展⽰的，现在都被我换成了icon字体了，直接通过⽹站在线获取，使⽤icon字体将很容易控制样式以及⼤⼩。
<header id="header">
<hgroup>
<h1 class="site_title"><a href="index.html">Website Admin</a></h1>
<h2 class="section_title">Dashboard</h2><div class="btn_view_site"><a href="wwwblogs/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;
}
⼆、宽度使⽤%⽐，复⽤更⽅便
这套模版全部是⽤%设置宽度，这次我也感受到了这种设置⽅式的便捷。模版只提供了⾸页，登录页⾯是后⾯⾃⼰加的。这个部分就是⾃⼰在最外层定义了⼀个宽度，⾥⾯的根据百分⽐显⽰，完全没有⾛样，也不⽤修改代码。
<div class="w500 mc ovh">
<section id="main">
<article class="module width_full">
<header><h3>登录</h3></header>
</article>
</section>
</div>
只是简单的加了个<div class="w500 mc ovh">就完成了⼀个页⾯布局。
三、通⽤美观的提⽰
这个提⽰直接复制就可以，代码很简洁，样式看着就是很舒服。
<h4 class="alert_info">Welcome to the free MediaLoot admin panel template, this could be an informative message.</h4>
<h4 class="alert_warning">A Warning Alert</h4>
<h4 class="alert_error">An Error Message</h4>
<h4 class="alert_success">A Success Message</h4>
四、通⽤table样式
后来展⽰列表信息，⽤table⽐较⽅便，宽度也是⽤%⽐展⽰，复制到各个页⾯能够很和谐的融⼊进去。⽤icon来展⽰操作，也很清晰。
五、CSS3按钮
⼀直就想试试⽤CSS3来制作按钮特效了，这次终于有机会啦，在⽹上了⼀套，⾃⼰做了些细微修改，并做了浏览器的兼容。
效果的确不错，但是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;
好看的css代码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的元素
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:-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脚本代码更加的健壮。
通过上⾯的⼏个分解模块，基本上可以满⾜后台管理各个部分的样式需求，⾃⼰也可以有⼀套能修改的管理模版啦！
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论