延續昨天的版面，
已將所有的大框架建立好了，
這裡先來提自己的排版流程習慣：

1.我習慣先把大框架設定用好後，再來微調各元素間的距離。

2.在排網頁時，我會先將PSD裡面的文字都貼到記事本以後，
將html打完後再一次貼到對應位置去。

3.我在寫前端的時候，都是雙螢幕模式，
一邊螢幕是瀏覽器，另一邊則是sublime編輯器，
雙螢幕+Livereload可以加速提升前端設計師的效率。

1.00:00秒
一邊看jpg圖檔一邊將Layout建立起來，
用emmet的好處從這裡就可看得出來，
由於要建立左邊兩個資訊列表的資料，
所以我就打：
section.list*2>(a[href="#" class="img"]>img)+h3+p
就可以建立出下面的HTML架構出來，
有興趣的朋友也可以瀏覽emmet的官方網站：http://docs.emmet.io/

<section class="list">
 <a href="#" class="img"><img src="" alt=""></a>
 <h3></h3>
 <p></p>
</section>
<section class="list">
 <a href="#" class="img"><img src="" alt=""></a>
 <h3></h3>
 <p></p>
</section>

2.03:00秒
當輸入完HTML以後就開始寫Sass嘍，
這邊有一個觀念可以和大家分享一下，
請不要設計一個CSS就想要看一下畫面或按F5更新之類的。
像以我的習慣來說，
通常我都會直接看完稿的jpg，
透過想像的方式來寫Sass與CSS，
你不用抓得非常精準也沒關係，
但有些像是背景顏色、margin、padding等等，
你覺得這些東西是在該元素上一定會用得到的，
就可以先依序先打上去，最後再來做微調，
簡單的說就是做到一個段落再去瀏覽網頁，
讓自己培養想像力，對寫前端的效率也會提升。
像有的時候我狀態好的時候，
就會感覺腦海裡就逐步地在勾勒，
手上的動作就自動把CODE打出來。

我想我會做前端這麼多年，
多少也是有一次進入那個狀態，
從此以後就對CSS有了很瘋狂的著迷^_^||。

3.03:30
我的layout是左邊一塊latest，
右邊有個.side包住了.service+.find。

4.05:00
h3和p其實應該合併為h3,p然後再來寫margin比較節省程式碼，
另外有浮動的東西，都需加clearfix

5.08:35
寫到後面我發現border的顏色也很一致，
所以也將它做成變數，
在之前寫code的過程中，
大家應該也逐步感受到全域變數的魅力了。

做到這邊大致的雛型就有了，
但是這樣子還並沒有結束，
除了元素要微調外，
如果要更完整，我還會做：
1.有些字型並不是預設字型，所以會使用web-font來去做兼容性
2.上面的slide是動畫輪播，會與美術討論該如何呈現並來設計javascipt 動畫輪播效果。
3.有些元素的hover過後的效果並沒有做很齊全，所以當弄好以後，還是會和美術討論，
是否可用transition效果讓畫面更添具網頁效果。

這裡也附上此次切版的layout，提供大家參考學習^_^：
https://github.com/gonsakon/Sass-Layout-Demo