B1

來源:政治是一場高明的騙局--藍綠都在玩雙面刃

我之前看到這篇:精選 25個Firefox外掛、擴充套件 (2008/7/10更新),對於重灌狂人的排版很欣賞,但我自己不會在文字上加上背景,藉由鄉民a892245的指導才知道,其實就是Blockquote的引用文字功能罷了。

Blockquote在Html教學文件中代表引用文字功能,現在我們只要在樣版設計上稍微更動CSS原始碼,以後文字要加上背景就可以直接拿來用了。

Blockquote在Window Live Writer(WLW)工具列中圖示為B2

WLW是一款離線編輯軟體,介面完全中文,我在介紹WebSlug文後半段就在介紹他,在WLW工具列看到這個按鍵卻不會用,現在卻陰錯陽差的學起來了,未來要學重灌狂人寫個Firefox擴充套件文就可以拿來用了。

現在打開Pixnet樣式設計精靈
B3

先檢查一下CSS模板內有沒有已經設定好的Blockquote語法,上圖是已經崁進去調整好的語法,示範狀況如最上面第一張圖所示。如果沒有,最簡單也符合標題(文字背景)的寫法是:

blockquote{
background-color: #ECF6F3;
}

寫在最上面就可以了。這樣引用文字功能顯示如下 ,文字到邊框的距離為0,看起來很醜
B6

#ECF6F3是CSS語法的顏色,一些範例的顏色可以到CSS Color Names參考,有興趣可以自己調色,例如這個ColorComboTester,在#後面輸入就可以試試看了。

所以接下來進階設定,一定要提到CSS的排版,下圖是Firebug套件的排版圖
CSS

再清楚一點就把方向加上去,Content(文字部分)、Padding(以border為準,文字到Border的距離)、Border(邊框)、Margin(Border以外的空白),示意圖如下
CSS

來源:CSS∥排版觀念-BoxModel>Margin、Padding

所以當我設定如下:

blockquote {
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
padding-left: 20px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
background-color: #ECF6F3;
}

就表示我設定了margin三個方向的間距長度,與Padding四個方向的長度,最後再設定背景顏色。如果懶一點就只設定如下,這樣寫在我的樣式呈現怪怪的,不過每個人不一樣,多調整就好了。

blockquote {
margin: 10px;
padding: 10px;
background-color: #ECF6F3;
}

CSS樣式更改完之後,以後要使用此功能只要反白再按B2就可以了。

P.S. 我怕我寫完還是有人看不懂,我本身沒有程式底子,如果有問題或補充請不吝指教。

創作者介紹

ʎǝuoɯ ǝɥʇ ǝɯ ʍoɥs

kokafan13 發表在 痞客邦 PIXNET 留言(5) 人氣()


留言列表 (5)

發表留言
  • kokafan13
  • blogger測試成功,bs2踢到鐵板,不過bs2預設就有,我不知道怎麼改
  • hgc0818
  • 我覺得我調起來的比較好看耶,哈。
    我自己又加了一行
    margin-right
  • 看來你成功了
    其實很簡單咩

    kokafan13 於 2008/11/15 10:24 回覆

  • 獅子歌歌
  • 一開始還是看不太懂,我是直接copy你的程式碼,等到看到實體,再重新回去修的。改天我也來寫一篇更簡單的教學文好了

  • 開始臭屁了

    kokafan13 於 2008/11/15 19:34 回覆

  • ann
  • blockquote {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    padding-left: 20px;
    padding-right: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: #ECF6F3;
    }


    我想請問這一段是加在那里呢?
    是edit html里 <head>之間嗎
  • 你的blog應該類似bs2那種html語法
    這種我不太會 抱歉

    kokafan13 於 2009/04/12 15:20 回覆

  • gucci outlet
  • for example you can http://www.gucciibags.com/ gucci outlet a twenty pip concentrate on which receives used out, but from the time you instruct your broker to near the trade, the cost could possibly nicely have moved versus you and you also missed http://www.louisvuittontrades.com/ louis vuitton chance to exit the trade.This can be the aim why it is considerably much better to proceed up pretty a few time frames, and try and create some earnings from the every solitary evening chart http://www.gucciicc.com/ gucci outlet even the 4 hour chart, for example. These increased time frames provide you with a complete great offer additional time to evaluate your trades and you also have so considerably additional http://www.suprasse.com/ supra shoes about time.