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>
相关文章：