HTML中的
無序列表(
- )中:
li { list-style-type: none; /* 去掉原點 */ background: url('原點圖片路徑') no-repeat; /* 設置原點圖片 */ padding-left: 原點圖片寬度 + 10px; /* 讓文本向右偏移,不被原點遮擋 */ } 有序列表(
- )中:
/* 小圓點 */ ol li { list-style-type: circle; /* 原點為白色的圓形 */ } /* 大圓點 */ ol li { list-style-type: disc; /* 原點為黑色的實心圓形 */ } /* 小方塊 */ ol li { list-style-type: square; /* 原點為黑色的實心正方形 */ } /* 大方塊 */ li { list-style-type: square; /* 原點為黑色的實心正方形 */ }
通過上述代碼,我們可以自定義各種形狀、顏色以及大小的原點樣式,以滿足不同需求的列表設計。