css 中的li 里面默认的黑色点如何换成红色的,然后圆圈变大

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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.boxwidth:300px;padding:20px;margin:20px;border:4px dashed #ccc;
    div.box>spancolor:#999;font-style:italic;
    div.contentwidth:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;
    limargin:5px 0;
    ul.test licolor:red;font-size:30px;
    ul.test li spandisplay:inline-block;color:black;font-size:16px;

    观察对比效果

参考技术A

这个用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>

参考技术B

1、css代码

ul list-style-type: none;

ul li::before content: "❁";color: red;

2、html代码:

<ul><li>1.111</li></ul>

3、效果:

参考技术C 这种一般都是用图片做的 ,你可以设置type属性 设置成图片本回答被提问者采纳

在css中设置ul样式,li的前面默认会出现黑色圆点,怎样修改圆点的颜色……求解

li自身圆点的颜色是修改不了的,你不想要那个圆点的话,可以通过以下几种方式来解决。
1.将圆点去掉,li list-style:none;然后用color:#ff0000;设置字体的颜色。<li>.</li>这里的点就是红色的了,你可以设置为自己喜欢的颜色,如果你要区分点和字的颜色,可以在li里面再嵌入一个标签,像这样:<li style="color:#ff0000; font-size:12px;"><span style="color:#00ff00; font-size:20px;">.</span>list1</li>这样点就是绿色的,字就是红色的了。
2.将圆点去掉,li list-style:none;然后将那个点做成图片,然后嵌入li中。:<li style="color:#ff0000; font-size:12px<img src="图片地址">list1</li>。
希望对你有用哦,不懂的再hi我
参考技术A lilist-style:none把默认的给去掉,然后把着了色的圆点切成一张背景图片使用;
libackground:url(图点图片路径) no-repeat;本回答被提问者采纳
参考技术B <html>
<head>
<style type="text/css">
ulcolor:#f00;
spancolor:#0f0;
</style>
</head>
<body>
<ul>
<li><span>=====YaopK=====</span></li>
</ul>
</body>
</html>

代码上面这样的。
用 ul 或 li 设置一个颜色(这个颜色为园点的颜色)
在 li 中套个 span 标签,再设置颜色(这个是字体的颜色)
这样就可以了……

以上……
参考技术C list style="color:blue(换成你想要的颜色)" 参考技术D 很简单哦,

li list-style:circle
就是 list-style参数,这个可选的很多,你用dreamweaver的 css 编辑器里面提示看到。

如果你不想要这个 ,直接:li list-style:none
----------------
我是沙发哦,要设为最佳哇。。。^_*

以上是关于css 中的li 里面默认的黑色点如何换成红色的,然后圆圈变大的主要内容,如果未能解决你的问题,请参考以下文章

看看怎么用CSS去掉ul li前面的黑色小圆点方法

用css控制不同文字亮不同颜色

关于css中,ul li的背景小图标属性设置

这点html代码怎么让字体变成红色?

如何去掉ul,li前面的点

css中鼠标没有移上去图片是黑色