html li去掉前面的小黑点 项目符号

最新推荐文章于 2022-09-17 17:09:44 发布
最新推荐文章于 2022-09-17 17:09:44 发布
阅读量2.3k 收藏
点赞数
文章标签： wpf linux c语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wpyok168/article/details/121605844
版权

去除小黑点

ul li{
    color:#fff;
    display:block;
}

ul li{
    list-style-type:none;
}

多行，需配合ul width li width

ul {
    width:280px;
}
ul li{
    float:left;
    width:100px;
}

li 点击事件

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
 $(document).ready(function () {
        $("ul").on("click", function (event) {
            var target = $(event.target);
            alert(target.html() + target.index())
        });
    });
</script>

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
 $(document).ready(function () {
        $("ul").on("click", function (event) {
            var target = $(event.target);
            alert(target.html() + target.index())
        });
    });
</script>
    <script type="text/javascript">
        function parentInitialize() {
            var count = 0;
            window.addEventListener('message', function (e) {
                // Check message origin etc...
                if (e.data.type === 'iFrameRequest') {
                    var obj = {
                        type: 'parentResponse',
                        responseData: 'Response #' + count++
                    };
                    e.source.postMessage(obj, '*');
                }
                // ...
            });
            document.querySelector("#jxbhttps").onclick=function(){
	//alert(document.querySelector("#jiexi_ul").style.display);
	if (document.querySelector("#jiexi_ul").style.display == "none") {
	    var top=document.querySelector("#jxbhttps").offsetTop;
	    var left = document.querySelector("#jxbhttps").offsetLeft+document.querySelector("#jxbhttps").offsetWidth+3;
    document.querySelector("#jiexi_ul").style="display:black; position:fixed;top:50px;left:25;";
}
else if (document.querySelector("#jiexi_ul").style.display == "black" || document.querySelector("#jiexi_ul").style.display == "") {
    document.querySelector("#jiexi_ul").style="display:none";
}}
		}
    </script>
     <script type="text/javascript">document.domain = "abbtt.com";</script>
<style type="text/css">
#jiexi_ul{
    width:250px;
    }
#jiexi_ul li{
    color:white;
    text-decoration:none;
    width:105px;
    height:30px;
    background:#555;
    margin-top:5px;
    margin-left:0px;
    margin-right:10px;
    line-height:30px;
    text-align:center;
    font-family:"微软雅黑";
    font-size:14px;
    border:1px solid black;
    list-style:none;padding:0;
    float:left;
}
</style>

