微软Windows 8 Metro 配送方案 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>微软Windows 8 Metro 配送方案</title>
 6 <style>
 7 * { margin: 0; padding: 0; border: 0; }
 8 /*清除浮动*/
 9 .clearfix:after { content: "."; display: block; height: 0; visibility: hidden; clear: both; }
10 .clearfix { *zoom:1; }
11 /*内容*/
12 ul { list-style: none outside none; border: 0; margin: 0 auto; width: 960px; background: #FCC; }
13 li { width: 234px; height: 370px; float: left; margin: 8px 8px 0 0; }
14 li.last { margin-right: 0; }
15 .metro1 { background: #FF0097 }
16 .metro2 { background: #6E155E }
17 .metro3 { background: #4EB3B9 }
18 .metro4 { background: #96B232 }
19 .metro5 { background: #994C11 }
20 .metro6 { background: #E671B8 }
21 .metro7 { background: #DE9317 }
22 .metro8 { background: #1BA1E2 }
23 .metro9 { background: #E51400 }
24 .metro10 { background: #339933 }
25 .metro11 { background: #034888 }
26 .metro12 { background: #5859B9 }
27 .metro13 { background: #D54D34 }
28 .metro14 { background: #260930 }
29 .metro15 { background: #DEDFDE }
30 .metro16 { background: #000000 }
31 </style>
32 </head>
33 
34 <body>
35 <h1>微软Windows 8 Metro 配送方案</h1>
36 <ul class="clearfix">
37     <li class="metro1"></li>
38     <li class="metro2"></li>
39     <li class="metro3"></li>
40     <li class="metro4 last"></li>
41     <li class="metro5"></li>
42     <li class="metro6"></li>
43     <li class="metro7"></li>
44     <li class="metro8 last"></li>
45     <li class="metro9"></li>
46     <li class="metro10"></li>
47     <li class="metro11"></li>
48     <li class="metro12 last"></li>
49     <li class="metro13"></li>
50     <li class="metro14"></li>
51     <li class="metro15"></li>
52     <li class="metro16 last"></li>
53 </ul>
54 </body>
55 </html>

posted @ 2012-09-20 17:07  海阔天空XM  阅读(222)  评论(0)    收藏  举报