在網站開發的時候對于底部或者某些局部很多人希望或者喜歡Win8 Metro風格界面.本人也一直很喜歡。截止目前我的dodobook.net的底部都是Metro風格,難不準以后會變，先記錄一下這部分代碼。歡迎各位分享。圖文請各位自行替換調整。

上代碼了，各位直接復制即可運行

Win8 Metro風格界面設計HTML+CSS網頁模板

#footZone{width:1000px;margin:10px auto;}

#footZone h3{color:#fff;font-size:40px;font-weight:bold;text-align:center;}

#zone1,#zone2,#zone3,#zone5,#zone6,#zone8{width:260px;height:120px;float:left;margin:5px;padding:5px;}

#zone4,#zone7{width:110px;height:120px;float:left;margin:5px;padding:5px;}

#zone1{ background-color:#007BBE; }

#zone2{ background-color:#DDA600; }

#zone3{ background-color:#00B7ED; }

#zone4{ background-color:#1CA62F; }

#zone5{ background-color:#EF8103; }

#zone6{ background-color:#006CE2; }

#zone7{ background-color:#7633A7; }

#zone8{ background-color:#FE0600; }

東

西

南

北

春

夏

秋

冬

腸斷月明紅豆蔻，月似當時，人似當時否？——納蘭性德《鬢云松令》

總結

以上是生活随笔為你收集整理的win8页面 html,Win8 Metro风格界面设计HTML+CSS网页模板的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。