</head>
<body style="background-color: rgb(72, 222, 218);" onload="javascript: parentInitialize();">
<div id="myvideojiexiAPI">
<div id="jxbhttps" title="点击 此按钮 弹出 解析接口 选择" style="top: 119px; left: 25px; font-size: 15px; width: 35px; height: 35px; line-height: 35px; background-size: 100% 100%; background-image: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAADyUlEQVRYhc2UbWhbVRjHf7dpZzXGBemmU2FtM1uEZssoOOhmXbsXXLPVidqydTiZzQfpGPhlH2T95GKKzDGwijgdTJlbohXUdU5aypbqHDIYKih1rg4VphtoJY1U23L8cM7NufcmWe6tRX3gcF7+z3Oe33nOuRf+R3YIuAAI4DfgA+BupTUAo0oTauycrwaOAuOWdau+B1hyo+TOIEFoi+CZMYFh5GtzaIZhTKjD5NkFQHx5GZERiJ8nVZCvUhB9WQAifkBqGYHY2yt1c95/WCcZ/0Wvm23oEx0D/F6oEocA8WZKB8V6LFVAbmJqofriAM7k1paDMBacNBOXyW7hVYD3BzTRiogaXBkCIKzm5z+Fy2PFblLb0dchYEB0HWSzcm3Hk0r0L41ya+fjEsDf9hCJiT58lQwktXPj/cp5dopYD/j9cvr5+dLJrZYegXePy3FNrVqcvAQdz6ao6tpexr7BjwCo3gDAZ6PSp2E5hOrlOFcN4MhhbwAAty0sIrTvPVaWm6zcJgHOaf3RDtk3t8rebfmtFuuBjW06HoBgOKdrgJr1ALzwnA5uCMsqmKXzUv6d3ZARcLBfXl82C6++pMR7owUAAovgriYbaaQRWtfrTT8+5R7AtOvXYPg0dLTDQBII1EN4WwEAgJVdgD5pTa2+/+/H5YOiKoIbM7+C2jvgkU1m7Cpo67f52QHq5HGtJ93ZLfv0iFoItbgCyFnFIli6GdbEof018C8uAjALLK6DqgjpEXliq6XUp0Sk0xtAw3ZYF4e6zXJu2GUNUKl6dcLciXGUv3qVNwCnCeCWcgvA/i1dNgd1wt0xeYcBA5aH7HDmYzX13TEdnre2pNEO4C+HP2bk+MMX9/iY/vYrzgxfpHWXfJrBe2DZJrj6NWR+lI5VEflytx6U8+rV8MNFrQfD0HoArn8HU9fsa3eu0MmDFZBRyVPxp5l4+xV9I74HouxPn8SLCeDKGExPgWHc2DdYARPTcvxOopvMiTfA9ghHB9n3YLRg8FzNZCqS3A4AMJs+NW8QBrJCty8omjwfYL4gzOQAv/6lksefciYvDGBC9K7daFv70wOAcMyTiSfIpI4Uci0MADBzdsgGcZNHCGvy7Im3isnFAeYDokTy0gA5iJYNniGSz+8oldwdAMDMmWF6m9fmQRhmc/wDUn2dZJPH3GztDgBgZvRsHsQUMO0oR6qvk8njKbfbugcoBFHp0D0m/wfW1ExCCBJCsOsL2W5++LF/IbHVAk05AO7bOtddyku7FLPMuRbfe2t+CvuDl/hmcO77/Mf2N6TgrX4E/h5BAAAAAElFTkSuQmCC&quot;); text-align: center; background-color: transparent; overflow: hidden; user-select: none; position: absolute; z-index: 963540817; bottom: 280px; border-radius: 10px; zoom: 0.6 !important; transform: rotateZ(0deg);"></div>
<ul id="jiexi_ul" style="display: none;">
<li title="接口地址：（https://jx.renrenmi.cc/?url=）" style="background:green;">
<span>
<a1 style="color:darkgreen"></a1>
<a2 style="display:none">5</a2>
<a3 style="display:none"></a3>
<a4>人人</a4></span></li>
<li title="接口地址：（https://jx.renrenmi.cc/?url=）">
<span style=" width:104px;">
<a1 style="color:darkgreen"></a1>
<a2 style="display:none">5</a2>
<a3 style="display:none"></a3>
<a4>人人人</a4></span>
</li>
<li title="接口地址：（https://jx.renrenmi.cc/?url=）">
<span style=" width:104px;">
<a1 style="color:darkgreen"></a1>
<a2 style="display:none">5</a2>
<a3 style="display:none"></a3>
<a4>人人人</a4></span>
</li>
<li title="接口地址：（https://jx.renrenmi.cc/?url=）">
<span style=" width:104px;">
<a1 style="color:darkgreen"></a1>
<a2 style="display:none">5</a2>
<a3 style="display:none"></a3>
<a4>人人人</a4></span>
</li>
<li title="接口地址：（https://jx.renrenmi.cc/?url=）">
<span style=" width:104px;">
<a1 style="color:darkgreen"></a1>
<a2 style="display:none">5</a2>
<a3 style="display:none"></a3>
<a4>人人人</a4></span>
</li>
<li title="接口地址：（https://jx.renrenmi.cc/?url=）">
<span style="width:104px;">
<a1 style="color:darkgreen"></a1>
<a2 style="display:none">5</a2>
<a3 style="display:none"></a3>
<a4>人人人</a4></span>
</li>
</ul>
</div>
    
</div>  
</body>
</html>

var text = '{ "sites" : [' +
	'{ "name":"Runoob" , "url":"www.runoob.com" },' +
	'{ "name":"Google" , "url":"www.google.com" },' +
	'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
obj = JSON.parse(text); 
var ul=document.createElement("ul"); ul.id="myul";
document.body.append(ul);
for(var i=0;i<obj.sites.length;i++){
	var li=document.createElement("li");
	li.title=obj.sites[i].url;
	li.innerText=obj.sites[i].name;
	 ul.append(li);
	 }
	

