A set of background management html template_html/css_WEB-ITnose

Recently, I needed a set of templates for backend management, and then I searched online. There are indeed many templates, but not many are suitable for me. The template I need is not too big, I can control the code, the style should not be too primitive, and it is best to have some CSS3 effect. Finally, I found a home page, and then edited other background parts based on this home page. When I first saw this style, I was very satisfied. Now only four pages have been created, login, homepage, menu management and menu addition pages.

Browser compatibility is to ensure that IE8 or above can be used, and firefox, chrome browsers, etc. are fully compatible . Since IE8 cannot parse CSS3, additional CSS will be produced in some places. The following codes are not complete codes. For complete codes, please refer to the downloaded demo.

1. The page uses a lot of HTML5 and CSS3

My understanding of html5 has always been superficial and lacks imagination. This time I passed this The template page allows you to learn more about the situations in which these tags are more suitable to be used. Selectors are also used in many places, which broadens my horizons. The small icons in the left column were originally displayed in img, but now I have changed them to icon fonts. They are available online directly through the icomoon website. Using icon fonts will make it easy to control the style and size.

<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. Use % ratio for width, making reuse more convenient

This set of templates All use % to set the width. This time I also felt the convenience of this setting method. The template only provides the homepage, and the login page is added later. This part is to define a width on the outermost layer, and the inside is displayed according to the percentage, without any aliasing, and there is no need to modify the code.

<div class="w500 mc ovh">        <section id="main" >            <article class="module width_full">                <header><h3>登录</h3></header>            </article>        </section>    </div>

Just add a

to complete a page layout.

3. General and beautiful tips

You can just copy this tip. The code is very concise and the style looks very comfortable.

<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. General table style

Later, use Table is more convenient, and the width is also displayed in % ratio. When copied to each page, it can be integrated harmoniously. Using icons to display operations is also very clear.

5. CSS3 button

I have always wanted to try using CSS3 to create button effects. This time I finally got the chance. I looked for it online. I made a set, made some minor modifications, and made browser compatibility.

The effect is indeed good, but the CSS code suddenly increased a lot, and in order to achieve similar effects for browsers such as IE8 that are not compatible with CSS3, I also wrote a little extra CSS, assisted by the JS plugin 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 Pagination

This was also added later by myself. It fits into this style quite well. I also added it in it. 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));    }

7. Unit test module

under the tests folder, I have added a unit test module to make my future JS script code more robust.

Through the above decomposition modules, you can basically meet the style needs of each part of the backend management, and you can also have a set of management templates that can be modified!

Demo download:

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

References ：

http://medialoot.com/preview/admin-template/index.html Web page background template
http://webdesign.tutsplus.com/tutorials/orman-clarks-chunky-3d- web-buttons-the-css3-version--webdesign-5731 Button production
http://icomoon.io/ Make your own icon

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn