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

Question

(sorry for my bad english)

I would like to create a website where the main menu background was white, but when I went to the login area for example, the background color became black, how do I do this

PS: i`m new to HTML

Answer 1

if you make different pages and every page has it's own menu you can make inline style ex: in home page in login page

but if you have one menu in your project you can you can take the url of window by javascript and check on it if you are in home make background white and else if you are in login page make background black ex: var menu = document.getElementById("menu")

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

you should write url true

Answer 2

A few pointers.

First, use a lot of DIVs (or section , aside , etc). DIVs are wrappers/containers that you put other HTML code into. You can style that container-full-of-code to have a different background color (or different padding, or different position, etc). Most beginners make the mistake of using too few such containers. (Sections and Asides work the same as DIVs, but are treated differently by search engines.)

Next, discover javascript (and its easier-to-use cousin, jQuery). If you want styling to change on-the-fly , that's javascript.

jQuery is almost like another language, but it's actually a javascript library that gets turned into pure javascript at run-time - but you needn't worry about the details. Just use it - many of us think it is a huge improvement on javascript, especially for beginners. Note that it is not a one-or-the-other decision - you can mix/match pure javascript with jQuery code. Do an hour tutorial on jQuery, and then repeat the tutorial ten times (until you have it mastered).

So, to your question.

You will put the main menu in a DIV - in fact, the whole menu can be made up of DIVs inside DIVs - but you will set the outer DIV background color to white.

When the login screen is presented (that sounds like javascript/jQuery in action to me...) you will use that same code to change the main menu background color. With jQuery, the code might look something like this:

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

Not so complicated, is it?

Answer 3

Welcome to Stack Overflow! You will want to learn CSS and HTML a little better to help make your site look more user-friendly. This is how you cam change the background color on a web page (using inline CSS), add the following code within your tags:

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

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

    </style>

You will need to identify your chosen (login) element in your CSS to enable you to make changes to it.

The example above uses rgb color codes to select the desired color, however colors can also be represented as Hex (#ff0000), HSL and more.

More information is available here: www.w3schools.com/html/htmlColors

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