Overview of _1_ ideas in web design

Core IDEA: structure and style separating HTML from CSS

Only by fully separating the core content of the page from the design, the flexibility to build the best design that meets the needs of each Web user can be successfully achieved.

Core Requirements: Flexibility

Adapt to different browsers, adapt to a variety of devices and software.

Structure and style design schemes can easily adapt to different text sizes and content quantities, and can be scaled and scaled automatically as these changes are made.

And when the site modifies content, updating and maintaining the code will be easier and will not affect the design effect.

For example, when preparing an internationalized version of a page, the length of content expressed in different languages varies widely, and it is important to ensure that the page design effect is not affected.

Page refactoring: Code taking, modular layout

First, look at the page layout style, abstract summed up public style, such as gradient background, floating, unified writing class style, and then need to add the corresponding class name on the structure

With the same or similar layout style, the same part of the style is written first, and then the parent class namespace differs from the different styles to get the code to take, the modular layout,

ready to work : compatible with HTML5 new elements

IE8 and earlier do not recognize new elements that are completely introduced in HTML5, in order to solve this problem, you need to add the following JavaScript to the HTML header, which is a simple

Document.createelement statement, using conditional annotations for IE to invoke this JS file. Opera,firefox and other non-IE browsers will ignore this code,

There is no HTTP request.

Note: You need to refer to the page

<!-- [If Ie]><script src= "Http://html5shiv.googlecode.com/svn/trunk/html5.js" ></script><! [EndIf]  -

If you feel worried about the speed of the page open, you can write the JS file directly to the page

<!-- [If ie]><script> (function () {if (!/*@[email protected]*/0) Return;var e = "Abbr,article,aside,audio, Canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress, Section,time,video ". Split (', '), I=e.length;while (i--) {document.createelement (e[i])}) () </script><! [EndIf]  -

Reset style :

In order to be web design in all browsers to achieve unity, try to avoid different browser different settings caused by the impact.

It is recommended that you create a reset style sheet for Eric Meyer, which is not recommended to be completely copied and added according to your project needs.

Note: When using HTML5, it is important to set display:block for new elements to avoid bugs that do not support new elements.

/*http://meyerweb.com/eric/tools/css/reset/v2.0 | 20110126 license:none (public domain)*/html, body, Div, span, applet, object, IFRAME,H1, H2, H3, H4, H5, H6, p, blockquote, PRE,A, ABBR, acronym, address, BI  G, cite, Code,del, DFN, EM, img, INS, KBD, Q, S, Samp,small, Strike, strong, sub, SUP, TT, VAR,B, u, I, CENTER,DL, DT, DD,  OL, UL, Li,fieldset, form, label, Legend,table, Caption, Tbody, TFOOT, THEAD, tr, TH, td,article, aside, canvas, details, Embed, figure, figcaption, footer, Header, Hgroup, menu, nav, output, Ruby, section, Summary,time, mark, audio, video {margin:0;padding:0;Border:0;font-size:100%;Font:Inherit;vertical-align:Baseline;}/*HTML5 display-role reset for older browsers*/article, aside, details, figcaption, figure, Footer, Header, Hgroup, menu, nav, section{Display:Block;}Body{Line-height:1;}OL, UL{List-style:None;}blockquote, Q{Quotes:None;}Blockquote:before, Blockquote:after,q:before, Q:after{content:"';content:None;}Table{Border-collapse:collapse;border-spacing:0;}

Overview of _1_ ideas in web design