CSS webpage layout tutorial 10: Label-based horizontal navigation with the current logo

The current identifier indicates that the user clicks on the channel or column. The label of the column shows a different color from other labels to indicate the user's location.
This design is quite simple in website design and a classic way to improve website availability. When a website is used by users, the user's browsing process should be taken into account. Poor webpage design focuses only on the page itself rather than the user experience. A good design should be user-centered, such a simple identifier of the current channel is often ignored by many designers. users need to know their location and where they can go. by identifying the current location, it helps users to recognize their locations on the website and guide users to access other channels.
From Code To make a channel a current channel, the channel must have a background color or text different from other channels, however, we currently set the background for all the labels. Therefore, the first task is to design an exception, that is, the current channel, such a special channel, we have made some modifications to tags in HTML:

<Ul id = "nav">
<Li id = "current"> <a href = "/index. asp"> homepage </a> </LI>
<Li> <a href = "/sort/list_4.html"> Div + CSS tutorial </a> </LI>
<Li> <a href = "/sort/list_5.html"> Common Code </a> </LI>
<Li> <a href = "/sort/list_6.html"> crystal icon </a> </LI>
<Li> <a href = "/sort/list_7.html"> slides </a> </LI>
<Li> <a href = "/sort/list_10.html"> Software Download </a> </LI>
<Li> <a href = "/css2/"> css2.0 practical manual </a> </LI>
</Ul>

We added a new id named current to the first a tag. Let's continue to read the CSS section and design the color for the current ID first:

# Nav Li a # current {background-color: # 2788da; color: # FFF ;}

Preview the result. The background color of the homepage has become blue.<Br/> <style ># nav Li {float: Left ;}# nav Li a {color: #000000; text-Decoration: none; padding-top: 4px; display: block; width: 120px; Height: 22px; text-align: center; Background-color: # ececec; margin-left: 2px ;}# nav Li: hover {background-color: # bbbbbb; color: # ffffff ;}# nav Li a # current {background-color: # 2788da; color: # FFF ;} </style> <ul id = "nav"> <li> homepage </LI> <li> Div + CSS tutorial </LI> <li> Common Code </LI> <li> crystal icons </LI> <li> slides </LI> <li> Software Download </LI> <li> css2.0 utility manual </LI> </ul> <p>
[Ctrl + A select all Note: If you need to introduce external JS, You need to refresh it to execute]

Continue to improve our navigation, and add a horizontal line under the page menu

# Nav {Height: 26px; border-bottom: 2px solid # 2788da ;}

We set the height of the UL label and added a 2px solid line to the bottom of the label. The preview effect is similar to the label navigation we originally imagined, return to the definition of the nav element. Border-bottom is a newly added attribute, which refers to the setting of the Bottom Border of the element, its parameters refer to the 2px width, single solid line style, and the color value is # 2788da. With this setting, our ul tag has a 2px colored bottom border.Xmlns = "http://www.w3.org/1999/xhtml">

• Home Page
• Div + CSS tutorial
• Common Code
• Crystal icon
• Slides
• Software Download
• Css2.0 Practical Manual