如何在文章內容加入高亮顯示?

要怎麼做才會有像本站一樣的高亮顯示呢?

免外掛!簡單CSS就能搞定!

這裡提供了四種類型的高亮顯示,

提供CSS讓網友使用!

如何使用?

首先打開樣式表(style.css),加入以下語法進


/*highlight*/
.download, .announcement, .warning, .note {
	padding: 10px 5px;
	margin: 10px 0;
	width: 98%;
	color: #000000;
}
.download {
	background-color: #E3F5F9;
	border: 1px solid #0000ff;
}
.announcement {
	background-color: #b8f9d5;
	border: 1px solid #088c43;
}
.warning {
	background-color: #ffdbea;
	border: 1px solid #ff0000;
}
.note {
	background-color: #f9f6a7;
	border: 1px solid #e7d605;
}
.download, .announcement, .warning, .note {
	-moz-border-radius: 5px;
	-khtml-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

簡單說明:

第一段是設定四種高亮的邊界及留白,以及字型色彩寬度

第二、三、四段分別是設定.download .announcement .warning .note的色彩配置,

當然網友也能自行更改,

最後一Part是設定四個高亮的圓角,若不想要此效果可自行移除

設定完後按下[更新檔案]

然後在寫文章時,使用HTML模式加入以下語法:

備註高亮(class="note")

<p class="note">文字</p>

公告高亮(class="announcement")

<p class="announcement">文字</p>

警告高亮(class="warning")

<p class="warning">文字</p>

下載高亮(class="download)

<p class="download">文字</p>

這樣送出文章一看,美美的高亮就呈現出來了!

想隨時追蹤最新資訊?歡迎使用 RSS 訂閱最新文章 »

您或許會感興趣的文章

隨機推薦

共有 12 則迴響

  1. Pigmu

    #1 @

    讚啦~就是在等你這個謝謝LAY囉

  2. brownsugar

    #2 @

    @Pigmu:
    不客氣~
    快去用用看吧 :80:

  3. sh2153

    #3 @

    真不錯!這跟blockquote 很類似!
    這樣就不只一個功能能用了!
    那如果用

    改成像
    也能用嗎?

  4. brownsugar

    #4 @

    @sh2153:
    不懂你的意思欸~
    你是說把blockquote的樣式也改成highlight嗎?
    :42:

  5. sh2153

    #5 @

    這樣子除了 blockquote 之外
    其它也可以這樣應用
    用版大的方法要5 6個高亮度都可以呢!

    • brownsugar

      # @

      @sh2153,
      是啊~
      很方便的說 :05:

  6. Alan

    #6 @

    IE 不能看到圓角

    • brownsugar

      # @

      @Alan,
      對阿..不過有高亮也不錯啦 :28:

  7. Alan

    #7 @

    是的!!
    感謝您的教學喔^^

  8. 阿肥

    #8 @

    3Q了
    我蠻需要的 :30:

brownsugar 發表迴響

點擊這裡以取消回覆
*