如何在網站的不同位置更改背景顏色？

Question

（對不起，我的英語不好）

我想創建一個主菜單背景為白色的網站，但是例如，當我進入登錄區域時，背景顏色變為黑色，我該如何做？

PS：我是HTML新手

Answer 1

如果您創建不同的頁面，並且每個頁面都有其自己的菜單，則可以進行內聯樣式ex：在登錄頁面的主頁中

但是，如果您的項目中有一個菜單，則可以使用javascript獲取窗口的網址，然后檢查它是否在家里，使背景為白色，否則在登錄頁面中使背景為黑色，例如：var menu = document。 getElementById（“ menu”）

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

您應該將網址寫為true

Answer 2

一些指針。

首先，使用很多DIV（或section ， aside等）。 DIV是您將其他HTML代碼放入其中的包裝器/容器。 您可以設置該代碼容器的樣式，使其具有不同的背景顏色（或不同的填充或位置，等等）。 大多數初學者會犯這樣的錯誤：使用的容器太少。 （Section和Asides與DIV的工作原理相同，但搜索引擎將其區別對待。）

接下來，發現javascript（及其易於使用的表弟jQuery）。 如果您想即時更改樣式，則使用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');
});

不是那么復雜，是嗎？

Answer 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顏色代碼選擇所需的顏色，但是顏色也可以表示為十六進制 （＃ff0000）， HSL等。

可在此處獲得更多信息： www.w3schools.com/html/html顏色

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