在网站开发的时候对于底部或者某些局部很多人希望或者喜欢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; }
东
西
南
北
春
夏
秋
冬
肠断月明红豆蔻,月似当时,人似当时否?——纳兰性德《鬓云松令》