var style=document.createElement("style");
style.type="text/css";document.body.append(style); 
style.innerText=(function () { /*
#jiexi_ul{ 
width:250px;
}
#jiexi_ul li{
color:white; 
text-decoration:none;
width:105px; 
height:30px; 
background:#555; 
margin-top:5px; 
margin-left:0px;
margin-right:10px; 
line-height:30px; 
text-align:center;
font-family:"微软雅黑";
font-size:14px; 
border:1px solid black; 
list-style:none;padding:0; 
float:left;
}
*/}).toString().split('\n').slice(1, -1).join('')

完整测试代码

//创建按钮图标
var mydiv=document.createElement("div");
mydiv.title="点击展开解析接口";
mydiv.id="jxbhttps";
mydiv.style='top: 119px; left: 25px; font-size: 15px; width: 35px; height: 35px; line-height: 35px; background-size: 100% 100%; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAADyUlEQVRYhc2UbWhbVRjHf7dpZzXGBemmU2FtM1uEZssoOOhmXbsXXLPVidqydTiZzQfpGPhlH2T95GKKzDGwijgdTJlbohXUdU5aypbqHDIYKih1rg4VphtoJY1U23L8cM7NufcmWe6tRX3gcF7+z3Oe33nOuRf+R3YIuAAI4DfgA+BupTUAo0oTauycrwaOAuOWdau+B1hyo+TOIEFoi+CZMYFh5GtzaIZhTKjD5NkFQHx5GZERiJ8nVZCvUhB9WQAifkBqGYHY2yt1c95/WCcZ/0Wvm23oEx0D/F6oEocA8WZKB8V6LFVAbmJqofriAM7k1paDMBacNBOXyW7hVYD3BzTRiogaXBkCIKzm5z+Fy2PFblLb0dchYEB0HWSzcm3Hk0r0L41ya+fjEsDf9hCJiT58lQwktXPj/cp5dopYD/j9cvr5+dLJrZYegXePy3FNrVqcvAQdz6ao6tpexr7BjwCo3gDAZ6PSp2E5hOrlOFcN4MhhbwAAty0sIrTvPVaWm6zcJgHOaf3RDtk3t8rebfmtFuuBjW06HoBgOKdrgJr1ALzwnA5uCMsqmKXzUv6d3ZARcLBfXl82C6++pMR7owUAAovgriYbaaQRWtfrTT8+5R7AtOvXYPg0dLTDQBII1EN4WwEAgJVdgD5pTa2+/+/H5YOiKoIbM7+C2jvgkU1m7Cpo67f52QHq5HGtJ93ZLfv0iFoItbgCyFnFIli6GdbEof018C8uAjALLK6DqgjpEXliq6XUp0Sk0xtAw3ZYF4e6zXJu2GUNUKl6dcLciXGUv3qVNwCnCeCWcgvA/i1dNgd1wt0xeYcBA5aH7HDmYzX13TEdnre2pNEO4C+HP2bk+MMX9/iY/vYrzgxfpHWXfJrBe2DZJrj6NWR+lI5VEflytx6U8+rV8MNFrQfD0HoArn8HU9fsa3eu0MmDFZBRyVPxp5l4+xV9I74HouxPn8SLCeDKGExPgWHc2DdYARPTcvxOopvMiTfA9ghHB9n3YLRg8FzNZCqS3A4AMJs+NW8QBrJCty8omjwfYL4gzOQAv/6lksefciYvDGBC9K7daFv70wOAcMyTiSfIpI4Uci0MADBzdsgGcZNHCGvy7Im3isnFAeYDokTy0gA5iJYNniGSz+8oldwdAMDMmWF6m9fmQRhmc/wDUn2dZJPH3GztDgBgZvRsHsQUMO0oR6qvk8njKbfbugcoBFHp0D0m/wfW1ExCCBJCsOsL2W5++LF/IbHVAk05AO7bOtddyku7FLPMuRbfe2t+CvuDl/hmcO77/Mf2N6TgrX4E/h5BAAAAAElFTkSuQmCC"); text-align: center; background-color: transparent; overflow: hidden; user-select: none; position: absolute; z-index: 963540817; bottom: 280px; border-radius: 10px; zoom: 0.6 !important; transform: rotateZ(0deg);';
document.body.append(mydiv);
//为按钮图标创建点击脚本
var jiexiscript= document.createElement("script");
jiexiscript.type="text/javascript";
document.head.append(jiexiscript);
jiexiscript.innerHTML=(function(){/*
document.querySelector("#jxbhttps").onclick = function() {
    //alert(document.querySelector("#myul").style.display);
    var jiexi_ul=document.querySelector("#myul");
    if (jiexi_ul.style.display == "none") {
        var top = document.querySelector("#jxbhttps").offsetTop;
        var left = document.querySelector("#jxbhttps").offsetLeft + document.querySelector("#jxbhttps").offsetWidth + 3;
        jiexi_ul.style = "display:black; position:fixed;top: 90px;left:50px;";
    } else if (jiexi_ul.style.display == "black" || jiexi_ul.style.display == "") {
        jiexi_ul.style = "display:none";
    }
};
*/}).toString().split('\n').slice(1, -1).join('\n');

