問題描述

遇到了這樣的情況；如果用的是bootstrap框架開發(fā)的話。請問：該怎么寫呢，求各位老哥提供點思路。（能用的話最好把bootstrap用上，用不上也行）如圖：

問題解答

https://codepen.io/HaoyCn/pen...

list-style-image 可以實現(xiàn) 圖標(biāo)字體可以實現(xiàn)

建議還是不要用list-style,最好自定義樣式,給li標(biāo)簽添加背景色,添加圓角邊,再給前三個自定義顏色

<style> li {list-style: none;width: 20px;text-align: center;margin: 10px 0;border-radius: 4px;color: #fff;background-color: #ccc; } .one{background-color: red; } .two{background-color: green; } .three{background-color: orange; } </style>HTML

<ul><li class='one'>1</li><li class='two'>2</li><li class='three'>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li> </ul>