How does CSS implement the menu effects of sliding doors on the current page?

Current page-for example, if the current page is a homepage, the color of the homepage on the navigation bar is different from that of other topics, which is used to give a clear indication to the viewer.
Next, let's take a look at the specific practice. The basic implementation of a menu is not much different from that of a general CSS menu. We will focus on how to implement the current page.
Set menu has five columns: home, about, products, services, contact, respectively for each column an ID, M1-M5, CSS can be written as follows:
CSS source code:

The code is as follows:

Copy code

# Home # nav li # m1, # About # nav li # m2, # Products # nav li # m3, # Services # nav li # m4, # Contact # nav li # m5 { Color: # FFF; Background: # DC4E1B url(navbg.gif) no-repeat; } Xhtml source code: <Ul id = "nav"> <Li id = "m1"> <a href = "index.html"> Home </a> </li> <Li id = "m2"> <a href = "about.html"> About </a> </li> <Li id = "m3"> <a href = "products.html"> Products </a> </li> <Li id = "m4"> <a href = "services.html"> Services </a> </li> <Li id = "m5"> <a href = "contact.html"> Contact </a> </li> </Ul>

Then, separate the bady labels for each page with an independent ID. For example, the homepage ID is home, and the rest is similar.
The advantage of this approach is that the menus on each page are the same, which makes it easy to modify and include dynamic pages.