CSS page layout Getting Started Tutorial 10: Tabbed Landscape Navigation with current identity-Basic tutorial

The current identity refers to the user clicking on the channel or column, the label of the column shows a different color with other labels to indicate where the user is located.
This design is a fairly simple and classic way to improve usability in Web site design. Web site for users should take into account the user's view of the thinking process, poor web design and the page itself and not to consider the user experience, excellent design should be user-centric, such a simple current channel logo is often overlooked by many designers, users need to know their own location, And know where to go, through the identification of the current location, help to let users understand their position in the site, and guide users to other channels.
From the code in the previous article continued to write, in order to make a channel to become a current channel, the channel must have a different background color or text, but currently we are for all the A-label unified setting background, so the first task is to design an exception, that is, the current channel, For such a special channel, we make some changes to the tags in HTML:

<ul id= "NAV" >     <li id= "current" ><a href= "/index.asp" > Home </a></li>     <li> <a href= "/sort/list_4.html" >div+css tutorials </a></li>     <li><a href= "/sort/list_5.html" > Common Code </a></li>     <li><a href= "/sort/list_6.html" > Crystal icons </a></li>     <li><a href= "/sort/list_7.html" > Slideshow pictures </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 to the first a tag, called current, and continued to look at the CSS section to write a color design for current ID:

#nav Li a#current {background-color: #2788da; color: #fff;}

Preview the effect, the background color of the first page has turned blue

<style> #nav li {float:left;} #nav li a {color: #000000; text-decoration:none; padding-top:4px; display:block; Widt h: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 Tutorials </li>     <li > Common code </li>     <li> Crystal icons </li>     <li> slideshow </li> <li>     software Download </li>     <li>css2.0 Practical manual </li>   </ul>

Continue to refine our navigation by adding a horizontal line to the page menu

#nav {height:26px; border-bottom:2px solid #2788da;}

We set the UL label height, and give it the bottom of the 2px solid line, again preview the effect, and we originally imagined the label navigation has been similar, back to the definition of the nav element, Border-bottom is our new addition to a property, refers to the element's bottom border setting, Its parameters refer to the width of the 2px, the solid line style, the color value of #2788da, through such a setting, our UL tag has a 2px color of the bottom border.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> 


Simple tabbed navigation through a set of CSS design even if completed, each time you change a channel page, only need to move the id= "current" to the existing channel in the A element, you can complete the color switch. You do not need to write the color properties of the vulgar, and you need to modify the input can also be easily modified in the CSS to complete.

For this example, the problem of applying CSS property inheritance between elements in XHTML is applied.
What is inheritance? Inheritance refers to each element can have more than one style, under normal circumstances, he adheres to the outermost style design, if encountered on its own style design, he will inherit the outer style based on the preference of their own style.
If there is a conflict between the style of the inner layer and the outer style, the style effect of the inner layer is finally displayed.

In this example, a new property is also exposed: list-style:none; in the style code of the preview.
By default, 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.

The above is the CSS page layout get started Tutorial 10: With the current identity of the label horizontal navigation _ Basic tutorial content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!


