更改网站中每个页面的导航栏的背景颜色和文本颜色
[英]Changing the background color and text color of the navbar for every page in a website
问题描述
我创建了一个登陆页面，导航栏的背景为黑色，文本为白色，但我希望导航栏的背景为白色，网站页面的 rest 的文本为黑色。
谁能建议我如何更改剩余页面的颜色？
我读过 jQuery 可以在这种情况下提供帮助，但我没有使用 jQuery 的经验。
HTML：
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="menu">
<ul>
<li><a href="page1.html">Page 1</a></li>
<li><a href="page2.html">Page 2</a></li>
<li><a href="page3.html">Page 3</a></li>
</ul>
</div>
</nav>
</header>
</div>
CSS：
nav {
position: fixed;
width: 100%;
line-height: 60px;
animation: left-in 0.5s ease-in forwards;
animation-delay: 0%;
opacity: 0;
}
nav ul {
line-height: 15px;
list-style: none;
background: black;
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: white
}
nav ul li {
display: inline-block;
padding: 16px 20px;;
}
nav ul li a {
text-decoration: none;
color: white;
font-size: 16px;
font-family: 'Roboto Slab', serif;
}
a:hover {
color: orange;
}
.menu-icon {
line-height: 30px;
width: 100%;
background: black;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
@keyframes fade-in
{
from
{
opacity: 0;
}
to
{
opacity: 1;
}
}
@keyframes left-in
{
from
{
transform: translateX(-200px);
opacity: 0;
}
to
{
transform: translateX(0px);
opacity: 1;
}
}
2 个解决方案
解决方案1
1 2020-09-21 18:33:18
是的。 您可以使用您正在使用的 CSS 样式表（HTML 代码中的 CSS）； 对于该特定页面（着陆页），您只需将其内联到 HTML 元素中，它将覆盖 CSS。
像这样：
CSS 所有页面的代码
.nav {background:white;color:#000000;}
仅在着陆页上嵌入 CSS 代码
<nav style="background:black;color:#FFFFFF;">
解决方案2
-1 已采纳 2020-09-21 18:36:53
我肯定不推荐前两个答案，因为制作两个css文件是不可取的，而且从SEO的角度来看，肯定不推荐内联样式
我建议您将 class 添加到仅为内页添加的BODY标记，将您的代码更改为如下所示：
<style>
nav {
position: fixed;
width: 100%;
line-height: 60px;
animation: left-in 0.5s ease-in forwards;
animation-delay: 0%;
opacity: 0;
}
nav ul {
line-height: 15px;
list-style: none;
background: black;
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
.inside nav ul {
color: #000000;
background: #fff;
}
nav ul li {
display: inline-block;
padding: 16px 20px;;
}
nav ul li a {
text-decoration: none;
color: white;
font-size: 16px;
font-family: 'Roboto Slab', serif;
}
a:hover {
color: orange;
}
.menu-icon {
line-height: 30px;
width: 100%;
background: black;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes left-in {
from {
transform: translateX(-200px);
opacity: 0;
}
to {
transform: translateX(0px);
opacity: 1;
}
}
</style>
<body class="inside"> <!-- or replace it with (home) for your homepage or no class needed for homepage -->
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="menu">
<ul>
<li><a href="page1.html">About Me</a></li>
<li><a href="page2.html">Projects</a></li>
<li><a href="page3.html">Publications</a></li>
</ul>
</div>
</nav>
</header>
</div>
</body>
更改导航栏的背景颜色
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.