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




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




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

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



 區塊1


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




圖片請先裁成500 x 236px

不會裁嗎？下面這些工具，都可以使用：
圖片縮小放大裁切工具
怎麼用小畫家，修改圖片的尺寸
很方便的照片剪刀（照片裁剪軟體）


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


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

語法是：

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

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


放好了就像這樣子：




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

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



 區塊2


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




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




怎麼改框線顏色？請用這句：

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


怎麼改底色？請用這句：

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


怎麼改捲軸顏色？請用這句：（這只對IE瀏覽器有作用）

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


改好就像這樣子：




區塊2裡面文字的顏色，請用這句：

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

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


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

文章標籤
全站熱搜
創作者介紹
創作者 Umod語法教室 的頭像
Umod語法教室

Umod語法教室

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