阿駕零零壹 © 學習筆記

BLOCKQUOTE

在 pLog 加上 BLOCKQUOTE 的功能

UPDATE 2006-02-24 : 修改了文章的編排、還有修正一些註解、新增語法等等。

由於這個部落格的取向是用來紀錄比較技術性的東西，有時候，就會想要把程式碼之類的東西框起來，這樣比較容易看，偏偏 pLog 更新到 1.0 後，把 wyswyg 編輯器精簡不少，所以有時候就很麻煩，那天去問了推廣 pLog 有名的 Mark 結果才知道這個利用 CSS 的方法，快紀錄一下，感謝 Mark 了。

範例：

無標題版本

有標題版本 - 標題
有標題版本 - 區塊中文字

教學開始：

無標題：

<blockquote>輸入需要被標示於區塊中文字</blockquote>

有標題：

<blockquote>
<div class="quotetitle">區塊中標題</div>
區塊中文字
</blockquote>

如此就可顯示出 BLOCKQUOTE 的效果。

但是，如果模板的 CSS 沒有設定也不要緊，可以自行加上下面的 CSS 到 /pLog放置目錄/templates/模板目錄/style.css 裡面：

/* BLOCKQUOTE 設定 */
blockquote {
background : #ffffcc; /* 框內的背景顏色 */
margin : 5px 40px 5px 40px; /* 框線與框外邊界的距離.. 依次為上右下左*/
/* font-family : Arial; /* 框內的字體 */
/* font-size : small;
/* font-weight : normal;
color : #000000; /* 這是框內文字的顏色 */
line-height : 150%; /* 設定列高 */
padding : 10px; /* 框內文字與框線的距離 */
border : 2px dotted #336600; /* 框線: 2px的點狀虛線 */

/* 這幾天找到幾個還不錯的框線效果，補一下。 */
/* border : solid 2pt #9c9; /* 框線: 2pt的實線 */
/* border : dashed 2pt #9c9; /* 框線: 2pt的虛線 */
/* border : double 2pt #9c9; /* 框線: 2pt的雙線 */

/* 又找到新的語法，補一下。以下三行是一組。 */
/* border-left-width : 3px; /* 在左側的一條線 */
/* border-left-style : solid; /* 設定線的樣式，可以拿上面的實現虛線等等來替換 */
/* border-left-color : #CCCCCC; /* 設定線的顏色 */

/*width : auto; /* 設定區塊寬度 */
/* height : 210px; /* 設定區塊的高度 */
max-height : 200px; /* 設定最大高度 */
max-width : 500px; /* 設定最大寬度 */
overflow : auto; /* 自動產生需要的捲軸 */
overflow-x : hidden;　/* 隱藏水平方向捲軸 */
overflow-y : hidden;　/* 隱藏垂直方向捲軸 */
}

/* QUOTETITLE 設定 */
.quotetitle{
font-family:Arial; /* 框內的字體 */
font-size:medium;
font-weight:normal;
border-bottom: 1px solid #336600; /* 框線的粗細與形式 */
padding: 3px; /* 框內文字與框線的距離 */
}

加入以上 css code 後即可，TRY IT !!