注：該效果可以在safari, chrome,firefox和opera在看到效果，ie上由於對html5的支援不完全，所以看不出效果。
第一步：建立基本html和正方形
首先新增基本的html結構以及構建基本的正方形，**如下：
每個note都加乙個href連線，主要是為了支援鍵盤訪問，css**如下：
*
body
h2,p
ul,li
ul
ul li a
ul li
第二步：陰影和手寫草體字
這一步，是我們要實現正方形的陰影效果，並且將字型改為草體(僅限英文)，由於google提供了font api的支援，所以我們可以直接使用了，首先新增對google api的呼叫：
ul li h2
ul li p
製作陰影
ul li a
第三步：傾斜正方形
為了讓正方形傾斜，我們需要在li->a裡新增如下**：
ul li a但是為了能讓正方形隨機傾斜，而不是全部都傾斜，我們需要使用新的css3選擇器，讓正方形在每2個傾斜4個deg，每3個傾斜負3個deg,每5個傾斜5個deg：
ul li:nth-child(even) a
ul li:nth-child(3n) a
ul li:nth-child(5n) a
第四步：hover和focus時放縮正方形
想在hover和focus的時候達到縮放的效果，我們需要新增如下**：
ul li a:hover,ul li a:focus設定z-index為5是為了讓正方形在放大的時候蓋住其它的正方形，同時因為也設定了focus，所以也支援tab鍵切換訪問。
第五步：平滑過渡和新增顏色
第四步的特效，看起來有些生硬，我們可以新增transition來達到平滑動畫的效果，另外顏色比較單一，我們可以設定一下不同的顏色，首先在ul->li->a裡新增transition：
-moz-transition:-moz-transform .15s linear;
-o-transition:-o-transform .15s linear;
-webkit-transition:-webkit-transform .15s linear;
/*然後在even和3n裡定義不同的顏色：*/
ul li:nth-child(even) a
ul li:nth-child(3n) a
html5 css3學習（五）之浮動
通過display樣式可以修改元素的型別 可選值lnline 將乙個元素作為內聯元素顯示 block 將乙個元素設為塊元素顯示 inline block 將乙個元素轉換為行內塊元素，使元素既有行內元素特點又有塊元素特點，使其既能設定寬高，又不會獨佔一行 none 不顯示元素，並且元素不會在頁面中占有...
12 為何使用Html5 CSS3
一 大多瀏覽器支援，低版本也沒問題 我看點這方面的資料，是為了做手機應用 有三個方案，這個是備用方案 可以開發響應式 可以脫離開發平台進行跨平台。在html5網頁中引入modernizr，就能讓ie支援html5新元素。html5樣板檔案快速開發 html5boilerplate.com 二 布局 ...
使用Html5 CSS3的優勢
一 大多瀏覽器支援，低版本也沒問題 我看點這方面的資料，是為了做手機應用 有三個方案，這個是備用方案 可以開發響應式 可以脫離開發平台進行跨平台。在html5網頁中引入modernizr，就能讓ie支援html5新元素。html5樣板檔案快速開發 html5boilerplate.com 二 布局 ...