2010年10月22日 星期五

以下提供兩種Code Block樣式

這是第一種Code Block
將語法貼在post
CODE {
display: block; /* fixes a strange ie margin bug */
font-family: Courier New;
font-size: 8pt;
overflow:auto;
background: #f0f0f0 url(http://klcintw.images.googlepages.com/Code_BG.gif) left top repeat-y;
border: 1px solid #ccc;
padding: 10px 10px 10px 21px;
max-height:200px;
line-height: 1.2em;
}



只要把要張貼的語法放在
< code>< / code>


以下為第二種Code Block,感謝hnigel教學。
首先必須先修改Blogger的樣式表
在樣式表中加入下面這個屬性
顏色可以照個人喜好更改

#code {
BORDER-RIGHT: rgb(51,153,0) 1px solid;
PADDING-RIGHT: 10px;
BORDER-TOP: rgb(51,153,0) 1px solid;
PADDING-LEFT: 10px;
PADDING-BOTTOM: 10px;
BORDER-LEFT: rgb(51,153,0) 1px solid;
COLOR: rgb(0,102,0);
PADDING-TOP: 10px;
BORDER-BOTTOM: rgb(51,153,0) 1px solid;
}



之後在文章中的用法


要加上外框的文章




它的原理其實就是CSS當中外框的設定
如果需要基本的教學
可以去GOOGLE收尋關鍵字"CSS 外框"或"CSS BORDER"即可
在此就不多作介紹

0 意見:

張貼留言