A basic vertical navigation, from which you can learn the basic markup required by the development of the navigation system-for the sorting list flag ul, Li. It also involves how to debug and eliminate the blank items in the IE display list. For more information, see code comments. If you don't talk much about it, go directly to the Code:
1. HTML code:
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <HTML xmlns = "http://www.w3.org/1999/xhtml" XML: lang = "en" lang = "en">2. CSS code
/* CSS style sheet for your vertical.html] created by [serein_chan] Email: [Serein_Chan@foxmail.com] author blog: [fonts * // * because the navigation font may match the remaining fonts on the page, therefore, font-family should be declared at a high position in CSS */html {Font: Small/1.4 "lucida Grande", tahoma, sans-serif;} body {font-size: 92% ;}# nav {margin: 0; padding: 0; Background: #6f6146; List-style-type: none; width: 180px; float: left; /* contain floated list items */}/* by floating float processing the list items, there is no blank between IE list items */# nav Li {margin: 0; padding: 0; float: Left;/* debug the "Blank bug" of the IE list item. This is caused by the white space between list items displayed by IE errors */width: 100%; /* ie blank bug */} # nav A {display: block;/* as the default inline area of a to increase the clickable area */color: # FFF; text-Decoration: none;/* defines the standard text. The link text is not underlined */padding: 0 15px; line-Height: 2.5; border-bottom: 1px solid # FFF; /* set the white-colored border line */} # nav # nav_con A {border: none;/* Go out of the border line of the last list separately */} # nav A: hover {Background: #4f4532;/* set the background color when the pseudo hover stays */}/* Associate the navigation ID with the body ID to set the style for the currently accessed navigation element, to highlight the "current location" */# body_hom # nav_hom A, # body_map # nav_map A, # body_jou # nav_jou A, # body_his # nav_his, # body_ref # nav_ref A, # body_con # nav_con A {Background: # beb06f;/* lighter background color */color: #1a1303; /* font color approaching black */font-weight: bold;/* font bold */}3,
4. cleverly add the "current browsing" navigation prompt
To identify the navigation project associated with the current page, a common method is to add a class attribute for the list item that contains the Page Link, used to identify and highlight the effect of the selected navigation. For example, if the selected item is "History", the HTML code is:
<li id = "nav_his" class="current"><a href="/history/">History</a></li>The associated CSS code is:
# Nav Li. current A {Background: # beb06f;/* Light background color */color: #1a1303;/* font color approaching black */font-weight: bold; /* bold font */}However, the semantic method is used in this case. Considering that you may need to set different styles for multiple factors (not just navigation) on the page (for example, setting different styles for different regions of the website ), therefore, set an ID attribute for the body element to indicate which page the user is currently browsing the website, and specify the ID attribute value of the corresponding body for each region, then it is associated to set the style for the current navigation element to highlight the effect of the current navigation. The main code is:
<body id="body_his">And
/* Associate the navigation ID with the body ID to set a style for the currently accessed navigation element to highlight the "current location" of the browser */# body_hom # nav_hom, # body_map # nav_map A, # body_jou # nav_jou A, # body_his # nav_his A, # body_ref # nav_ref A, # body_con # nav_con A {Background: # beb06f; /* Light background color */color: #1a1303;/* font color approaching black */font-weight: bold;/* font bold */}Test: Change the ID of the body in HTML to body_hom. the CSS code remains unchanged and the effect is as follows:
Reference: The Art & Science of CSS
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
