The current identification refers to the user clicks on the channel or column, the label of the column presents a different color with the other labels to prompt the user location.
This design is a fairly simple and classic way to improve usability in a Web site design. The Web site allows users to use the thinking process that should be taken into account when browsing, bad web design only and the page itself without considering the user experience, excellent design should be user-centric, such a simple current channel identification is often a lot of designers ignore the content, users need to know their own position, And knowing where to go, by identifying the current location, helps users identify where they are in the site and directs users to other channels.
Continue writing from the code in the previous article, in order for a channel to be a current channel, the channel must have a background color or text that is not the same as the other channels, but at the moment we are setting the background for all a tags, so the first task is to design an exception, the current channel, On such a special channel, we make some changes to the tags in HTML:
<ul id= "NAV" >
<li id= "Current" ><a href= "http://www.jb51.net/index.asp" > Home </a></li>
<li><a href= "http://www.jb51.net/Sort/List_4.html" >div+css tutorials </a></li>
<li><a href= "http://www.jb51.net/Sort/List_5.html" > Common code </a></li>
<li><a href= "http://www.jb51.net/Sort/List_6.html" > Crystal icon </a></li>
<li><a href= "http://www.jb51.net/Sort/List_7.html" > Slide picture </a></li>
<li><a href= "http://www.jb51.net/Sort/List_10.html" > software download </a></li>
<li><a href= "http://www.jb51.net/css2/" >css2.0 Practical manual </a></li>
</ul>
We added a new ID to the first a tag, called current, and continued to look at the CSS section for the first color design for current ID:
#nav Li a#current {background-color: #2788da; color: #fff;}
Preview the effect, the background color of the home page has become blue
<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 a:hover {background-color: #bbbbbb; color: #ffffff;} #nav Li a#current {background-color: #2788da; color: #fff;} </style> <ul id= "nav" > <li> home </li> <li>div+css tutorial </li> <li> Common generation Code </li> <li> Crystal icon </li> <li> slide picture </li> <li> software download </li> <li>c SS2.0 Practical Manual </li> </ul>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Continue to refine our navigation by adding a horizontal line under the page menu
#nav {height:26px; border-bottom:2px solid #2788da;}
We have set a height for the UL label, and give it the bottom of the 2px solid line, preview the effect again, and we originally imagined the tag-type navigation has been very similar, back to the definition of NAV elements, Border-bottom is our new added attribute, refers to the elements of the bottom of the box settings, Its parameters refer to the 2px width, solid line style, color value of #2788da, through this setting, our UL tag has 2px with the color of the bottom box.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <title></title> <meta http-equiv = "Content-type" content= "text/html"; charset=gb2312 "/> <style> #nav {height:26px; border-bottom:2px solid #2788da; list-style:none;} #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 a:hover {background-color: #bbbbbb; color: #ffffff;} #nav Li a#current {background-color: #2788da; color: #fff;} </style> </pead> <body> <ul id= "nav" > <li> home </li> <li>div+css Tutorials &L t;/li> <li> Common code </li> <li> Crystal icon </li> <li> slide picture </li> <li> software download </li> <li>css2.0 Practical Manual </li> </ul> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Simple tabbed navigation through a set of CSS design, even if completed, whenever a channel to change the page, just want to move id= "current" in the existing channel of the A element, you can complete the color switch. Do not need to write the color properties of the vulgar, but also need to modify into the CSS can be easily modified to complete.
For this example, the problem of applying CSS attribute inheritance between elements in XHTML.
What is inheritance? Inheritance means that each element can have multiple styles, and in general, he adheres to the outermost style design, and if he encounters his own style design, he inherits the outer style and takes precedence over his own style.
If there is a conflict between the inner and outer styles, the inner-layer style effect is ultimately displayed.
In this case, a new property is also exposed: List-style:none in the style code for the preview.
By default, the form of the Li list in UL is preceded by dots, which can be seen from previous chapters. The meaning of this sentence is to remove the front default dot.
