八月 08, 2008

[模版改造] 如何將「 寬度 800 像素」 的模版改為 100% (或特定寬度)

如果寬度是預設給 800 x 600 螢幕的模版。要放大一點的圖就不方便。有時會超出文章的範圍或破壞版面!

其實只要修改幾個小地方就可以啦! 你可以參考使用的模版修改類似這些 CSS !

參考範例

http://www.tiec.tp.edu.tw/lifetype/1413

 

roodo.css 修改程式碼   紅字的部份 就好了!


首頁主圖齊右

BODY {
Font-Family: Arial, Helvetica, sans-serif;
WIDTH: 100%;
COLOR: #FFFFFF;
HEIGHT: 100%;
TEXT-ALIGN: center;
background-color: #8DC63F;
background-image: url(背景圖);
background-repeat: no-repeat; /* 背景圖不重覆 */
background-position: top right; /* 改成靠右 */
}

另一種情況,如果要底圖置中則是要加上

BODY {
Font-Family: Arial, Helvetica, sans-serif;
MARGIN: 0px;
WIDTH: 100%;
COLOR: #666666;
HEIGHT: 100%;
TEXT-ALIGN: center;
background-color: #C2C2C2;
font-size: 12px;
line-height: 150%;
background-image: url(背景圖);
background-repeat: repeat-y;  /* 垂直方向重覆 */
background-position: 50%;

 


改變整體寬度 (不是特殊的背景)

#container {
/*MARGIN: 0px auto;*/

MARGIN: 0px 0px;
WIDTH: 100%; /* 改變整體寬度  如果要接背景圖就用主圖的寬度 例如 1000px*/
TEXT-ALIGN: left;
}

另一種情況 ,如果是背景圖是需要接圖,則只要顯示 1000 像素的寬度 

不然在寬度更寬的螢幕上,主圖的位置會跑掉哦!

#container {
MARGIN: 0px auto;
WIDTH: 1000px; /* 改變整體寬度 */
TEXT-ALIGN: left;
}


改變內文寬度


#content {
FLOAT: left;
WIDTH: 75%;/* 改變內文寬度 */
padding-top: 10px;
}


改變文章寬度

.blogbody {
MARGIN-BOTTOM: 10px;
PADDING-BOTTOM: 10px;
PADDING-TOP: 10px;
border-top: #FFF 1px solid;
width: 100%;/* 改變文章寬度 */
padding-left: 10px;
}


改變選單寬度


#links {
MARGIN-TOP: 440px;
FLOAT: right;
TEXT-ALIGN: center;
width: 20%;/* 改變選單寬度 */
margin-left: 0px;
}


主圖框寬度改成 100 %

#banner {
WIDTH: 主圖寬px;HEIGHT: 主圖高px;
background-image: url(top.gif);
background-repeat: no-repeat;
background-position: top left; /* 改成靠左上 */
background-color: #F5FAC7;
}

請自行修改您的主圖配新寬版面。


部落格名稱改齊右

.blogtitle {
FONT-SIZE: 20px;
PADDING-TOP: 30px;
TEXT-ALIGN: right;
padding-right: 20px;
color: #FFFFFF;
}


發佈者: 蔡明璇 at 13:43│  點閱次數 (179)│ 修改文章管理迴響迴響 (0)200808Blog應用第三期
回應文章

發表迴響

(必要)
authimage