常用Microsoft Office Powerpoint的人應該很熟悉項目符號和編號,這兩項就是在條列式清單時每項前面的東西,例如項目符號是圓點等,編號則是像1. 2. 3.這樣的東西。html中則是使用<ul>+<li>以及<ol>+<li>就可以做到。

不過這次放筆記在網誌時發現,編輯時都很正常,可是文章發出來,符號都不見了?本來以為是自己blog設定太奇怪,Google一下之後立刻從bilinareblossomylife的文知道,原來這是Pixnet部落格的版型都有的問題,只要在版型CSS中加上幾段就可以了(無論前面有否相關設定,直接加在最後就OK)

以下藍字是我參考上面兩位提供的CSS,稍做修改後加進我的CSS的內容,然後為了避免忘記,註釋寫上了經我測試後對於每行效用的記錄,就算不熟CSS應該可以大致看懂。如果有需要可以複製回去調整數字來用。
另外文末有吵雜的測試畫面,可以看看能弄成什麼樣子XD


/*在CSS加入這段內容以修正PIXNET的CSS版型中項目符號與清單編號無法顯示的問題

    FROM http://jaacnaett.pixnet.net                                                             */

/*我想這是調整每堆清單區塊跟普通文字之間上下垂直空的距離,em跟px最大的差異是會按螢幕比例自動改變大小,設定區塊時比px適合*/
.article-content p, .article-content ul, .article-content fieldset, .article-content form, .article-content ol, .article-content dl { margin: 1.12em 0; }

/*這是每層項目縮排量,這裡寫40px,太小的話不僅不好看,第一層的項目符號還會被擠得大小變很小*/
.article-content ol, .article-content ul, .article-content dd { margin-left: 40px; }

/*這是新開一層時,跟前項上下的距離,不是每項間距離喔,寫成一行,
   也是可以分開規定使得項目符號、編號或兩者彼此排列時空的距離都不一樣*/
.article-content ol ul, .article-content ul ol, .article-content ul ul, .article-content ol ol { margin-top: 0; margin-bottom: 10;}

/*這兩個規定瀏覽器看到ul和ol時要顯示成哪種清單
這裡這兩個設定分別是ul為實心圓形,ol是阿拉伯數字編號。
至於如何使文章裡同時顯示各種不同編號和項目符號我還沒找到簡單方法,可能要自己多定義幾種有list-style屬性如ul和ol的標籤*/
.article-content ul { list-style:disc;}
.article-content ol { list-style:decimal;}

/*
.article-content{ line-height: normal; }
這個加了清單中的行距會變很緊,不好看,所以冷凍之。
如果你的版型裡對行高有特別設定使得行距改了沒效果可以試試看 

*/

/*修正PIXNET的CSS版型中項目符號與清單編號無法顯示的問題結束*/

測試測試:

【用ul包起來的li是項目符號們】

  • 我是第一個,有沒有看到前面的圓點兒呀
  • 我是第二個,有,我也有一樣的圓點兒
    • 我是二之一圓點兒,巢狀包入一套ul就可以再建立第二層
  • 我是第三個,可惜這裡好像只能用黑圓點兒欸
  • 我是第四個,空心圓點跟方塊html輸入存檔就消失了的說

 

【用ol包起來的li是編號】

  1. 我是第一個,前面有標號呢
  2. 報數,我是第二個
    • 我是第二層圓點兒,來湊熱鬧!巢狀多包個ul所以第二層會是圓點
      1. 我是第三層,我雖然小還是標數字號好,而且這樣分層標了號的好處是,我就算說很多話寫不下換了行,也會自動縮排,就不會跟樓上不同層的搞混啦
      2. 對啊,我是第三層第二隻,我們有自己的編號喔
  3. 我是第三個,不能用羅馬數字喔
  4. 我是第四個,英文字母也不行
  5. 我是第五個,對阿樓上兩個的html存檔也消失了

 

【這是用dl包起來的主題與說明,前頭沒有符號或文字】

 
我是第一個主題,每個主題以及說明要用< dt >包起來
我是主題一的說明,在說明句子前加< dd >就可以讓它縮排一點
我是主題二
我是主題二的說明  

 

對於html中清單排版的各種可能以及作法,可以參考以下的網頁,說的很清楚

http://ebook.kei.tw/webtech/css-list-style_20090403.html
http://enjoywebtech.blogspot.com/2007/10/html7.html
http://hi.baidu.com/lifushuilove/blog/item/a2028b34aff8240390ef39fd.html
http://www.hsiu28.net/style/style_4.php

順道一提,我發現PIXNET的文章編輯器會改動一些html,編輯完文章後可以再看看下。

 

arrow
arrow
    全站熱搜

    jaacnaett 發表在 痞客邦 留言(4) 人氣()