Change the previous vertical navigation to a horizontal navigation (click the link to view details). The code in the HTML section remains unchanged, but the style form is changed.
I. 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">Ii. CSS code
/* CSS style sheet for your horizontal.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: 767px; /* set the width of unsorted list elements */float: Left;/* contain floated list items */} # nav Li {margin: 0; padding: 0; float: left; /* width: 100%; list items are adjacent to each other, so you do not need to set the width */} # nav A {float: Left; width: pixel PX; /* set the width of each navigation item */color: # FFF; text-Decoration: none;/* defines the standard text, and the link text has no underline */line-Height: 2.5; text-align: center;/* text in the middle of each list item */border-Right: 1px solid # FFF; /* set only the right border */} # nav # nav_con A {border: none;/* remove 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 */}III,
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
