list-style-type所使用的小按鈕與LI正文間的間距、顏色、大小控制

說起列表標簽li的運用,也許大家都挺熟悉,但是,關于list-style-type所使用的小按鈕與LI正文間的間距、顏色、大小控制也許很多人都不是特別熟悉,這里就常見用法,做簡單總結:

list-style-type ? ?小按鈕的類型

list-style-position 小按鈕的位置(列表里inside和列表外outside)

list-style-image 小按鈕用圖片代替

我們常見的列表用法如下例子:

示例代碼

如果調整小按鈕顏色和大小,只需要相應的在ul標簽中改變color和font-size就行了;

這里,如果想改變小按鈕和Li之間的距離,用自動生成的小按鈕無法做到;

另外,如果項目中要求,小按鈕和li中的文字顏色不一樣的話,自動生成的li也很難做好,

這時,我們有必要引入背景圖片,在li上設置padding-left,然后再引入背景圖片

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,242評論 25 708
  • ¥開啟¥ 【iAPP實現進入界面執行逐一顯】 〖2017-08-25 15:22:14〗 《//首先開一個線程,因...
    小菜c閱讀 6,511評論 0 17
  • Bootstrap是什么? 一套易用、優雅、靈活、可擴展的前端工具集--BootStrap。GitHub上介紹 的...
    凜0_0閱讀 10,924評論 3 184
  • 教程整理自慕課網(原文部分錯誤在這篇文章得到修改,本文版本Bootstrap3.3.7)。 框架簡介 Bootst...
    小小奶狗閱讀 2,525評論 0 5
  • 這次出遠門,其實也不遠,就是去姥姥家。 8個月,開始認生,被姥姥一把抱走,大哭,于是,那一個早上都在哭。。。。 怎...
    林小夏199閱讀 188評論 0 1