[day14]-改變策略！之手刻網頁使用@media製作RWD個人網站之三－電腦版頁面製作
做好前幾天的網站後發現網頁上有些問題，像是圖片會破版之類的.....Orz
實在是很抱歉的說～
因為我的工作不常常寫CSS，所以在這次鐵人賽也是對我一個自我檢討，哪方面要多多加強！
所以我們的網站就改手刻，然後用我比較熟悉的方式去做...敬請見諒
----
頁面上背景我設一個div為body，body上我切主要三大block為
top 、center、footer
還記得上篇所提到的block大小設定寬度（width）設定為彈性值、高度（height）需要設定數值這樣寬才有數值來作百分比的計算嗎？
（Review:[day13]()）
SO~這三大block寬度我們都設定為100%，高度為以下設定
top:10vh ;
center:80vh ;
footer:10vh ;
總高→10vh + 80vh + 10vh = 100vh
這樣的高度設定總高為一個視窗的可視高度，就不會破版了～
主要版面設定好了，接下來要來設定次要重要的部分
#center 為頁面主要放置內容的地方，所以再往 center 裡面切 #left 與 #right
center定位設定為 相對定位（position: relative;）；center裡的元素定位針對父元素的定位來做 絕對定位（position: absolute;）
以上設定為上面的螢幕結圖，我做了區塊的標示，讓大家可以更清楚我的想法~︿︿
到此為止，頁面可以試著拖拉縮放測試一下，在測試的時候我都會把block的css border打開來看div的變化與大小動作對不對
border:1px solid red;
自錄影片DEMO：
可以看到紅框框會跟著視窗作縮放的動作，並且不會跑版～^^
-------
-------
最重要的版面調好不會破版後，就可以上文字、連結及圖片囉～
因為把視窗縮到最小會有文字與圖片全擠在一起的情形在！
所以在html的CSS裡我增加了 min-width 與 min-height 在頁面鎖上最小寬高
意指當我瀏覽器視窗小於所設定的數值後，網頁即不再做縮小的動作了，而可以鎖最小寬高也可以設定最大寬高囉～只是我這邊就不設定了，因為沒有特殊需求嘛～呵呵
剩下的就把文字與圖片間距的CSS調整一下，我大多習慣使用margin與padding去做設定，這方面的調整就因人而異了，因此就不在闡述囉～
那電腦版的頁面就到此結束了～
day15將一次製作平板與手機版的頁面囉～謝謝大家收看～
-----
文後-手刻我只花了一個下午就全做好了...想想當初因該要用自己習慣的方式作比較快的說QQ
-同步連載於"iT邦幫忙"鐵人賽活動系列文章[ 著作權為 Ying-chi Tzeng所有，轉載請告知～]
0 留言:
張貼留言