ss布局看起來簡單，但是要做到多瀏覽器安全色實在不容易，這裡推薦960 grid system架構，不過官方版太大了而且檔案過多，青竹部落格再次進行最佳化並且進行了檔案合并。主要來說主要是第一部分重設html標籤，其次是引入架構， 最後是相容性代碼，使用過程中css架構代碼部分不要動哦，儲存成任何檔案即可，使用過程用link匯入即可。grid.css代碼：
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:190px}
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:430px}
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; }
使用方法：採用html5
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset='utf-8'>
5 <title>css架構示範</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行布局</div>
16 <div class='clear'></div>
17 <div class='grid_18' id='mianleft'>左布局</div>
18 <div class='grid_6 last' id='mainright'>右布局 last右漂移</div>
19 <div class='clear'></div>
20 </div>
21 </body>
22 </html>
說明：此處使用都是類布局，container是全部布局類，這裡gird_n，n是用來布局，1行就是24，兩行就是兩個數字組合如18+6、 10+14，每次完成後都使用層 clear清除類，使用就是這麼簡單，主要都是布局，具體原理到960 grid system官方查看。
(來源 青竹部落格原創)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
