Css framework 960 grid system latest optimized version User Guide

The SS Layout looks simple, but it is not easy to ensure compatibility with multiple browsers. The 960 grid system framework is recommended here, but the official version is too large and there are too many files, qingzhu blog was optimized again and the files were merged. It is mainly about resetting HTML tags, introducing frameworks, and compatibility.CodeDo not change the css framework code. Save the code as any file. Use link to import the code. Grid.css code:

 1   /*  Reset CSS  */  
  2  A, abbr, acronym, address, applet, article, aside, audio, B, big, BLOCKQUOTE, body, canvas, caption, center, cite, code, DD, Del, details, dfn, dialog, Div, DL, DT, em, embed, fieldset, figcaption, figure, Font, footer, form, H1, H2, H3, H4, H5, H6, header, hgroup, HR, HTML, I, IFRAME, IMG, INS, KBD, label, legend, Li, Mark, menu, meter, NAV, object, ol, output, P, pre, progress, Q, RP, RT, Ruby, S, SAMP, section, small, span, strike, strong, sub, summary, sup, table, tbody, TD, tfoot, Th, thead, time, TR, TT, U, UL, VAR, video, XMP { Margin : 0 ; Padding : 0 ; Border : 0 ;} 
 3   Body { Font-size : 63% ; Font-family : Verdana, sans-serif } 
  4   Article, aside, details, figcaption, figure, dialog, footer, header, hgroup, menu, NAV, Section { Display : Block ;} 
  5  IMG { Color : Transparent ; Vertical-align : Middle ; -MS-interpolation-Mode : Bicubic ;} 
  6   OL, UL { List-style : None ;} 
  7  Li { Display : List-item ;} 
  8   Table { Border-collapse : Collapse ; Border-spacing : 0 ;} 
  9   Th, TD, caption { Font-weight :Normal ; Vertical-align : Top ; Text-align : Left ;} 
  10   HR { Border : 0 # CCC solid ; Border-top-Width : 1px ; Clear : Both ; Height : 0 ;} 
  11   H1 { Font-size : 2.5em ;} 
  12   H2 { Font-size : 2.3em ;} 
  13   H3 {Font-size : 2.1em ;} 
  14   H4 { Font-size : 1.9em ;} 
  15   H5 { Font-size : 1.7em ;} 
  16   H6 {Font-size : 1.5em ;} 
  17   /*  Grid  */  
  18   . Container { Width : 950px ; Margin : 0 auto } 
 19   . Showgrid { Background : Url(24.gif) ;} 
  20   . Column, Div. grid_1, Div. grid_2, Div. grid_3, Div. grid_4, Div. grid_5, Div. grid_6, Div. grid_7, Div. grid_8, Div. grid_9, Div. grid_10, Div. grid_11, Div. grid_12, Div. grid_13, Div. grid_14, Div. grid_15, Div. grid_16, Div. grid_17, Div. grid_18, Div. grid_19, Div. grid_20, Div. grid_21, Div. grid_22, Div. grid_23, Div. grid_24 { Float : Left ; Margin-Right :10px } 
  21   . Grid_1 { Width : 30px } 
  22   . Grid_2 { Width : 70px } 
  23   . Grid_3 { Width :110px } 
  24   . Grid_4 { Width : 150px } 
  25   . Grid_5 { Width : Pixel PX } 
  26   . Grid_6 { Width :230px } 
  27   . Grid_7 { Width : 270px } 
  28   . Grid_8 { Width : 310px } 
  29   . Grid_9 { Width :350px } 
  30   . Grid_10 { Width : 390px } 
  31   . Grid_11 { Width : Pixel PX } 
  32   . Grid_12 { Width :470px } 
  33   . Grid_13 { Width : 510px } 
  34   . Grid_14 { Width : 550px } 
  35   . Grid_15 { Width :590px } 
  36   . Grid_16 { Width : 630px } 
  37   . Grid_17 { Width : 670px } 
  38   . Grid_18 { Width :710px } 
  39   . Grid_19 { Width : 750px } 
  40   . Grid_20 { Width : 790px } 
  41   . Grid_21 { Width :830px } 
  42   . Grid_22 { Width : 870px } 
  43   . Grid_23 { Width : 910px } 
  44   . Grid_24 { Width :950px ; Margin : 0 } 
  45   . Last { Margin-Right : 0 } 
  46   . Clear { 
  47   Clear : Both ;
  48   Display : Block ; 
  49   Overflow : Hidden ; 
  50   Visibility : Hidden ; 
  51   Width :0 ; 
  52   Height : 0 ; 
  53 } 
  54   . Border { Border : 1px solid # c0c0c0 ;} 
  55   . Border-1 {Border-top : 1px solid # c0c0c0 ;} 
  56   . Border-2 { Border-Right : 1px solid # c0c0c0 ;} 
  57   . Border-3 { Border-bottom : 1px solid # c0c0c0 ;} 
  58  . Border-4 { Border-left : 1px solid # c0c0c0 ;} 
  59   /*  For IE  */  
  60  * HTML. column, * HTML Div. grid_1, * HTML Div. grid_2, * HTML Div. grid_3, * HTML Div. grid_4, * HTML Div. grid_5, * HTML Div. grid_6, * HTML Div. grid_7, * HTML Div. grid_8, * HTML Div. grid_9, * HTML Div. grid_10, * HTML Div. grid_11, * HTML Div. grid_12, * HTML Div. grid_13, * HTML Div. grid_14, * HTML Div. grid_15, * HTML Div. grid_16, * HTML Div. grid_17, * HTML Div. grid_18, * HTML Div. grid_19, * HTML Div. grid_20, * HTML Div. grid_21, * HTML Div. grid_22, * HTML Div. grid_23, * HTML Div. grid_24 { Overflow-x : Hidden ;}
Usage: HTML5

 1   <! Doctype HTML>
  2   <HTML>
 3   <Head>
  4   <Meta charset = 'utf-8'>
  5   <Title> css framework demonstration </title>
  6   <LINK rel = 'stylesheet 'href}'grid.css '>
  7   <Style>
  8   # Main { Font-size : 1.2em ;Line-height : 1.8em } 
  9   # Mainleft { Margin : 5px 0 0 0 } 
  10   # Mianright { Margin : 5px 0 0 10px } 
  11   <Style>
 12   </Head>
  13   <Body>
  14   <Div class = 'Container' id = 'main'>
  15   <Div class = 'grid _ 24' id = 'top'> 1 row layout </div>
  16   <Div class = 'clear'> </div>
  17   <Div class = 'grid _ 18 'Id = 'nonleft'> left layout </div>
  18  <Div class = 'grid _ 6 last' id = 'mainright'> right layout last right drift </div>
  19   <Div class = 'clear'> </div>
  20   </Div>
  21   </Body>
  22   </Html> 

Note: Class layout is used here, and container is all layout classes. Here gird_n and n are used for layout, and one row is 24, the two rows are composed of two numbers, for example, 18 + 6, 10 + 14. After each operation, the layer clear class is used, for details, go to the 960 grid system official website.

(Source: Qingzhu blog original)