Navigation-a basic horizontal navigation without images

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.