之所以叫番外篇，是因為這章是不算在學習進度里面的，這一章理由前面學習的相關知識進行仿造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#