//ul li 列表json 数据
var text = '{ "sites" : [' +
	'{ "name":"Runoob" , "url":"www.runoob.com" },' +
	'{ "name":"Google" , "url":"www.google.com" },' +
	'{ "name":"Bing" , "url":"www.bing.com" },' +
	'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
var obj = JSON.parse(text);
//创建ul li 列表
var ul=document.createElement("ul");
ul.id="myul";
ul.style="display:none";
document.body.append(ul);
for(var i=0;i<obj.sites.length;i++){
	var li=document.createElement("li");
	li.title=obj.sites[i].url;
	li.innerText=obj.sites[i].name;
	 ul.append(li);
	 }
//为ul li 添加CSS样式
var style=document.createElement("style");
style.type="text/css";
document.head.append(style);
style.innerHTML=(function () { /*
#myul{
width:250px;
position:fixed;
z-index:963540817
}
#myul li{
color:white;
text-decoration:none;
width:105px;
height:30px;
background:#555;
margin-top:5px;
margin-left:0px;
margin-right:10px;
line-height:30px;
text-align:center;
font-family:"微软雅黑";
font-size:14px;
border:1px solid black;
list-style:none;padding:0;
float:left;
}
*/}).toString().split('\n').slice(1, -1).join('\n');
//为ul li 添加点击事件脚本
var script= document.createElement("script");
script.type="text/javascript";
document.head.append(script);
script.innerHTML=(function(){/*
var ul = document.querySelector("#myul");
　　ul.onclick = function (e) {
　　e = e || window.event; //这一行及下一行是为兼容IE8及以下版本
　　var target = e.target || e.srcElement;
　　if (target.tagName.toLowerCase() === "li") {
　　　　var li = this.querySelectorAll("li");
　　　　index = Array.prototype.indexOf.call(li, target);
　　　　alert(target.innerHTML + index + "\n" + target.title);
　　}
};
*/}).toString().split('\n').slice(1, -1).join('\n');

https://blog.csdn.net/business122/article/details/7973638

