一套後臺管理html模版

時間 2020-09-20

標籤一套後臺管理 html 模版欄目 HTML 简体版

原文原文鏈接

最近本身須要一套後臺管理的模版，而後去網上查找，模版的確不少，可是適合個人並很少。我須要的模版是不會很大，我可以控制代碼，樣式不要太古樸，最好有點CSS3的效果。最後終於找到一張主頁，而後再根據這個主頁來編輯其餘的後臺部分。第一眼看到這個樣式，就很是滿意。如今只作了四張頁面，登陸、首頁、菜單管理和菜單添加頁面。css

瀏覽器兼容是儘可能作到IE8以上可使用，firefox、chrome瀏覽器等能徹底兼容。因爲IE8沒法解析CSS3，因此有些地方會額外的製做CSS。下面的代碼都不是完整的代碼，完整代碼能夠參考下載的demo。html

1、頁面大量使用了HTML5與CSS3

本身對於html5的理解一直很膚淺，缺乏想象力，此次經過這個模版頁面能夠更多的瞭解到這些標籤在什麼場合下比較適合用。不少地方也用到了選擇器，拓寬了本身的眼見。左邊欄的小圖標原先是用img展現的，如今都被我換成了icon字體了，直接經過icomoon網站在線獲取，使用icon字體將很容易控制樣式以及大小。html5

<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;
}

2、寬度使用%比，複用更方便

這套模版所有是用%設置寬度，此次我也感覺到了這種設置方式的便捷。模版只提供了首頁，登陸頁面是後面本身加的。這個部分就是本身在最外層定義了一個寬度，裏面的根據百分比顯示，徹底沒有走樣，也不用修改代碼。css3

<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">就完成了一個頁面佈局。web

3、通用美觀的提示

這個提示直接複製就能夠，代碼很簡潔，樣式看着就是很舒服。chrome

<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>

4、通用table樣式

後來展現列表信息，用table比較方便，寬度也是用%比展現，複製到各個頁面可以很和諧的融入進去。用icon來展現操做，也很清晰。瀏覽器

5、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;
  }

6、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));    
}