css 中的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:300px;padding:20px;margin:20px;border:4px dashed #ccc;}
div.box>span{color:#999;font-style:italic;}
div.content{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}
li{margin:5px 0;}
ul.test li{color:red;font-size:30px;}
ul.test li span{display:inline-block;color:black;font-size:16px;}观察对比效果
这个用CSS来控制就可以了
----------------------------------
<body>
<ul>
<li><a href="#" class="expand">周敏</a></li>
<li><a href="#" class="expand">杨飞</a></li>
<li><a href="#" class="expand">刘德华</a></li>
<li><a href="#" class="expand">周周</a></li>
<li><a href="#" class="expand">小飞</a></li>
</ul>
</body>
---------------------------------
Css
<style type="text/css">
ul{
list-style:none; //去掉列表前的圆点
}
li{
width:100px;
}
ul li a{ // 主要对a标签进行操作
display:block; // 使a标签表现块状
padding-left:20px;
margin-bottom:5px;
}
.expand{
background: url("./images/treeview-expanded.gif") no-repeat 0 2px; //小图标的设置
// 0 表示向右移动的像素 2px 表示向下移动的像素
a:hover{
background: url("./images/treeview-collapsed.gif") no-repeat 0 2px;
}
使用上面两个css设置，可以控制前面的小图标进行变化的设置
</style>
1、css代码
ul {list-style-type: none;}
ul li::before {content: "❁";color: red;}
2、html代码：
<ul><li>1.111</li></ul>
3、效果：
|
广告 您可能关注的内容 |
