古力咖啡因就像下圖的範例一樣只要3個步驟
就可以把部落的的版面變大啦!
讓大家跟著我一起動手做吧!
相信大家一辦好部落格之後一打開一定都是比較小的格，就像下面這張圖一樣
所以大家都會想要讓版面先變大，
變大之後的好處除讓網誌看起來更氣派更好閱讀之外，
也可以放上一些大圖片讓內文更活潑更豐富。
3個步驟如下
改造之後!!!你就可以看到一個寬敞又乾淨的版面了!!!
在進入3步驟教學之前先來2個簡單但卻很實用的小提示:
Tip1.如何進入後台CSS原始碼編輯，並且保持備份的好習慣
記得備份!!!
Tip2每修改完一次程式碼之後可以先按預覽看看版面是否修改成功之後再進行儲存
只要會使用上面的2項技巧修改CSS之後
CSS的修改對你來說一點都不難囉!!!
接下來開始進入本篇的重點囉~~~
1. 放大整體(body放大)
記得先把全部程式碼備份起來!再來修改!
要是不小心發生版面亂掉只要把舊的程式碼貼回來就可以啦
找到以下內容
#body-div{
width: 900px;
background:url(http://pic.pimg.tw/pixnetvisual/49dacf266edde.png) left top repeat-y;
position: relative;
margin:0 auto 20px;
}
把width: 900px;改成width:100%;
2. 內文放大(content和article-area放大)
找到以下內容
#content {
overflow:hidden;
float:left;
width: 630px;
padding-top:10px;
}
把width: 630px;改成width:70%;
找到以下內容
#article-area{
width: 590px;
margin:0 auto;
}
把width: 590px;改成width:90%;
改完之後再按預覽觀看就可以看到跟下圖一樣的畫面
版面大小都被拉開了
接下來只要最後一步把圖片刪除就好了!
3. 圖片刪除(header圖片刪除)
先找到程式碼位置再把紅字刪除就完成了!
body {
font-size:12px;
font-family:arial, Century Gothic;
line-height:160%;
background:#e9faff url(http://pic.pimg.tw/pixnetvisual/49dacf25b7d67.png) left top repeat-x;
background-image:url(http://pic.pimg.tw/pixnetvisual/49dacf25b7d67.png);
background-color:#ffffff;
background-repeat:repeat;
background-position:top left;
}
#body-div {
width:100%;
background:url(http://pic.pimg.tw/pixnetvisual/49dacf266edde.png) left top repeat-y;
position:relative;
margin:0 auto 20px;
}
#header {
background:url(http://pic.pimg.tw/pixnetvisual/49dacf273c6a6.png) left top no-repeat;
height:190px;
background-image:url(http://pic.pimg.tw/pixnetvisual/49dacf273c6a6.png);
background-position:top left;
background-repeat:no-repeat;
}
.article-head {
height:39px;
background:url(http://pic.pimg.tw/pixnetvisual/49dacf25546bf.png) left top no-repeat;
position:relative;
}
#footer {
clear:both;
background:url(http://pic.pimg.tw/pixnetvisual/49dacf26c48d8.png) left 0 no-repeat;
height:50px;
text-align:center;
border-top:0;
padding:20px 10px 0;
}
上面步驟都完成之後你就可以看到一個乾淨的版面了!!!
你已經跟著步驟做到這邊代表你有一定的概念可以來修改CSS了
但是如果我還想修改其他版面要怎麼辦呢?
只要再看完我下面這一篇教學你就會擁有更進階的能力啦!
留言列表
