Some website background template source code analysis

1 Gray Concise Enterprise background management template effect;

Look at the project structure;

It uses the Modernizr,

modernizr-feature detection class library developed specifically for HTML5 and CSS3
Modernizr is an open-source JS library that makes it easier for designers to develop different levels of experience based on different guest browsers, which are differences in support for new standards. It allows designers to exploit HTML5 and CSS3 features in browsers that support HTML5 and CSS3 without sacrificing control of other browsers that do not support these new technologies.
When you embed a MODERNIZR script in a Web page, it detects whether the current browser supports CSS3 features, such as @font-face, Border-radius, Border-image, Box-shadow, Rgba (), etc. It also detects whether HTML5 features are supported-such as audio, video, local storage, and new <input> tag types and attributes. On the basis of this information, you can use them on browsers that support these features to decide whether to create a JS-based fallback or simply gracefully downgrade those unsupported browsers. In addition, Modernizr can also enable IE to support the application of CSS styles to HTML5 elements, so that developers can immediately use these more semantically-rich tags.
Modernizr is developed on the basis of progressive enhancement theory, so it supports and encourages developers to create their own web sites on a layer-by-level. Everything starts with an idle foundation with JavaScript applied, one by one adding an enhanced application layer. Because Modernizr is used, it's easy to know what your browser supports.

Left menu Code:

<div class= "Sidebar-title" > 
The same as the general Web menu, are used by the UL Li Tag;
This uses the I tag,<i> label to render italic text.
On the I tag, here is the online statement, I am not very clear:
For some small graphs (like the one on the right of input), many websites use <i> tags to put a background, why write this?
Why not ? or <div> Background:url ()
/This is just a non-formal default rule in Web development, so all the small icons in your current site can be used <i> tags, provided that you have a style in your global CSS file: i{background:xxx.png}, This xxx.png is composed of many small icons on top of a large image. In this way, which page of your front-end to use which small icon, you directly use the <i> tag, only need to define CSS background-position. Of course you can also use <s/> <b/> to see which one you prefer, using only the <i> tags to semantically.
In addition, HTML character entities are used, as below,
<i class= "Icon-font" >& #xe008;</i>
& #xe008 cannot be pasted in a block of code;
HTML character entities see:
Http://www.w3school.com.cn/tags/html_ref_entities.html

The code for the table:
<table class= "Result-tab" width= "100%" > <tr> <th class= "t C "Width=" 5% "></th> <th> label id</th> <th> sign Signature                        Call </th> <th> Course name </th> <th> Action </th> </tr> <tr> <td class= "TC" ><input                            Name= "id[" "value=" "type=" checkbox "></td> <td>01</td> <!--tags id--> <th> Literature Art </th> <!--label name---<td><a target= "                            _blank "href=" Chinese Traditional Life wisdom. html > Chinese Traditional Life Wisdom </a> <!--course Name---</td>                                <td> <a class= "Link-update" href= "#" > Modify </a> <a CLAss= "Link-del" href= "#" > Delete </a> </td> </tr> <tr> <td class= "TC" ><input name= "id[" "value=" "Type=" checkbox " ;</td> <td>08</td> <!--tags id--> <td> technology </td> <!--label name---<td><a target= "_blank" href= "what is science exactly. html > What is Science &lt ;/a> </td> <td> <a class= "Link-update" href= "#" > Modify </a> <a class= "Link-del" href= "#" > Delete </a&gt                            ; </td> </tr> </table>

The first column uses a checkbox; the last column is two a links; the rest is a regular table;

