前端学习笔记番外篇：仿WIN8 Metro UI DIV+CSS练习

zxg58

　　之所以叫番外篇，是因为这章是不算在学习进度里面的，这一章理由前面学习的相关知识进行仿造Metro UI进行DIV+CSS的布局练习。本次练习的代码含有js运行效果，所以想要看到完美的效果，请尽量在IE以外的浏览器进行测试。因为是一次普通的练习，所以并没有刻意针对IE做兼容。用IE运行，不影响css效果，但js效果运行会非常的……怎么说啦….反正坑爹就是了。
　　
　　先看看要达到的效果：
　　

　　
　　额….虽然说是Metro风格有那么一点点牵强，不过细节什么的就不用在意啦….我们来分析一下，像这样的界面要怎么做。首先，我们一眼就可以发现，页面上的DIV数量如果不经过大脑去数的话，为16个…不过因为拼图区域是居中在显示，所以在拼图区域外面肯定还有一个父级div，然后上面的Start文字的处理方式有两种，要么是拼图区域的父级div，要么就是另外一个div。而这里我是把文字这块另外算的一个div来处理的，所以页面上总的div数目就有18个！那么，我们先根据嵌套关系，写好相应的HTML代码：
　　



html



仿metro风格UI


Start




















　　
　　好了，直到这里我们已经把眼睛感受到的结构转化成代码方式了。现在就应该是编写css代码让其能达到我们最后看到的效果。从现在开始，我们开始使用“外部样式表”的方式来进行css代码的引用，以达到内容和表现分离的原则（参见：http://www.52css.com/article.asp?id=657）。外部样式表的引用方式为:
　　“”
　　href中的内容是css文件的相对地址，或者绝对地址。看看效果图….首先最显眼的是这些东西，背景紫色，然后拼图区域居中，Start文字与拼图区域左边基本在一条线上。那么ok我们先来处理这几个效果，代码如下：
　　



csshtml,body{
min-width:700px;
min-height:450px;
background-color:#320442;
}
#start{
width:690px;
margin-top:50px;
font-size:46px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
color:#E2CDEB;
margin:80px auto 0px auto;
}
#content{
display:table;
width:700px;
height:450px;
margin:50px auto 50px auto;
background-color:#000;//便于效果的展示，可以先加个黑色的背景色
}
　　
运行效果如下：
　　

　　
　　恩？…..左下角的日文？那是我的豆瓣音乐歌词= =||….不过细节不用在意，至少效果是我们想要的。
　　
　　好了，现在我们可以对content（拼图区域，后面统称content）里面的div进行css的编写了。我们先通过效果图来分析一下，content中的布局是类似拼图的布局，而且每个div的大小不一样，但是在排版方面是有迹可循的。我们先根据效果图把其中div的大小分成四个大小，最下面一行为的两个为两个个大小，然后前三排的最后后面一行为一个大小，第二排的前两个和第三排三四个为一个大小，然后其他的div为一个大小，通过这样的分类后，我们可以为这16个div加上相应的class属性：
　　



html   















　　
　　因为他们的高度都一样，所以我们以宽度来分类，如上，宽度分为160px，170px，75px，330px，340px，五个宽度。然后加上class属性后我们就可以考虑要怎么样写css才能排成效果图中的效果。其实，都不用怎么考虑就能想到，要达到这种效果，我们肯定是用浮动来进行布局。所以css代码也就呼之欲出了：
　　



css
#content div{
height:100px;
margin:5px;
float:left;
}
.w160{
width:160px;
background-color:#4BAEB4;
}
.w170{
width:170px;
background-color:#F5AF3D;
}
.w75{
width:75px;
background-color:#96B335;
}
.w330{
width:330px;
background-color:#791869;
}
.w340{
width:340px;
background-color:#DE543A;
}
　　
　　现在我们再看看效果:
　　

　　
　　基本上好像就是这个样子,不过其中好像有几个的颜色不是一样的,没事,像这样的我们可以对其进行单独的编写就好,这里就不演示了。这里提供实例代码，代码中的js部分并不在这里并不进行讲述。
　　
　　代码下载地址：http://115.com/file/an8wu2ka#