※進行一下動作之前，請務必將範本CSS做好備份，以備不時之需 ┌─#container3 ────────────┐簡單了解版面結構(只將會影響的區塊 │┌#header ─────────────┐│粗畫出來) ││ ││第一步：找出最上層寬度有設限者， │└─────────────────┘│找到了 #container3{……} │┌#main ──────────────┐│其中width被設定為950px，修大寬度 ││┌#content──────┐┌#links┐││來個1100px好了(根據原po給的範例XDDD) │││┌.article-content┐││ │││ │││└────────┘││ │││第二步：了解main、content 、links ││└──────────┘└───┘││現的寬度 │└─────────────────┘│main= │┌#footer ─────────────┐│1100px-25px*2=1050px │└─────────────────┘│#content{ width: 670px;} └───────────────────┘#links{ width: 200px;} 670+200=870，嗯，寬的扣打還有180px 第三步：將扣打加入#content裡，將#content{ width: 670px;} 改成#content{ width: 850px;} ρ(-ω-〃) 呃，這樣文章和側欄黏TT的，太密個人不喜歡， 所以將850px縮小為840px，習慣留點空間呼吸~~(呼) 第四步：.article-content{ width: 670px;}改成#content{ width: 830px;} 基本上寬度加寬到此算一個結束，以下是細部美化部份 首先，我的banner圖怎麼怪怪的Σ(-`ω′-;) 這是因為原背景圖寬度只有960，寬度拉成1100它就不夠寬，重覆的部份就跑出來 解決辦法(1)重新將背景圖加寬上傳，更新#banner{ background:url("圖片位置")} (2)我圖不改，右邊還是維持白色，背景圖不要重覆就可了 #banner { background: url("圖片位置") repeat scroll 0 0 rgba(0, 0, 0, 0) }中的repeat改成no-repeat 完工 接下來，我的文章標題怎麼怪怪的Σ(-`ω′-;) 加寬的關係，文章標題也要加大了.title{ width: 535px;} 840-10-115= 715 #content寬度-.article-head的padding-發文日期寬度 所以請修改成.title{ width:715px; } 疑~~我文章寬度增加了被什麼我的圖沒一起變大!!!!! 請將 .article-content-inner img[src$=".jpg"] { height: auto; width:100%;} 加入到CSS中，應該就看得到所有文章圖變大了 --

※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 114.45.158.183 ※ 文章網址: http://webptt.com/m.aspx?n=bbs/Blog/M.1402373703.A.D2D.html ※ 編輯: likangrace (114.45.158.183), 06/10/2014 12:19:57 1)Banner圖 搜尋 #banner{ 應該有以下的搜尋結果 #banner { height:318px; background:url(https……….jpg) no-repeat; } 請在background:的後面新增綠色的部份 完工 2)嗯，最後的寫法的確會連直圖也變大， 若要使用還需搭配其他script才可， 所以我將它低調暗化它了(欲看者請自行開燈哦)， 就請原po省略它吧(＠△＠；) <(＿ ＿)>抱歉了 ※ 編輯: likangrace (114.45.159.206), 06/11/2014 10:04:51