wpyok168
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
014去掉li前面得项目符号(小圆点)
Hyc_cheng的博客
02-07 713
语法： list-style:none;
CSS去掉li前的项目符号
KeeeepReal的博客
09-02 720
list-style: none;
html去除文章符号,HTML中怎么去除列表项符号
weixin_35779001的博客
07-01 1328
在HTML中，可以通过在列表标签(ul、ol)中，使用style属性添加“list-style-type:none;”样式来去除列表项符号。list-style-type属性可设置列表项标记的类型，当值设置为“none”时可去除列表项标记。本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。在 HTML中，有两种类型的列表：无序列表 ul - 列表项...
取消列表的项目符号
BambooStrip的博客
08-02 1690
css列表样式
Html中去除li前面的小黑点
weixin_72837086的博客
09-03 2728
在相关的页面找到head部分写入下面的代码list-style:none;
HTML 无序列表项目符号使用图片的CSS写法
09-28
本篇文章将介绍如何通过CSS来实现这一需求，以展示一本畅销书列表，每一本书的前面都用其封面缩略图作为项目符号。 首先，我们创建一个基本的HTML结构，包含一个标题和一个无序列表。在列表中，我们将每一本书作为...
CSS样式表定义标签li前面样式
09-27
定义LI前面的小点样式 view plaincopy to clipboardprint?语法： list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-...
html入门教程 html标记符号快速掌握
09-28
`<li>`标签用于列表项，`<ol>`的`start`属性定义起始序号，`<ul>`的`type`属性设置项目符号样式。`<dt>`和`<dd>`组合用于创建定义列表，前者定义术语，后者给出解释。 表格是HTML中重要的一部分，用`<table>`定义，...
HTML中Li标签的使用示例
09-28
主要介绍了HTML中Li标签的使用示例,主要用来让文章标题和日期等左右对齐,需要的朋友可以参考下
li标签前面添加图标
12-02
html li前添加图标,通过三种方法添加，第一种是：list-style-image,第二种是：background的方式实现，第三种：通过字体库引入图标
新知识：去掉li前面的项目符号（小圆点）
m0_67545415的博客
09-17 774
1
html怎么隐藏项目符号,CSS-如何隐藏侧边栏列表中的项目符号？
weixin_33291684的博客
06-04 979
这是一个WordPress网站，生成了类/ ID，我不能只是添加一个类。是的，我有萤火虫...但是对于这是来自BuddyPress还是...我感到非常困惑和困惑，以至于我只是在寻求找到我要说的清单的ID或类方面寻求帮助 -style-type：无；我需要在常规联系区域中使用带有项目符号的UL，但不在侧边栏或组类别中使用。 [http://ratest4.com/art-categories/]这是...
html怎么去除左边的圆点,在Html的CSS中去除标签前面小黑点以及ul、LI部分属性方法...
weixin_27977279的博客
05-30 5892
div是很多人做网站都会用到的，但在显示默认效果时前面总是会有一个小黑点，这个效果很多人不想要，但又不知到如何去除，现在我们可以用以下方法来清除默认黑点。1、在CSS中写入代码。找到相关性的CSS，在.li和.ul下写入list-sytle:none;当然有的会这样来写list-style-type:none。2、在相关的页面看下实现的代码.u li{ list-style:none; }安徽山东...
web无序列表去掉点_HTML怎样消除无序列表列表前的黑点 请指教
weixin_39876282的博客
12-21 6021
展开全部通过给li标签copy添加代码”list-style:none“实现。实例演示bai如下：1、设计html页面du，页面上有一些LI的标签zhi，代码如dao下：2、添加一些css代码:3、此时的页面展示内容如下：4、修改css样式，给li添加关键代码如下：5、刷新页面，此时的展示效果如下：扩展资料：list-style属性的更多信息：1、定义和用法：list-style 简写属性在一个声...
HTML 列表去掉前边点和序号
热门推荐
08-02 1万+
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- ol 有序列表 o oder 有序的 l list 列表 --> <...
html去掉无序列表前面的符号,css基础 去除ul,li无序列表前面的符号
weixin_39796149的博客
06-04 4650
镇场诗：清心感悟智慧语，不着世间名与利。学水处下纳百川，舍尽贡高我慢意。学有小成返哺根，愿铸一良心博客。诚心于此写经验，愿见文者得启发。——————————————————————————————————————————code:.specialUl li{list-style:none;/*去除无序列表前面的符号*/}论语道德经楞严经北斗经南华经大洞经result:———————————————...
html表单中文字前黑点怎么弄,如何将word文档中标题前的黑点去掉
weixin_33547353的博客
06-24 2088
如何将word文档中标题前的黑点去掉今天给大家介绍一下如何将word文档中标题前的黑点去掉的具体操作步骤。1. 打开电脑，进入桌面，找到Word软件，双击打开：2. 进入页面后，点击左上角的文档图标，然后在打开的菜单中选择【打开】，然后将想要去掉标题前黑点的Word文档选择，打开：3. 如图，在打开的文档中，可以看到标题前的黑点，先将文档内容全部选中，右键，在打开的菜单中，点击【段落】选项：4. ...
html中如何去除编号点,如何去掉WORD自动编号后的小点。
weixin_39866487的博客
06-22 695
自动编号与后2113面语句有很大5261空格，于是调整文4102字位置(1653选择所需要改版动的部分，点“格式权”-“项目符号和编号”-点你需要的编号类型-“自定义”-指定“编号位置”和“文字位置”的缩进值,确定)。发现10以后的编号仍然有这个问题，于是又到处查找，终于找到原因。在Word中，如果自动编号到10以后时，编号与字符之间自动出现空格，可通过以下方式修改：“格式”--“制表位”--找到...
.nav li之后的字体前面出现小黑点
最新发布
06-01
这个小黑点是CSS中的列表标记符号，通常用于无序列表（如ul、ol等）。如果你不想要这个小黑点，可以使用CSS的list-style属性来移除它，例如： ``` .nav li { list-style: none; } ``` 这样就可以将小黑点移除了。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值