如何更改网站不同位置的背景颜色？答案

【问题标题】：how can I change the background color in different places on the site?如何更改网站不同位置的背景颜色？
【发布时间】：2019-01-16 10:14:36
【问题描述】：

（对不起我的英语不好）

我想创建一个主菜单背景为白色的网站，但是例如我去登录区时，背景颜色变成黑色，我该怎么做

P.S: 我是 HTML 新手

【问题讨论】：

标签： html css background

【解决方案1】：

如果您制作不同的页面并且每个页面都有自己的菜单，您可以制作内联样式，例如：在主页中在登录页面

但是如果您的项目中有一个菜单，您可以通过 javascript 获取窗口的 url 并检查它，如果您在家，则将背景设为白色，否则，如果您在登录页面，则将背景设为黑色前任： var menu = document.getElementById("menu")

if(window.location == "home/")
{
  menu.style.backgroundColor = "white";
}
else if (window.location == "login/") 
{
  menu.style.backgroundColor = "black";
}

你应该写 url true

【讨论】：

【解决方案2】：

一些建议。

首先，使用大量的 DIV（或 section、aside 等）。 DIV 是您将其他 HTML 代码放入其中的包装器/容器。您可以设置该容器完整代码的样式，使其具有不同的背景颜色（或不同的填充，或不同的位置等）。大多数初学者都犯了使用太少这样的容器的错误。 （Sections 和 Asides 的作用与 DIV 相同，但搜索引擎的处理方式不同。）

接下来，发现 javascript（及其更易于使用的表亲 jQuery）。如果你想改变样式on-the-fly，那就是javascript。

jQuery 几乎就像另一种语言，但它实际上是一个 javascript 库，在运行时会变成纯 javascript - 但您不必担心细节。只需使用它——我们中的许多人认为它是对 javascript 的巨大改进，尤其是对于初学者而言。请注意，这不是一个或多个决定 - 您可以将纯 javascript 与 jQuery 代码混合/匹配。做一个小时的 jQuery 教程，然后重复教程十次（直到你掌握它）。

所以，对于你的问题。

您将把主菜单放在一个 DIV 中 - 事实上，整个菜单可以由 DIV 内的 DIV 组成 - 但您会将外部 DIV 背景颜色设置为白色。

当出现登录屏幕时（对我来说这听起来像是 javascript/jQuery 的操作...），您将使用相同的代码来更改主菜单背景颜色。使用 jQuery，代码可能如下所示：

$('#login_button_ID').click(function(){
     $('#login_div_ID').show();
     $('#mainmenu_div_ID').css('background','black');
     // -OR- $('#mainmenu_div_ID').addClass('bgBlack');
});

没那么复杂吧？

【讨论】：

【解决方案3】：

欢迎加入 Stack Overflow！您将需要更好地学习 CSS 和 HTML，以帮助您的网站看起来更加用户友好。这是您更改网页背景颜色的方法（使用内联 CSS），在您的标签中添加以下代码：

 <style>
    body {
        color: rgb(255, 255, 255); /* White Color */
    }

    login {
        color: rgb(0, 0, 0); /* Black Color */
    }

    </style>

您需要在 CSS 中标识您选择的（登录）元素，以便您对其进行更改。

上面的例子使用 rgb 颜色代码来选择所需的颜色，但是颜色也可以表示为 Hex (#ff0000)、HSL 等等。

更多信息请点击此处：www.w3schools.com/html/htmlColors

www.khanacademy.org/computing/computer-programming/html-css/

【讨论】：