Question

我创建了一个登陆页面，该页面的导航栏为黑色，文本为白色，但是我希望导航栏的背景为白色，网站的其余页面为黑色。 / p>

有人可以建议我如何更改其余页面的颜色吗？

我读过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;
    }
}

Answer 1

是的。您可以使用所使用的CSS样式表（HTML代码中的CSS）；对于该特定页面（登录页面），您只需将其内联到HTML元素中，它将覆盖CSS。

赞：

所有页面的CSS代码

.nav {background:white;color:#000000;}

仅在目标网页上内嵌CSS代码

<nav style="background:black;color:#FFFFFF;">

Answer 2

我当然不建议前两个答案，因为制作两个css文件是不可取的，并且在SEO的角度来看，内联样式肯定不是推荐

我建议您将类添加到 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>

更改网站中每个页面的导航栏的背景颜色和文本颜色

2 个答案: