A set of background management HTML templates

Recently I need a set of background management template, and then go online to find, template is really a lot, but not many for me. I need the template is not very big, I can control the code, style not too quaint, preferably a little CSS3 effect. Finally find a home page and then edit the rest of the background section based on this homepage. The first sight of this style is very satisfying. Now only four pages have been made , login, homepage, menu Management and menu add page.

browser compatibility is as far as possible IE8 above can be used, Firefox, Chrome browser, etc. can be fully compatible . Because IE8 cannot parse CSS3, there are places where you can make extra CSS. The following code is not the complete code, the complete code can refer to the download demo.

First, the page is heavily used HTML5 and CSS3

Their understanding of the HTML5 has been very superficial, lack of imagination, this time through the template page can learn more about these tags in what circumstances more suitable for use. Many places also use the selector, broaden their own seeing. The small icon on the left column was originally shown in IMG, and now I have changed to the icon font, which is available online directly through the Icomoon website, and the icon font will easily control the style and size.

<HeaderID= "header">        <Hgroup>            <H1class= "Site_title"><ahref= "Index.html">Website Admin</a></H1>            <H2class= "Section_title">Dashboard</H2><Divclass= "Btn_view_site"><ahref= "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;}

Second, width using% ratio, more convenient reuse

This set of templates are all used in% to set the width, this time I also feel the ease of setting this way. Template only provides the homepage, the login page is added later. This is the part where you define a width in the outermost layer, which is displayed as a percentage, completely free of aliasing, and without modifying the code.

<Divclass= "W500 MC OVH">        < SectionID= "Main" >            <articleclass= "Module Width_full">                <Header><H3>Login</H3></Header>            </article>        </ Section>    </Div>

It simply adds a <div class= "W500 mc OVH"> completes a page layout.

Third, general aesthetic hints

This prompt copy directly, the code is very concise, the style is very comfortable to look at.

<h4class= "Alert_info">Welcome to the Free Medialoot Admin panel template, this could is an informative message.</h4><h4class= "Alert_warning">A Warning Alert</h4><h4class= "Alert_error">An Error Message</h4><h4class= "Alert_success">A Success Message</h4>

Iv. Universal Table Style

Later display list information, with table more convenient, width is also used in% than display, copied to the various pages can be very harmonious integration into. Using icon to show the operation is also very clear.

Five, CSS3 button

Always want to try CSS3 to make button effects, this time finally have a chance, in the Internet to find a set, made some minor changes, and do a browser compatibility.

The effect is really good, but the code of the CSS suddenly increased a lot, and in order to make IE8 these incompatible CSS3 browser can achieve almost the effect, but also added a bit of CSS, through the JS plugin Modernizr Auxiliary.

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

Six, CSS3 pagination

This is also the back of their own add up, quite into this style, in the inside also added some CSS3 elements

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

VII. Modules for unit testing

Under the tests folder, I have added the module of unit test, can make my future JS script code more robust.

Through the above several decomposition modules, basically can meet the background management of the various parts of the style requirements, you can also have a modified management template!

Demo Download:

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

Resources:

http://medialoot.com/preview/admin-template/index.html Web Background template
http://webdesign.tutsplus.com/tutorials/orman-clarks-chunky-3d-web-buttons-the-css3-version--webdesign-5731 Button making
http://icomoon.io/to make his own icon