[部落格]修改CSS語法:『blockquote』(引用段落)

1 Star2 Stars3 Stars4 Stars5 Stars (本文對您有幫助嗎?)
Loading...

對於部落格中的CSS屬性,有一個標籤叫『blockquote』即『引用段落』的html標籤,一般只要編輯文章的畫面就能直接點擊使用,其目的是為了把文章中一些重要的段落句子用「高亮」的方式來呈現,而有些部落格原本內建的『blockquote』很不好看,故可以透過修改CSS語法的方式來讓它好看些。


160424部落格語法修改_quote1

只要是CSS語法都可以套用在各種部落格上,如Wordpress、痞客邦、Google Blogger。

列出兼筆記一下微微足道常用的語法,以下為範例,可複製下來自己再修改邊距、字體、背景色等等:

■CSS語法1:

blockquote{
     margin: 20px;
    padding: 10px;
    background-color: #eeeeee;
    border-left: 5px solid #00aae1;;
    margin: 15px 30px 0 10px;
    padding-left: 20px;
    border-radius: 6px;
}

↓效果1:

眾鳥高飛盡,孤雲獨自閒;相看兩不厭,只有敬亭山。

■CSS語法2:

#blockquote {
    background-color: #FFFFBB;
    padding: 40px 0 10px 40px;
    border: 3px dashed #ccc;
}

↓效果2:

眾鳥高飛盡,孤雲獨自閒;相看兩不厭,只有敬亭山。

■CSS語法3:

blockquote2 {
    display: block;
    font-size: 15px;
    line-height: 1.6;
    font-style: italic;
    color: #666;
    background-color: #FFFFFF;
    padding: 15px;
    border-left: 5px solid #00aae1;
    border-right: 2px solid #00aae1;
    box-shadow: 2px 2px 15px #ccc;
}

↓效果3:

眾鳥高飛盡,孤雲獨自閒;相看兩不厭,只有敬亭山。

 

以上的對Blog的CSS語法修改其實不難,只要稍懂CSS語法就能看的懂本篇在說什麼,而語法修改要的套用就看個是要用#ID的方式或是直接用Class或是直接全局的<blockquote>修改,就端看個人了!!!

▼全局的<blockquote>修改
<blockquote>
    <p>
        眾鳥高飛盡,孤雲獨自閒;相看兩不厭,只有敬亭山。
    </p>
</blockquote>

或是

▼用ID方式對<blockquote>套用
<blockquote id="blockquote2">
    <p>
        眾鳥高飛盡,孤雲獨自閒;相看兩不厭,只有敬亭山。
    </p>
</blockquote>

 

 

如果覺得這篇文章不錯,請幫我們讚一下!
Facebook
Google+
Telegram
E-mail
今晚有風

我是今晚有風,我喜歡寫部落格來記錄「把不會變會」的事,也喜歡教別人寫部落格,更有替人架設部落格網站的服務(就像本站)。
凡是網路行銷相關都興趣十足,特別是「關鍵字&內容行銷」! 目前主要是專職部落客網站接案製作架站教學,歡迎找我聊聊。

  • 如果您免寫程式的架站有興趣話的,可以加入FB社團一起交流。
  • 如果您需要更系統性的學習,歡迎參考我的線上課程
※你可能也喜歡:
有話想說嗎?

[部落格]修改CSS語法:『blockquote』(引用段落)” 有 1 則迴響.

發表迴響

推薦閱讀 :
推薦閱讀 :
安裝PC版google雲端硬碟後,無法在在電腦本機以關鍵字搜…
d
c