html-lists 相关问题

用于HTML中的有序和无序列表及其列表项，以及应用于它们的任何列表样式。

我正在创建一个网站，它将作为我的简历。我的名字居中，下面是我的联系方式。在左边，我将用两行写下我的地址，在右边......

html css html-lists css-float

回答 1 投票 0

HTML/CSS/Javascript：使用 javascript 更改 ul-li:before backround-image

我有一个 div，其中包含一个 ul，其中有一个自定义图像作为标记： HTML：自定义列表我有一个 div，其中包含一个 ul，其中有一个自定义图像作为标记： HTML： <div class="block"> <h2>Custom List</h2> <div class="ul-custom"> <ul> <li>...</li> <li>..</li> <li>...</li> </ul> </div> </div> CSS： .ul-custom { ul { list-style: none; padding-left: 0; margin: 0; li { position: relative; padding-left: 20px; &:before { content: ""; width: 15px; height: 26px; position: absolute; background-image: url("li-red.png"); background-size: contain; background-position: center; background-repeat: no-repeat; left: 0; top: 0; } } } } 我现在的问题是，由于我在 li:before 中有图像，有没有办法更改 javascript 中的 url？我已经搜索过但找不到任何内容，但我确信互联网上已经有关于此的内容。希望有人可以帮助我，提前谢谢！或者是否有一种“更简单”或“更好”的方法将自定义图像放在 li 上，以便可以通过 javascript 进行更改？如果我理解正确的话，你想使用javascript替换背景图像（“li-red.png”）。你应该能够这样做： // Select the li elements const liElements = document.querySelectorAll('.ul-custom li'); // Function to change the background image function changeBackgroundImage(element, newImageUrl) { element.style.backgroundImage = `url("${newImageUrl}")`; } // Example usage: Change the background image of the first li element // Use this function where you want it to be called changeBackgroundImage(liElements[0], 'new-image.png'); 感谢@CBroe，解决方案非常简单。 HTML-代码如上： <div class="block"> <h2>Custom List</h2> <div class="ul-custom"> <ul> <li>...</li> <li>..</li> <li>...</li> </ul> </div> </div> CSS（新）： .ul-custom ul { list-style: none; padding-left: 0; margin: 0; } .ul-custom ul li { position: relative; padding-left: 20px; } .ul-custom ul li:before { content: ""; width: 15px; height: 15px; position: absolute; background-size: contain; background-position: center; background-repeat: no-repeat; left: 0; top: 0; } .ul-custom.marker-1 ul li:before { background-image: url("..."); } .ul-custom.marker-2 ul li:before { background-image: url("..."); } .ul-custom.marker-3 ul li:before { background-image: url("..."); } .ul-custom.marker-4 ul li:before { background-image: url("..."); } Javascript： let ul = document.querySelectorAll(".ul-custom"); ul.forEach((list) => { switch (...) { case "...": list.classList.add("marker-2"); break; case "...": list.classList.add("marker-3"); break; case "...": list.classList.add("marker-4"); break; default: list.classList.add("marker-1"); break; } })

javascript html css html-lists

回答 2 投票 0

ReactJS 中活动链接的背景颜色

我一直在为我的 React 应用程序侧边栏设计样式部分。我拥有的是一个项目列表，每个项目都会路由到不同的页面。所以，现在我想通过...

css reactjs hyperlink routes html-lists

回答 6 投票 0

如何定位内层ul的第一个li？

我正在寻找一些CSS来增加li和li li之间的填充。正如您在图片中看到的，缩进列表太靠近 li 的底部。我可以写什么CSS来阻止这种情况

css html-lists

回答 1 投票 0

如何将列表项目符号点置于中心

我刚刚练习如何在 html 中编码，但我很难找到一种方法将列表的项目符号点放入 HTMLI 中。这是我所做的有序列表的示例。当我尝试你...

html css html-lists bulletedlist

回答 1 投票 0

如何在js中对多个li元素应用样式？

var 按钮 = document.getElementById("enter"); var input = document.getElementById("userinput"); var ul = document.querySelector("ul"); var li = document.querySelector...

javascript html-lists

回答 1 投票 0

制作 HTML 嵌套列表的正确方法？

W3 文档有一个以 DEPRECATED Examples: 为前缀的嵌套列表示例，但他们从未使用未弃用的示例更正它，也没有准确解释该示例的问题所在。那么哪一个...

html html-lists nested-lists

回答 7 投票 0

如何创建多层 HTML 嵌套列表

如何创建这样的嵌套列表？

html html-lists

回答 2 投票 0

如何从 <tr><td><font size="2"><strong> 标签中删除值

我是上周才开始使用 Python 进行网络抓取的新手。我有一个关于如何使用 HTML 标签提取信息的问题，特别是在处理标签时。在网站上“ht...