之所以叫番外篇，是因为这章是不算在学习进度里面的，这一章理由前面学习的相关知识进行仿造Metro UI进行DIV+CSS的布局练习。本次练习的代码含有js运行效果，所以想要看到完美的效果，请尽量在IE以外的浏览器进行测试。因为是一次普通的练习，所以并没有刻意针对IE做兼容。用IE运行，不影响css效果，但js效果运行会非常的……怎么说啦….反正坑爹就是了。
先看看要达到的效果：
额….虽然说是Metro风格有那么一点点牵强，不过细节什么的就不用在意啦….我们来分析一下，像这样的界面要怎么做。首先，我们一眼就可以发现，页面上的DIV数量如果不经过大脑去数的话，为16个…不过因为拼图区域是居中在显示，所以在拼图区域外面肯定还有一个父级div，然后上面的Start文字的处理方式有两种，要么是拼图区域的父级div，要么就是另外一个div。而这里我是把文字这块另外算的一个div来处理的，所以页面上总的div数目就有18个！那么，我们先根据嵌套关系，写好相应的HTML代码：
html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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我们先来处理这几个效果，代码如下：
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 <div class="w160"></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代码也就呼之欲出了：
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#
