2008年12月2日 星期二

[CSS] 修改痞客幫樣版,讓文章內支援預設 ul, ol 清單樣式

Pixnet 裡頭的 Blog 樣式有不少做得挺不賴的,可是,我習慣記東西用條列式的,因此常常會用到 ul , ol 等條列樣式,偏偏九成的風格都已被設定成 list-style:none; ,然後又來個 margin:0; padding:0; 造成的結果就是條列式的尺規貌不見了!繼上次改了 vanmusic - 范逸臣_無樂不作 ,這次就換改 lovejie2005 - 00065 - 綠島燈塔 囉!


我喜歡夏天及陽光充足的場景。綠島燈塔恰恰好符合我的意念。或許,哪天我也開始旅行,也能替自己換上專屬的圖片吧!


修改方式



  1. 拿掉預設的部分

    • dl,dt,dd,ul,ol,li{ margin:0; padding:0; }

    • ol,ul { list-style:none; }



  2. 新增以下設定

    • .article-head , .inner-box ul , .inner-box ol , .box-text ul , .box-text ol { list-style:none; margin:0; padding:0; }




是的,這樣就完成了,其中 article-head 用在 ul ,因此就不必再延伸至 ul 或 ol 囉,而 inner-box 和 box-text 則是選單旁邊的部分,包括分類或留言等,詳細部分請參考 HTML 原始碼。


以上即可達成 ul, ol 的正常顯示啦!最後,為了保護眼睛,我選擇將字體從原先的 12px 調成 16px 囉!


.article-content { font-size:16px; }




沒有留言:

張貼留言