A set of background management html templates and background management html templates

A set of background management html templates and background management html templates

Recently, I needed a set of backend Management Templates and went online to search for them. There are indeed many templates, but not many of them are suitable for me. The template I need is not very large. I can control the code, and the style should not be too simple. It is better to have the CSS3 effect. Finally, find a home page and edit other background parts based on the home page. At first glance, we were very satisfied with this style. Now onlyFour pages: logon, home page, menu management, and menu addition page.

Browser compatibility is the best way to use IE8 or above, and firefox and chrome are fully compatible.. Because IE8 cannot parse CSS3, CSS is made in some places. The following code is not complete. For the complete code, refer to the downloaded demo.

 

 

I. HTML5 and CSS3 are widely used on pages

I have always had a superficial understanding of html5 and lack of imagination. I can use this template page to learn more about the scenarios where these labels are suitable for use. Selector is also used in many places to broaden your eyes. The small icons in the left sidebar were originally presented using img, and now I have changed them to the icon font, which is directly obtained online through the icomoon website. Using the icon font can easily control the style and size.

.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;}
 
Ii. Use % ratio of width to make reuse easier
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 logon page is added later. This part defines a width in the outermost layer, which is displayed based on the percentage. There is no sample and no code need to be modified.

<Div class = "w500 mc ovh"> <section id = "main"> <article class = "module width_full"> 
Simply add <div class = "w500 mc ovh"> to complete a page layout.
 
3. General and beautiful tips
This prompt can be copied directly. The code is concise and the style looks very comfortable.



 
Iv. General table Styles
The list information will be displayed later. It is more convenient to use a table, and the width will also be displayed in % ratio. Copying to each page can be very harmonious. It is clear to use icons to display operations.

 
5. CSS3 buttons
I 've been trying to use CSS3 to create button effects. This time I finally got a chance. I found a set on the Internet, made some minor modifications myself, and made browser compatibility.

The results are indeed good, But CSS code has suddenly increased a lot. In order to make IE8 browsers that are not compatible with CSS3 achieve the same effect, I also wrote some additional CSS, assist with the JS plug-in 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 Paging
This is also added later. It is quite integrated into this style, and some CSS3 elements are added in it.

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. 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 several decomposition modules, you can basically meet the style requirements for managing various parts in the background, and you can also have a set of management templates that can be modified!
 
Download demo:
Http://download.csdn.net/download/loneleaf1/7711311
 
References:
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 Creation
Http://icomoon.io/self-made icon
 

A set of html website templates, preferably enterprise websites, and the background style preferably win8. You only need html static pages if you do not need to implement the work.
I don't quite understand what you mean. Now I want to find the source code of pure html. Besides, it's inconvenient. I guess you can't change it. If you can change it, write your own code. Currently, there are a lot of functions available on the Internet for some off-the-shelf enterprise site programs, and the optimization is also good. Although it is generally declared that it is not used for commercial purposes, it seems that there is nothing to use, and I will use it, okay.
If you are interested, contact me for more information.
 
How can I apply an html template to aspnet mvc 20?
Frameset is a framework. It can be understood as a page consisting of several parts, each of which is a page.
The master can be understood as integrating the frameset into a single page. Your problem is that you need to change the frameset to the master page first, and then choose to use the master page in other frame pages.