Use CSS to mark the effect of the current page on the webpage navigation bar

[Document of the fire School of building site] the current page-for example, if the current page is the homepage, the color of the homepage on the navigation bar is different from that on 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:

# Home # nav li # m1,
# About # nav li # m2,
# Products # nav li # m3,
# Services # nav li # m4,
# Contact # nav li # m5 a {color: # FFF; background: # DC4E1B url(navbg.gif) no-repeat ;}

Xhtml:

<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.