網路城邦
上一篇 回創作列表 下一篇   字體:
網誌風格設定經驗談(二)--編輯自定樣式
2007/03/07 23:40:30瀏覽1241|回應4|推薦15

在進入這個主題之前,建議您先看一下這篇由「城邦-電小二」所公布的文章「網誌風格CSS架構圖解」,因為這篇文章可以讓您對城邦的網誌風格有所認識。

要想自訂自己網誌的風格,一樣要進入「管理中心」的「網誌設定」中,然後將畫面移到「網誌風格」的區塊

接著就要在「網誌風格」中選擇「編輯自定樣式」,然後以下的修改都會在「編輯自定樣式」下面的大塊文字編輯區中進行修改,每次修改完了之後,別忘了要按「確定」鈕來存檔喔.

現在就開始進入今天的主題,今天想先介紹幾個小祕訣給大家試試看。


1.如何讓網誌「置中擺設」

在城邦中許多預設的風格都是靠左擺設,所以如果你的螢幕寬度大於800px,那麼右半邊就會出現一大片空白區域.如果您想跟八樂園一樣,把整個網誌就擺在畫面的正中央,那麼只要在「背景大底圖」(body)的區域增加以下這一行就可以了

text-align: center

修改後的「背景大底圖」區應該像是這樣

/* ----------【背景大底圖】-------------- */
body {
background: #DFECFA url(底圖網址) no-repeat; /* 背景圖 */
text-align: center
}

2.如何調整「本網誌首頁,文章創作...」之間的寬度

這個區域是定義在「網誌橫式主選單」區域的「網誌橫式主選單的項目設定」(#header_menus li )中,您只需要更改「padding-right」的像素即可,一般預設值可能是30px,八樂園目前的設定是16px(因為我要把搜尋區塊放在這一段的最後面),以下是八樂園目前的設定(紅色字體就是您要修改的部份),請參考:

/* 網誌橫式主選單的項目設定 */
#header_menus li {
display: inline; /* 橫式 */
height: 30px; /* 高度 */
padding-top: 3px; /* 上側的內距 */
padding-right: 16px; /* 右側的內距(小圖示與選項文字的間距調適) */
}


3.如何調整「山頭區」的高度

這個區域是定義在「山頭區塊」(#header )中,您只需要更改「height」的像素即可,八樂園目前的設定是158px;另外如果您想調整「山頭區」與「內容區」的間距,可以調整「margin-bottom」的參數(通常是10px,如果不想有間距,把它調成 0px即可),以下是八樂園目前的設定(紅色字體就是您要修改的部份),請參考:

/* ----------【山頭區塊】-------------- */
#header {
height: 158px; /* 高度 */
margin-bottom: 10px; /* 山頭的邊界 */
}


( 休閒生活網路生活 )
回應 推薦文章 列印 加入我的文摘
上一篇 回創作列表 下一篇

引用
引用網址:https://classic-blog.udn.com/article/trackback.jsp?uid=balawu&aid=797777

 回應文章

lyli
等級:7
留言加入好友
請教內文行距
2009/03/30 22:47

拜讀大作,我找不到那裡可調整行距?

有時word打好,貼上去又亂了,

我希望行距單行,

段落1.5行,

不知如何設定,

導致文章貼上,毫無段落可言,

您的排版就很有層次,

敬請指導,謝謝.


balawu
等級:7
留言加入好友
請看第三集
2007/03/08 17:32
抱歉!第二集沒講清楚,特別寫了第三集,希望有所幫助,如果還不行,那我自好錄影教學了。

恰恰
等級:8
留言加入好友
但是 找不到
2007/03/08 03:20

* ----------【背景大底圖】-------------- */

找不到

而且無法進去修改 ???



恰恰
等級:8
留言加入好友
謝謝
2007/03/08 02:57
你說得好清楚

笨恰恰看懂了