之前提供過「四欄式」的
無名網誌空白樣式範本
有許多人問,要怎麼修改成
自己想要的樣子呢?
很簡單!一步一步帶您做~




這就是「四欄式」網誌樣式,主要分成4大區塊:

回上一層(熱鍵:b)


你還沒有這個空白範本?請先到這拿:
四欄式網誌空白樣式

注意!這個四欄式樣式,每個區塊會互相影響,不建議作大幅度的更動
(初學者建議改小U有提到的部分就好,以免跑框)



 區塊1


區塊1就是#banner這地方是給我們放圖片的:

下一張(熱鍵:c)


圖片請先裁成500 x 236px

不會裁嗎?下面這些工具,都可以使用:
圖片縮小放大裁切工具
怎麼用小畫家,修改圖片的尺寸
很方便的照片剪刀(照片裁剪軟體)



其實,圖片大小差不多就可以了
如果尺寸超過,
只是沒辦法完全呈現出來而已



接下來,把裁好的圖片,上傳到相簿,取得圖片網址
就可以放入區塊1了!

語法是:

#banner { background:url(圖片網址) no-repeat; }

不懂圖片網址是什麼?請看:
怎麼得到正確的「圖片網址」


放好了就像這樣子:


回上一層(熱鍵:b)


在範本裡的設定,區塊1是沒有框線的
如果你想要框線,可以使用這一句語法:(但沒有框線比較好看)

#banner { border:
#色碼 1px solid;}



 區塊2


區塊2就是 #description2,也就是「網誌描述」的地方:

下一張(熱鍵:c)


範本的設定是,當你網誌描述有很多行時,它會自動出現捲軸

下一張(熱鍵:c)


怎麼改框線顏色?請用這句:

#description2 .description {
border:
#色碼 1px solid; }


怎麼改底色?請用這句:


#description2 .description {
background: #色碼; }


怎麼改
捲軸顏色?請用這句:(這只對IE瀏覽器有作用)

#description2 .description { 捲軸變色語法 }


改好就像這樣子:

回上一層(熱鍵:b)


區塊2裡面文字的顏色,請用這句:

#description2 .description {
color: #色碼; }


或是參考這一篇教學,有更詳細的介紹~
網誌描述、相簿描述、留言板描述…文字變化


如果上面的介紹對你有幫助,記得留下回應喔

arrow
arrow
    全站熱搜

    Umod語法教室 發表在 痞客邦 留言(111) 人氣()