文章樣式美化保姆級教學

一個堅持原創的小專欄。分享編程知識,提高工做效率,致力於經過簡單的語言,把編程這點事講清楚。涵蓋內容:java、設計模式、kafka、leetcode高頻題、機器學習等等css

1.背景2.步驟2.1 準備2.2 實操2.3 注意2.4 提高html

1.背景

  今天來教你們一個小技巧,用於實現像本文同樣的文章樣式,以及如何自定義文章樣式。java

2.步驟

2.1 準備

  首先咱們須要作一些準備工做。
  1.瞭解markdown格式,markdown中支持html語句,咱們能夠經過這種特性去定製一些樣式。(即便是不爲了修改樣式,我也會建議你使用markdown來編寫博客,這樣能夠實現一篇博客發給多個網站,不用調整樣式)
  咱們能夠將網頁的組成,簡單理解成:文本(html)+樣式(css)+腳本(js),
  2.簡單瞭解一下html、css。這有助於你對文章樣式進行定製(不瞭解也不要緊,並不會影響你實現本文的文章樣式)編程

2.2 實操

  這裏咱們須要藉助一個markdown在線編輯器,md2All
  http://md.aclickall.com/
  接下來我會簡單的介紹一下它的使用,首先咱們的markdown中的語法,是和html一一對應的,好比###就對應着html中的h3標籤,因此咱們只須要修改h3標籤的css,就能夠改變markdown默認的樣式。
  接下來咱們就開始實現本文的樣式,點擊圖中的一鍵排版。
設計模式


  而後咱們在排版樣式中選擇綜合示例,這個時候咱們就獲得了一個本文的排版樣式

  接下來咱們須要在Md2All中編寫咱們的博客,編寫完成後,點擊上方的 [複製]按鈕。
  咱們複製出來的,是這篇博客生成的html。因爲markdown支持html語法,因此咱們直接將複製出的內容粘貼到咱們想要發表文章的網站上就能夠了。

2.3 注意

  這裏涉及到一個上傳圖片的問題,給你們分享一個小技巧,咱們能夠在任意一個咱們想發文章的平臺上,將咱們的圖片上傳。獲得一個url,而後在將它粘進Md2All中,就能夠省去咱們本身上傳圖片到圖牀的步驟了。markdown

2.4 提高

  最後呢,這只是套用了別人寫好的樣式,當咱們學會了html,css後,就能夠本身定義樣式了,但願你們都能定製出本身想要的樣式。app

  最後,期待您的訂閱和點贊,專欄每週都會更新,但願能夠和您一塊兒進步,同時也期待您的批評與指正!機器學習

相關文章
相關標籤/搜索