最近自己需要一套後臺管理的模版，然後去網上查詢，模版的確很多，但是適合我的並不多。我需要的模版是不會很大，我能夠控制程式碼，樣式不要太古樸，最好有點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 {