真的是很久違的教學文,說實在的我下了超多空白支票
說好要教大家的東西全都沒寫出來,為了要還債減輕我的罪惡
就先從小記 List 著手吧!!

雖然現在本人的部落格已經漸漸被淡忘了,觀眾也是少之又少
加上 FB 那些社群網站的崛起,還在認真使用部落格的大概只剩下認真寫文的寫手了
有幾個網友有問過我怎麼做出像我的小記 List 那樣有點點又有下方橫線的格式
索性就先從這個簡單的說起

不廢話了直接來... (都廢話這麼多了 XD)

首先,我建議大家不要使用文章進階編輯器
一來是你無法預知進階編輯器會偷偷幫你加什麼 code 之外
實在也無法好好單純的寫進語法,除非打開那個 HTML 小按鈕看原始碼
如果你要開始學習自己如何更自訂自己文章的長相,那麼就習慣用很簡單的一般編輯器吧

如果整篇文章你會不斷加入一些 html 語法的話
建議一開寫文章的介面就捲到下方勾選 "不要系統自動換行,建議插入影音、表格、活動貼紙、dreamweaver語法時勾選。"
主要是為了避免你自己插入的 html 語法被自動產生的斷行語法給弄壞了
當你勾選之後,你寫文章時的 enter 換行就失效了
如果你的 List 前有一些自己的敘述的話,請用 br 標籤斷行 (範例如下)
以下直接一起示範 list 語法,html 的部分

這是範例文字<br> 範例文字第二行來的<br> <ul> <li>第 1 條文字</li> <li>第 2 條文字</li> <li>第 3 條文字</li> </ul> <ol> <li>第 1 條文字</li> <li>第 2 條文字</li> <li>第 3 條文字</li> </ol>


簡單說明一下,html 語法的 ul 就是 list 樣式的語意,不管前方的是圈圈、點點、圖片都同樣
而 ol 的原始樣式則就是序列 1、2、3 種類的 list
此時,很多網友會問說:我之前在寫文章有用編輯器自己下過這個語法阿!! 可是沒出來

餅友阿!! 人生不就是這樣的嗎?? 很多事情不是這麼簡單的 (是有沒有這麼深澳)
原因是因為現在痞客邦後台的大部分樣式幾乎都套了 reset css 的語法
這個 reset 的語法會將所有網頁中預設的樣式消除,包含你們想要的 list 格式

此時,你也不要太衝動把所有 reset 語法刪掉,因為這有可能會導致你的樣式跑版
這時你就只能 ctrl + z 速速救回來... 衝動是不會有好事的
請在你的 css 樣式表裡面加入以下語法

.article-content li { margin: 0 0 0 2em; } .article-content ul li { list-style-type: disc; } .article-content ol li { list-stlye-type: decimal; }

更多詳細的 list style type 請見:http://www.w3schools.com/cssref/pr_list-style-type.asp


此時你文章中的 list style 就會出現正確的樣式,那像我文章中小記一樣的底線呢?
也很簡單,只要在 li 的 css 中加入 border-bottom: 1px solid #ccc; 就可以了 (如下示範)

.article-content li { margin: 0 0 0 2em; border-bottom: 1px solid #ccc; } .article-content ul li { list-style-type: disc; } .article-content ol li { list-stlye-type: decimal; }


當然你也可以分別讓 ul 有底線而 ol 沒有底線,這些都是可以自訂
list 每條項目中的間距也可以改變,所有外觀上的相關設定都是靠 css 去改變的
這個部分當然不能一一條列出來了,有需要再問吧

補充說明一下這個你也可以用進階編輯器做 list ,但要記得把文章中的 CSS 貼到自己的 CSS 樣式表中喔~
希望你們使用愉快~



呼~ 教學文好辛苦喔~ 我還懶得截圖說明... 真不適合教學...

arrow
arrow
    文章標籤
    html css list blog
    全站熱搜

    Leah 發表在 痞客邦 留言(2) 人氣()