第三集來囉，今天要來跟大家分享我改部落格的版面配置，有寫還在研究的部分也標明出來，大家不妨參考。
語法裡面有container1、container2、container3 ，有看過別人說有3其實其他兩個就可以刪掉，這邊就不動作以免有錯誤發生。
主要改container3 裡面的width(寬度)，像我就改成1300px 寬欄位，15吋電腦差不多剛好到邊，桌電寬螢幕看起來也適中。
另外補充margin，我目前參數是18px auto 30px，前方數字18px是設定上方與藍色那一條的距離，大家可以自行設定想要的高度。
老實說我不太懂content在三欄位裡面的邏輯，我得float設定靠左(left)，width設定900px，剛剛好把中間這塊推到剛好位置，其實也是試了很久才抓到900px這個數字。
我試著用 background-color:#eee 來看到底區塊在哪，並試試看100px是如何？
噢，是靠左沒錯，灰色那塊是content，100px中間那塊只能往右推一點點，於是推了900px之後就會變成下圖。
不知道這樣算不算土法煉鋼，也許下次更懂之後再更新這篇文章吧，今天跟大家分享成果，大家也可以自己慢慢試，語法記得改好先用記事本存起來。
article-area主要調整 文章、列表、回應區塊，痞客幫 寫這麼攏統鬼看得懂？試著調整看看之後，才知道只會改到上方文章寬度、下方標籤和個人分類那一塊，設太小會擠在一坨。
設定width到想要的寬度，我的設定是700px；left設定中間距離左邊的距離，我設定180px，太少的話又會往左邊擠壓。
links是調整側欄，而下面還有row1跟row2，先看link架構下面整體。
links裡面的width是三欄位左邊側欄跟右邊側欄中間的寬度，數值越多兩邊推得越遠，我設定width是1260px，而left是欄位的對應位置，我設定-1015px，設定0會跑到右邊去，所以要負數。
#links-row-2 裡面是設定側邊欄位寬度，設100px就會如下圖，我設定260px是剛好的狀態。
全部調整完之後大致的版型就出現了，接著看要不要調整article-content裡面的width，調整設定文章裡面的字剛好不要衝出去，我設定寬度是700px。
我剛調整好時自有跑出去一點，一直在找哪邊可以調，原來在article-content裡面。寬太大誇張一點字就會像這樣...
今天跟大家分享我改自己部落格的實戰過程，希望可以對你更改部落格版面有所幫助，期待之後CSS修改部落格實戰系列吧！祝大家都有美美的部落格喔！
留言列表
ACG大全 (3)