一套后台管理html模版

简介:

最近自己需要一套后台管理的模版,然后去网上查找,模版的确很多,但是适合我的并不多。我需要的模版是不会很大,我能够控制代码,样式不要太古朴,最好有点CSS3的效果。最后终于找到一张主页,然后再根据这个主页来编辑其他的后台部分。第一眼看到这个样式,就非常满意。现在只做了四张页面,登录、首页、菜单管理和菜单添加页面。

浏览器兼容是尽量做到IE8以上可以使用,firefox、chrome浏览器等能完全兼容。由于IE8无法解析CSS3,所以有些地方会额外的制作CSS。下面的代码都不是完整的代码,完整代码可以参考下载的demo。

 

 

一、页面大量使用了HTML5与CSS3

自己对于html5的理解一直很肤浅,缺少想象力,这次通过这个模版页面可以更多的了解到这些标签在什么场合下比较适合用。很多地方也用到了选择器,拓宽了自己的眼见。左边栏的小图标原先是用img展示的,现在都被我换成了icon字体了,直接通过icomoon网站在线获取,使用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="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;
}

 

二、宽度使用%比,复用更方便

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

<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;
    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脚本代码更加的健壮。

 

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

 

demo下载:

http://download.csdn.net/download/loneleaf1/7711311

 

参考资料:

http://medialoot.com/preview/admin-template/index.html 网页后台模版
http://webdesign.tutsplus.com/tutorials/orman-clarks-chunky-3d-web-buttons-the-css3-version--webdesign-5731 按钮制作
http://icomoon.io/ 自己制作icon




    本文转自 咖啡机(K.F.J)   博客园博客,原文链接:http://www.cnblogs.com/strick/p/3884797.html,如需转载请自行联系原作者


相关文章
|
5月前
使用HTML编写注册页面
使用HTML编写注册页面
31 1
|
5月前
|
移动开发 前端开发 数据安全/隐私保护
8.使用html制作表单
8.使用html制作表单
36 0
|
5月前
html编写注册页面
html编写注册页面
48 0
|
5月前
|
存储 移动开发 安全
【专栏:HTML基础篇】HTML表单基础:创建用户交互界面
【4月更文挑战第30天】本文介绍了HTML表单的基础知识,包括表单的基本概念、输入元素(如文本框、密码框、单选/复选框、提交/重置按钮等)、表单属性(如action、method、target)以及表单验证。了解这些内容能帮助开发者创建功能齐全、交互性强的用户界面,提升网页开发技能。
92 0
|
5月前
100套HTML静态网页模板免费分享
100套HTML静态网页模板,设计的十分有特色,由于Github服务器原因可能下载速度较慢,已全部打包整理。
331 0
100套HTML静态网页模板免费分享
|
5月前
|
移动开发 前端开发 JavaScript
9.使用html制作登录界面
9.使用html制作登录界面
412 0
|
12月前
HTML网页设计基础——用户注册界面
HTML网页设计基础——用户注册界面
191 0
|
定位技术 数据安全/隐私保护
HTML网站首页代码详细知识点
HTML网站首页代码详细知识点
135 0
|
移动开发 前端开发 JavaScript
零基础html5网页开发教程第008期 导航栏开发案例
零基础html5网页开发教程第008期 导航栏开发案例
122 0
|
移动开发 前端开发 Java
【HTML5】登录页面制作简易版
本文讲解:登录页面制作简易版