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

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

目標版面

螢幕快照 2017-06-22 上午10.32.31.png

版面分析

fullsizeoutput_771.jpeg

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

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

3.完成規劃。

 

HTML

螢幕快照 2017-06-22 上午10.41.01.png

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

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

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

 

CSS

螢幕快照 2017-06-22 上午10.41.49.png

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. 這部分完成。

創作者介紹
創作者 READY sharing 的頭像
READY sharing

Ready sharing

READY sharing 發表在 痞客邦 留言(0) 人氣()