如何更改导航ul li的颜色？
要更改导航ul li的颜色，可以使用CSS来实现。以下是一个示例的代码：
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>这段代码使用了CSS的样式来改变导航ul li的颜色。ul元素设置了背景颜色为#333，li元素设置为浮动左对齐。a元素设置了显示为块级元素，并且文字颜色为白色，有鼠标悬停效果时背景颜色变为#111。
对于更改导航的颜色，你可以根据实际需求修改CSS代码中的颜色数值，来实现不同的效果。
相关·内容
4回答
我的页面中有一个导航栏，如下所示： <nav role="navigation" class="nav navbar-default"> </button> <div class="collapse navbar-co
浏览 125提问于2016-09-14得票数 3
回答已采纳
1回答
我正在尝试更改特定HTML组件的背景颜色和文本颜色。 有3个导航栏。我正在尝试为所有导航栏设置默认颜色，但也会更改1个导航栏的特定颜色。但是我想要将其中一个特定导航栏的文本颜色更改为#FFFFFF，并将背景颜色更改为。将背景颜色更改为##1177d1，但文本
浏览 17提问于2020-09-17得票数 2
回答已采纳
我有一个导航条，需要显示100%的屏幕。 <div class="nav"> <img src="./logo.png"> <ul>
<li><a href="#" id="active">
浏览 2提问于2014-10-02得票数 0
回答已采纳
以前，我可以让我的子菜单显示时显示:没有被删除。但是当我在菜单项上悬停时，我希望子菜单显示出来。谢谢。#navigation ul li a:hover { display: block;position: absolute;left: 0px;border: none;
z-index: 12
浏览 1提问于2014-01-22得票数 0
回答已采纳
1回答
我想高亮(改变颜色)我的导航链接分别显示在我的幻灯片中的每一张图片。
(例如:三个不同的幻灯片图片，应该分别改变每个导航链接的颜色。如果显示图片"A“，导航链接"1”应将其颜色更改为黑色--如果显示图片"B“，则应将导航链接"2”更改为黑色，导航链接"1“的<e
浏览 1提问于2015-02-04得票数 0
回答已采纳
我在.navContainer css div中有一个导航菜单。单击时，ul标记文本中的一个li标记会改变颜色。但是，我想知道如何使用jquery保持当前所选导航项的颜色，并更改当前悬停项#d49a9a的颜色，直到用户单击并将当前所选导航项的颜色更改为#c2c0c0。
你能告诉我怎么做吗？到目前为止我的
浏览 2提问于2011-09-07得票数 1
回答已采纳
1回答
我正在浏览Wordpress主题Bootstrap 2.0.1，它使用Twitter的引导程序v2.3.2，并且我试图了解如何在打开折叠导航中的导航项时更改下拉文本项的颜色。我知道如何通过variables.less文件更改nav下拉项目的文本/背景色(@navbarText、@navbarLinkColor、@navbarLinkColorHover等)
使我沮丧的是在以下情况下改变文本
浏览 0提问于2013-06-18得票数 0
我想用MaterializeCSS更改导航栏中的悬停bg颜色，默认效果只是使突出显示更暗，我需要将该突出显示更改为另一种颜色，如白色。提前谢谢你
<!class="brand-log
浏览 4提问于2016-01-27得票数 9
回答已采纳
2回答
因此，我有下面的React组件，它在我的例子中充当导航栏。每当用户将鼠标悬停在导航栏项目上时，它必须将其颜色更改为指定的颜色。目前，导航栏项目由2个项目组成:图标(SVG)和描述它是什么的文本。因此，将鼠标悬停在组件上必须同时更改文本和图标的颜色。import { ReactComponent as DashboardIcon } from "..&
浏览 2提问于2020-03-21得票数 0
使用Tab键切换导航选项卡时，如何将黑匣子阴影颜色更改为另一种颜色？守则： <li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a
浏览 2提问于2022-12-01得票数 0
回答已采纳
我想问你如何在bootstrap 3中只更改一个导航‘按钮’的颜色，例如，我想只格式化新闻部分(男性它不同)如何做，以改变bg颜色，悬停等，只有这个按钮(标签元素)，其他将继续使用主样式？<nav> <li><a href="/news">news<&
浏览 0提问于2015-09-15得票数 0
基本上，我有由无序列表组成的简单导航，我想用JQuery更改当前鼠标编辑的列表项的字体颜色，但我遇到了问题，因为我的JQuery脚本正在更改所有列表项的字体颜色，而且我希望更改当前鼠标编辑的列表项的字体颜色我试图获取当前鼠标编辑的列表项，但我不知道如何实现它，以便我的JQuery只更改
浏览 0提问于2014-06-04得票数 1
回答已采纳
我有一个问题，应用主题导航栏使用Jquery移动。无论我应用什么主题，导航栏都设置为默认主题。下面是附加的代码 <ul><li><a href="#" class="ui-btn-active ui-corner-l
浏览 0提问于2012-03-12得票数 3
回答已采纳
4回答
更改引导中活动类的颜色
、、、
我试图更改html代码中活动类的颜色。我在创建导航侧边栏。这是我的密码： <ul class="nav nav-pills nav-stacked nav-static"> <!--stacked untuk jadi vertical -->
<li class=&quo
浏览 1提问于2015-07-14得票数 9
回答已采纳
我想知道我怎样才能改变导航条文本的颜色，以及当用户悬停在它上面的时候？，我知道我必须使用CSS。但是，我不确定我必须从html中选择哪些类。这是我的。此外，我在下面列出了导航栏的HTM
浏览 5提问于2017-03-04得票数 1
2回答
我有两个导航按钮我需要将一个导航按钮的背景颜色更改为橙色，并保持不变，直到另一个按钮被单击，我尝试了一些javascript代码，但没有研究如何以一种简单的方式实现它。<div> <li><a href="register.php" >Job Seeker<&#
浏览 1提问于2017-03-17得票数 0
2回答
当您将鼠标悬停在subnav菜单文本上时，我遇到了更改颜色的问题。我正在尝试构建的是一个导航菜单，它有一个子导航。subnav链接的悬停状态会更改背景颜色和文本颜色。我还没能让它工作，目前只有滚动时的背景变化，而不是文本。
浏览 1提问于2013-12-30得票数 0
5回答
我试图使这个列表的列表元素完全宽度。它们上面有垫子，当你悬停在上面时，填充物是黄色的。;.footer-navigation a:hover { color: #ffffff;}
<ulclass="footer-nav
浏览 3提问于2017-02-13得票数 2
回答已采纳
我正在尝试理解在我的导航栏中data-toggle="dropdown“到底做了什么，它的主要用途似乎是用于触摸屏界面，这样当点击导航链接时，菜单就会保持打开状态，而不是悬停时的菜单。(如果我错了，请纠正我)根据我的基本知识，它会将链接更改为活动链接？？
因此，根据下面的代码，当我单击导航栏链接时，它保持突出显示，我如何更改此突出显示的颜色？重要的’行，
浏览 0提问于2017-12-18得票数 0
我有一个导航仪和一个辅助导航仪，这两个都一直在展示...但我想要发生的是，当你在主导航中滚动“文件夹”时…我希望“辅助导航”亮起，例如应用一个新的类(具有更明显的字体颜色)…请问如何做到这一点？(当你弹出"portfolio“时，字体颜色会在辅助导航中恢复正常) <li</em
浏览 0提问于2012-01-15得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
