win8页面 html Win8 Metro风格界面设计HTML+CSS网页模板

在网站开发的时候对于底部或者某些局部很多人希望或者喜欢Win8 Metro风格界面.本人也一直很喜欢。截止目前我的的底部都是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; }

东

西

南

北

春

夏

秋

冬

肠断月明红豆蔻，月似当时，人似当时否？——纳兰性德《鬓云松令》