Take a look at how the front green square button is made;
<input class= "btn btn-primary btn2" name= "sub" value= "Query" type= "Submit" >
Because the BTN class of CSS is defined;
. btn{display:inline-block;*display:inline;padding:4px 12px;margin-bottom:0;*margin-left:.3em;font-size:14px; Line-height:20px;color: #333333; text-align:center;text-shadow:0 1px 1px rgba (255,255,255,0.75); Vertical-align:middle;cursor:pointer;background-color: #f5f5f5; *background-color:# E6e6e6;background-image:-moz-linear-gradient (Top, #ffffff, #e6e6e6); Background-image:-webkit-gradient (linear,0 0,0 100%,from (#ffffff), to (#e6e6e6)); Background-image:-webkit-linear-gradient (top, #ffffff, #e6e6e6); Background-image:-o-linear-gradient (Top, #ffffff, #e6e6e6); Background-image:linear-gradient (to Bottom, #ffffff, # E6E6E6) background-repeat:repeat-x;border:1px solid #bbbbbb *border:0;border-color: #e6e6e6 #e6e6e6 #bfbfbf; Border-color:rgba (0,0,0,0.1) Rgba (0,0,0,0.1) Rgba (0,0,0,0.25); Border-bottom-color: #a2a2a2;-webkit-border-radius : 4px;-moz-border-radius:4px;border-radius:4px;filter:progid:dximagetransform.microsoft.gradient (startColorstr= ' #ffffffff ', endcolorstr= ' #ffe6e6e6 ', gradienttype=0); filter:progid:DXImageTransform.Microsoft.gradient (enabled=false); *zoom:1;-webkit-box-shadow:inset 0 1px 0 rgba (255,255,255,0.2), 0 1px 2px RGBA (0,0,0,0.05);-moz-box-shadow:inset 0 1px 0 rgba (255,255,255,0.2), 0 1px 2px rgba (0,0,0,0.05); Box-shadow:inset 0 1px 0 Rgba (255,255,255,0.2), 0 1px 2px rgba (0,0,0,0.05);}
The display mode is an inline block, so a block appears;
See what color #333333 is on this page,
http://www.sioe.cn/yingyong/yanse-rgb-16/

Not the green front;
Again see Background-color: #f5f5f5;

nor is it;
Not found; then use F12;





Look at the styles panel, find it, it turns out to be this;

This is more suitable for simple projects;

Two simple universal refreshing Mall admin Template
Login page;

Background effect;

Its login page has a particle animation background;
The reference JS is:
<script src= "Js/jquery.js" ></script>
<script src= "Js/verificationnumbers.js" ></script>
<script src= "Js/particleground.js" ></script>
The Particleground particle system is a jquery plugin. The particleground includes an optional parallax effect to control the mouse on the desktop device and the gyroscope on the mobile device. It works with any browser that supports the HTML5 canvas.
How to use
Page calls to jquery and Particleground.js

<script type= ' text/javascript ' src= ' js/jquery-1.11.1.min.js ' ></script>
<script type= ' text/javascript ' src= ' jquery.particleground.min.js ' ></script>

Html
<div id= "Particles" >
<div class= "Intro" >
<p>a JQuery plugin for snazzy background particle systems</p>
</div>
</div>


JS initialization plug-in, call the corresponding ID
$ (' #particles '). Particleground ();

Options
You can select an object's constructor by setting options.

The following is an example of setting the color of the particle system points and lines:
$ (' #your-element '). Particleground ({
Dotcolor: ' #ff0000 ',
LineColor: ' #ff0000 '
});

Verificationnumbers.js is the verification code of the login box, it is relatively simple, all the code only:
function Showcheck (a) {var c = document.getElementById ("MyCanvas"); var ctx = C.getcontext ("2d"); Ctx.clearrect (0,0,1000,1000); ctx.font = "80px ' Microsoft Yahei '"; Ctx.filltext (a,0,100); Ctx.fillstyle = "White";}    var code;          function Createcode () {code = "";    var codelength = 4; var Selectchar = new Array (1,2,3,4,5,6,7,8,9, ' A ', ' B ', ' C ', ' d ', ' e ', ' f ', ' g ', ' H ', ' J ', ' K ', ' l ', ' m ', ' n ', ' P ', ' Q ', ' R ', ' s ', ' T ', ' u ', ' V ', ' w ', ' x ', ' y ', ' z ', ' A ', ' B ', ' C ', ' D ', ' E ', ' F ', ' G ', ' H ', ' J ', ' K ', ' L ', ' M ', ' N ', ' P ', ' Q ', ' R ', ' S ', ' T ', ' u ', ' V ', ' W '          , ' X ', ' Y ', ' Z ');            for (Var i=0;i<codelength;i++) {var charIndex = Math.floor (Math.random () *60);    Code +=selectchar[charindex];          } if (code.length! = codelength) {createcode ();          } showcheck (code);}    function validate () {var inputcode = document.getElementById ("J_codetext"). Value.touppercase ();    var codetoup=code.touppercase (); if (Inputcode.length <=0) {document.getElementById ("J_codetext"). SEtattribute ("placeholder", "Input verification Code");      Createcode ();    return false;      } else if (inputcode! = Codetoup) {document.getElementById ("J_codetext"). value= "";      document.getElementById ("J_codetext"). SetAttribute ("placeholder", "CAPTCHA error");      Createcode ();    return false;      } else {window.open (document.getElementById ("J_down"). GetAttribute ("Data-link"));      document.getElementById ("J_codetext"). value= "";      Createcode ();    return true; }}

Three Blue property Backstage Management system template top menu bar;

Left menu;










Look at the implementation of its top menu;
      <ul class= "NAV" > <li id= "one0" onclick= "Settab (' one ', 6)" ><a href= "#" > <p> back Home </p> </a></li> <li id=" One1 "onclic          k= "Settab (' one ', 1)" ><a href= "#" > <p> service Management </p> </a></li> <li id= "One2" onclick= "Settab (' One ', 2)" ><a href= "#" > <p> financial Management </p> </a></li> <li id=" One3 "onclick=          "Settab (' One ', 3)" ><a href= "#" > <p> housekeeping Services </p> </a></li> <li id= "one4" onclick= "Settab (' One ', 4)" ><a href= "#" > <p> resource Management </p> </a></li> <li id=" One5 "onclick=" s Ettab (' One ', 5) "><a href= "#" > <p> system Management </p> &LT;/A&GT;&LT;/LI&GT      ; </ul>

. Nav li{float:left; margin-right:40px;}
The CSS class for the Li in NAV is defined as floating to the left, spacing 40; So the spacing is 40, in a row;

4 Information Management system Background Management interface template

This appears to have a lot of template pages available;

Information Management system Background Management interface template, orange style, div+css layout design, full set of templates including home page, login page, data list, picture data sheet, add edit, Picture list, custom, common function, tab page, 404 page, Flowchart, Project declaration, file list, System settings, such as 25 background Templates page.
5 Modern responsive site background template



This is similar to this; http://blog.csdn.net/bcbobo21cn/article/details/51251526
Tables is the effect of all forms demo,forms is the effect of all forms demo;
Modern responsive site background template, based on bootstrap 3.3.4 production, responsive design, compatible with PC and mobile mobile, full set of templates, including dashboards, grids, charts, titles, buttons, mailboxes, gadgets, forms, tables, landing pages and other 17 background template pages.

Download Http://pan.baidu.com/s/1o7OEMc6xinxi_admin,WYHTGL,DeathGhost,huiseqiyeguanli,Modern_admin

Some website background template source code analysis