如何使用 blockquote 效果?

想要用本站的文章編輯器寫出下面的效果嗎?

這是一件有趣的事
需要大家共同努力

 

作法如下:

1,將欲作用的文字用滑鼠框選起來,按下工具列的blockquote按鈕,此時先按下 “預覽” 看看效果如下:

這是一件有趣的事

需要大家共同努力

 

效果似乎還不完整,若想改變底色,圓角與邊框,可以如下操作:

 

2,按下編輯器右上方的"文字"頁籤,會顯示出html 標籤

3,發現原本的文句似乎每列之間都多出了一列,請先刪除!

4,在<blockquote></blockquote>標籤之間加入<p style=” “></p>語法,如下所示:

 

<blockquote>
<p style=”background-color: #00ffff; border-radius: 5px; border: 1px solid red;”>這是一件有趣的事
需要大家共同努力</p>
</blockquote>

 

接下來再按預覽看看,應該就是想要的效果了!


*文中的 #00ffff 與 red 是指顏色,請參考 色碼表連結

*若需要在兩列中插入空白列,請在空白列中輸入 全形的空白” “,才不會有奇怪的效果!


 

發表迴響