li{list-style:none}把默认的给去掉,然后把着了色的圆点切成一张背景图片使用。
1.li自身圆点的颜色是修改不了的,你不想要那个圆点的话,可以通过以下几种方式来解决,.将圆点去掉,li{ list-style:none},然后用color:#ff0000设置字体的颜色,<li>.</li>这里的点就是红色的了。
2.你可以设置为自己喜欢的颜色,如果你要区分点和字的颜色,可以在li里面再嵌入一个标签,像这样:<li style="color:#ff0000font-size。
3.12px"><span style="color:#00ff00font-size:20px">.</span>list1</li>这样点就是绿色的,字就是红色的了。
4.将圆点去掉,li{ list-style:none};然后将那个点做成图片,然后嵌入li中。:<li style="color:#ff0000font-size:12px<img src="图片地址">list1</li>。
上述样式一般通过取消默认的list标记,然后以图片的形式实现;但是,也可以直接设置li的样式实现,思路是在li标签下嵌套span标签,然后将li的样式设置为红色,字号较大,而span为正常的样式。下面给出后者的实例演示:
创建Html元素
<div class="box"><span>通过设置li及其子元素span的不同样式将li默认的黑色标记改为红色,且显示较大:</span><br>
<div class="content">
<ul class="test">
<li><span>Glen</span></li>
<li><span>Tane</span></li>
<li><span>John</span></li>
<li><span>Ralph</span></li>
</ul>
</div>
<div class="content">
<ul>
<li>Glen</li>
<li>Tane</li>
<li>John</li>
<li>Ralph</li>
</ul>
</div>
</div>
设置css样式
div.box{width:300pxpadding:20pxmargin:20pxborder:4px dashed #ccc}div.box>span{color:#999font-style:italic}
div.content{width:250pxmargin:10px 0padding:20pxborder:2px solid #ff6666}
li{margin:5px 0}
ul.test li{color:redfont-size:30px}
ul.test li span{display:inline-blockcolor:blackfont-size:16px}
观察对比效果