当前位置:首页 » 网上购物 » css中ul前的圆点怎样修改颜色
扩展阅读
怎样用微信聊天图片定位 2024-11-18 11:18:38
ppt2016怎样双面打印 2024-11-18 11:18:34

css中ul前的圆点怎样修改颜色

发布时间: 2022-06-27 23:10:11

‘壹’ 各位大侠CSS中list-style-type属性前面小圆圈的颜色可以设置吗系统默认是黑色的我想搞成红的应怎么设置

list-style的颜色可以自己根据需要设置,方法是给<ul>标签加上color属性值,这样就会改变list-style 的颜色,并且不会影响文字的颜色:
例如:
html代码为:<ul> <li><a href="#" title="百家合符">百家合符</li></ul>
css样式代码:ul {padding-left:15px;color:#d1c098;}
li {height:20px;line-height:20px;list-style:square;}
大小可以通过给<ul>标签加font-size改变,不过存在兼容性问题(ie6不支持)
详情可查考:http://blog.sina.com.cn/s/blog_6540a3c50100j3qi.html

‘贰’ ul li标签里的黑色圆点怎么改成绿色

li{list-style:none}把默认的给去掉,然后把着了色的圆点切成一张背景图片使用; li{background:url(图点图片路径) no-repeat;}

‘叁’ 如何修改列表项li、ul前的圆点小方块

解决思路:
在HTML中没有相应的属性可以设置该效果,但在CSS中可以,相应的属性为list-style-type,要把圆点改成实心方块,只需要设置list-style-type的值为square。
具体步骤:
代码示例:

<ul style="list-style-type:square">
<li>list1
<li>list2
<li>list3
<li>list4
</ul>
技巧:想必大家都注意到,列表项离左边有很大一段距离,利用前面学过的知识,设置margin-left属性就行了:
<ul style="list-style-type:square;margin-left:12px">
<li>list1
<li>list2
<li>list3
<li>list4
</ul>
另外,如果要把小黑点换成自定义图片,可以用list-style-image,用法:
list-style-image:url(demo.gif)
提示:对于列表项目,还有一个list-style-position属性可以定义,主要用于设置列表项前的符号根据列表文字的排列方式,对应的脚本特性为listStylePosition。可选值的说明如下:
outside 列表项目符号在文本以外,文本不根据标记对齐。
inside 列表项目符号在文本以内,文本根据标记对齐。

可选值说明
none不使用项目符号
disc实心圆,默认值
circle空心圆
square实心方块
decimal阿拉伯数字
lower-roman小写罗马数字
upper-roman大写罗马数字
lower-alpha小写英文字母
upper-alpha大写英文字母

‘肆’ 请问这个label选项前面的小圆点该怎么用css设置成蓝色啊(它本来是灰色的)

<div>
<p style="font-size:18px;margin-top:30px;color:rgba(0,0,0,0.44)">约吗?</p>
<label class="demo--label">
<input class="demo--radio" type="radio" name="demo-radio">
<span class="demo--radioInput"></span>约
</label>
<label class="demo--label">
<input class="demo--radio" type="radio" name="demo-radio">
<span class="demo--radioInput"></span>不约,叔叔我们不约
</label>
</div>
.demo--label{margin:20px 20px 0 0;display:inline-block}
.demo--radio{display:none}
.demo--radioInput{background-color:#fff;border:1px solid rgba(0,0,0,0.15);border-radius:100%;display:inline-block;height:16px;margin-right:10px;margin-top:-1px;vertical-align:middle;width:16px;line-height:1}
.demo--radio:checked + .demo--radioInput:after{background-color:#57ad68;border-radius:100%;content:"";display:inline-block;height:12px;margin:2px;width:12px}
.demo--checkbox.demo--radioInput,.demo--radio:checked + .demo--checkbox.demo--radioInput:after{border-radius:0}

‘伍’ 在div+css中 咋么让ul的那个圆黑点变色 变成方的

我建议你自己手动添加个方块,这样便于以后的更新维护。
先把list-style参数写成none,然后li下边写两个span 一个左浮动 另个顺延,然后第一个里边可以放方块儿,第二个放文字,这样以后想把方块变成别的图形,你就可以重新在第一个span里插入别的图型。不知道我的回答你满意不?

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

上述样式一般通过取消默认的list标记,然后以图片的形式实现;但是,也可以直接设置li的样式实现,思路是在li标签下嵌套span标签,然后将li的样式设置为红色,字号较大,而span为正常的样式。下面给出后者的实例演示:

  1. 创建Html元素

    <divclass="box">
    <span>通过设置li及其子元素span的不同样式将li默认的黑色标记改为红色,且显示较大:</span><br>
    <divclass="content">
    <ulclass="test">
    <li><span>Glen</span></li>
    <li><span>Tane</span></li>
    <li><span>John</span></li>
    <li><span>Ralph</span></li>
    </ul>
    </div>
    <divclass="content">
    <ul>
    <li>Glen</li>
    <li>Tane</li>
    <li>John</li>
    <li>Ralph</li>
    </ul>
    </div>
    </div>
  2. 设置css样式

    div.box{width:300px;padding:20px;margin:20px;border:4pxdashed#ccc;}
    div.box>span{color:#999;font-style:italic;}
    div.content{width:250px;margin:10px0;padding:20px;border:2pxsolid#ff6666;}
    li{margin:5px0;}
    ul.testli{color:red;font-size:30px;}
    ul.testlispan{display:inline-block;color:black;font-size:16px;}
  3. 观察对比效果

‘柒’ 如何修改列表项"li,ul"前的圆点小方块

在HTML中没有相应的属性可以设置该效果,但在CSS中可以,

1,将圆点变成小方块:相应的属性为list-style-type,要把圆点改成实心方块,只需要设置list-style-type的值为square。

eg:ul li {

list-style-type: square;

}

2,将小圆点换成自定义图片:

eg:ul li{
list-style-type: none; /*先去掉黑点*/
background: url(http://***.gif)no-repeat center left; /*链接图片地址*/
padding-left: 20px /*图片的宽度,若不设置,图标会被文字覆盖*/
}

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

望采纳!

ul,li,ol{

list-style:none;

}