這次是改變內文和側欄的寬度,這也是很多人問過的問題!:)
首先呢,要先知道寬度的英文叫做「width」。
若我要設定某區塊為100px,就這樣打:width: 100px; 。
以最常問的內文來說,就是 #content{width: 100px; }(當然不可能只設為100px啦…XD)
側欄呢,就是 #links{width: 100px; }。
在改寬度有個重點要注意,就是…其實我不知道怎麼說… = ="
意思就是,例如今天要改內文和側欄的寬度的話,兩者的寬度加起來不能超過 #container 的寬度。
因為 #content 和 #links 都是包含在 #container 下面的,
所以如果 #content 和 #links 的寬度超過 #container 的寬度,#container 會包不住這兩樣,就會造成側欄往下掉的悲劇(?)。
*注意:如果 #content 和 #links 有使用 margin-left 或 margin-right 的話,也要把 margin 的數值算進去,不然也會跑版。
再來說說三欄式要注意的,
三欄式的側欄會多兩個設定:#links、#links-row-1(三欄式第一欄)、#links-row-2(三欄式第二欄)。
所以改的時候也要注意 #links-row-1 和 #links-row-2 的寬度加起來不可以超過 #links 的寬度噢。(也要記得把margin的值算進去)
補充:由於做樣式的慣性,在改的時候或許會遇到一個問題:底圖不變,看起來很奇怪。
因為做樣式時常常會需要製圖美化每個區塊,而背景就是基本上一定會另外做的,所以看到的背景並不是用色碼指定區塊(側欄或是內文)的背景色,而是圖片。既然是圖片,想當然爾光改CSS是不能變動它的囉。
要改的話只能再做一張新的圖,把原本的圖取代掉。
公告版位
- Oct 13 Sun 2013 11:09
教學|調整內文和側欄寬度
全站熱搜
留言列表