現在,我有星星和數字
今天終於又搞定了BearBlog對我的一個難題,那就是無序清單以及有序清單的問題。
一般來說,使用Markdown語法來打清單的時候,正常頁面顯示應該會有個一顆點點或數字來代表清單的序號,但是在我一開始使用BearBlog時,卻發現卻沒有正常顯示。沒有點點或圈圈,也沒有縮排,數字清單也沒有依階層自動變化。
我原本以為是BearBlog並沒有成功讀到Markdown語法的問題,後來才發現原來是我使用BearBlog內建CSS模板中,其實並沒有定義該部分的格式(ul、ol、li),也難怪根本沒有辦法正常顯示。不過就在今天,我終於成功設定好了!
- 就讓大家欣賞看看
- 我所自定義的無序清單
- 有多美麗
- 就像星星一樣
- 有多美麗
- 我所自定義的無序清單
- 或者是看這個
- 會自動變化數字格式的
- 有序清單
- 數字也會隨著階層自動變化
- 有序清單
- 會自動變化數字格式的
(建議至網站上觀看會有最佳效果喔。如果您是用RSS閱讀器,可能只會看到一般正常的點點和數字而已)
雖然這不是甚麼重大的功能啦,不過成功靠自己尋找各種CSS語法,自己撰寫CSS自己排除錯誤,完成自己想要的樣子,真的蠻開心的。
我的CSS程式碼如下,請參閱:
li::marker{
color: #e3bc5e;
}
ul{
list-style-position: outside;
margin: 0px 0px 0px 16px;
padding: 0px 0px 0px 0px;
}
ul li{
list-style-type: "\2605";
margin-top: 8px;
}
ul li li{
list-style-type: "\2606";
margin-top: 0px;
}
ul li li li{
list-style-type: "\2726";
}
ul li li li li{
list-style-type: "\2727";
}
ol{
list-style-position: outside;
margin: 0px 0px 0px 32px;
padding: 0px 0px 0px 0px;
}
ol li{
list-style-type: cjk-decimal;
margin-top: 8px;
margin-left: 0px;
}
ol li li{
list-style-type: decimal;
margin-top: 0px;
margin-left: -16px;
}
ol li li li {
list-style-type: upper-alpha;
}
ol li li li li {
list-style-type: lower-alpha;
}