Ray

切版是一個前端工程師的一個基本技能

今天先把一頁式網頁的一個區塊切出來

目標版面

版面分析

1. 大框分成左邊一塊文字區(event-txt)、右邊一塊圖片區(event-pic)。

2. 右邊圖片區(event-pic)再分成四塊小圖區(event-pic-item)。

3.完成規劃。

HTML

1. 左邊文字區放標題、字、與按鍵。

2. 右邊圖片區用div包圖片共四個。

3.  最後的clear在css中是clear:both(清除兩邊浮動對象）這部分沒截圖到，要注意！。

CSS

1. 網頁總寬960px（已做過版面置左歸零，這部分沒截圖到）。

2. 左邊文字區切成整個版面的三分之一，右邊為三分之二，都各自float:left向左浮動排列。

3. 四塊小圖區(event-pic-item)也設定每個的寬度320px, 也都各自float:left排列。

4. 四塊小圖區(event-pic-item)的圖片寬度設為100%滿版，之後再將小圖做vertical-align設定top向上垂直排列。（消除四塊圖片中間的空隙）

5. 按鍵的display設為block讓他變成區塊自己佔一行。（否則預設是inline-block會跟其他元素卡在同一行）

6. 這部分完成。