讓blogger畫面呈現的實用CSS

使用CSS,可以讓部落格畫面變的豐富,且讓呈現視覺的部分跟HTML分離清楚.下面就是一個使用CSS讓網頁做更好的呈現方式.如以下的效果(淡藍背景 藍色虛線框架)

在 ]]>< /b:skin >之前, 放入以下的程式碼

這是blogger的用法

.post blockquote {
color:#333333;
background-color: #F0F8FF;
padding: .5em 1em;
border: 2px #B0C4DE dashed;
font-size: 1.05em;
}

.post blockquote p {
margin:.75em 0;
}

然後,在發表文章時候,選擇 html呈現方式,也就是可以看到html的標籤,
將文字放入< blockquote >< /blockquote >中間 ( 要拿掉blockquote兩側的空白)

就能將文字做這種視覺呈現


如果是用於其他可以自定CSS的部落格平台,則可以這樣用

.blockquote {
color:#333333;
background-color: #F0F8FF;
padding: .5em 1em;
border: 2px #B0C4DE dashed;
font-size: 1.05em;
}

.blockquote p {
margin:.75em 0;
}

然後,在顯示文字的前後,設定class為blockquote
例如

< div class="blockquote">文字內容寫在這
< /div >

( 要拿掉 div 兩側的空白,也可使用 span 或其他 html 標籤tag)

你也可以自己修改成自己喜歡的設定, 簡單說明上面CSS設定的意思

color:顯示文字顏色
background-color: 背景顏色
padding: .5em 1em; 文字顯示的位置 (此為距離上面.5em 右邊1em ,也可以寫為px像素單位)
border: 外框的粗度 及框架顏色
font-size: 文字大小