之所以叫番外篇，是因为这章是不算在学习进度里面的，这一章理由前面学习的相关知识进行仿造Metro UI进行DIV+CSS的布局练习。本次练习的代码含有js运行效果，所以想要看到完美的效果，请尽量在IE以外的浏览器进行测试。因为是一次普通的练习，所以并没有刻意针对IE做兼容。用IE运行，不影响css效果，但js效果运行会非常的……怎么说啦….反正坑爹就是了。
先看看要达到的效果：
额….虽然说是Metro风格有那么一点点牵强，不过细节什么的就不用在意啦….我们来分析一下，像这样的界面要怎么做。首先，我们一眼就可以发现，页面上的DIV数量如果不经过大脑去数的话，为16个…不过因为拼图区域是居中在显示，所以在拼图区域外面肯定还有一个父级div，然后上面的Start文字的处理方式有两种，要么是拼图区域的父级div，要么就是另外一个div。而这里我是把文字这块另外算的一个div来处理的，所以页面上总的div数目就有18个！那么，我们先根据嵌套关系，写好相应的HTML代码：
![]()
html
xmlns="
http://
www.
w3.
org/
1999/
xhtml">
<
head>
<
meta http-equiv="
Content-Type"
content="
text/
html;
charset=
utf-8" />
<
title>
仿metro风格UI</
title>
</
head>
<
body>
<
div id=”start”>
Start</
div>
<
div id=”content”>
<
div></
div>
<
div></
div>
<
div></
div>
<
div></
div>
<
div></
div>
<
div></
div>
<
div></
div>
<
div></
div>
<
div></
div>
<
div></
div>
<
div></
div>
<
div></
div>
<
div></
div>
<
div></
div>
<
div></
div>
<
div></
div>
</
div>
</
body>
</
html>
好了，直到这里我们已经把眼睛感受到的结构转化成代码方式了。现在就应该是编写css代码让其能达到我们最后看到的效果。从现在开始，我们开始使用“外部样式表”的方式来进行css代码的引用，以达到内容和表现分离的原则（参见：http://www.52css.com/article.asp?id=657）。外部样式表的引用方式为:
“<link rel="stylesheet" type="text/css" href="../css/css.css"/>”
href中的内容是css文件的相对地址，或者绝对地址。看看效果图….首先最显眼的是这些东西，背景紫色，然后拼图区域居中，Start文字与拼图区域左边基本在一条线上。那么ok我们先来处理这几个效果，代码如下：
![]()
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属性：
![]()
div>
<
div class="
w160"></
div>
<
div class="
w160"></
div>
<
div class="
w170"></
div>
<
div class="
w75"></
div>
<
div class="
w75"></
div>
<
div class="
w160"></
div>
<
div class="
w160"></
div>
<
div class="
w170"></
div>
<
div class="
w160"></
div>
<
div class="
w75"></
div>
<
div class="
w75"></
div>
<
div class="
w160"></
div>
<
div class="
w170"></
div>
<
div class="
w330"></
div>
<
div class="
w340"></
div>
因为他们的高度都一样，所以我们以宽度来分类，如上，宽度分为160px，170px，75px，330px，340px，五个宽度。然后加上class属性后我们就可以考虑要怎么样写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#
