CSS defines a navigation bar

The navigation bar is a commonly used module in Web pages. There are many ways to implement it. The following is how to implement it using CSS:

<Div id = "menu">
<Ul>
<Li> <a href = "#"> homepage </a> </LI>
<Li class = "menudiv"> </LI>
<Li> <a href = "#"> blog </a> </LI>
<Li class = "menudiv"> </LI>
<Li> <a href = "#"> Design </a> </LI>
<Li class = "menudiv"> </LI>
<Li> <a href = "#"> album </a> </LI>
<Li class = "menudiv"> </LI>
<Li> <a href = "#"> Forum </a> </LI>
<Li class = "menudiv"> </LI>
<Li> <a href = "#"> about </a> </LI>
</Ul>
</Div>

The CSS code is as follows:
# Menu {padding: 20px 20px 0 0}
/* Use padding: 20px 20px 0 0 to fix the menu position */
# Menu ul {float: Right; List-style: none; margin: 0px ;}
/* Added float: right so that the menu is on the right side of the page */
# Menu ul Li {float: Left; margin: 0 10px; display: block; line-Height: 28px}
/* The vertical line of the single food installation room */
. Menudiv {width: 1px; Height: 28px; Background: #999}
/* Define the style of the menu link */
# Menu ul Li A: Link, # menu ul Li A: visited {font-weight: bold; color: #666}
# Menu ul Li A: hover {}

Explanations:

<Ul> </ul> and <li> </Li> These two HTML elements are mainly used to display some information in HTML in the form of a list.

When definedId = "divid", The setting syntax for CSS is# Divid {}If it is definedClass = "divid"In CSS, the corresponding setting syntax is. divid.

# Menu ul {list-style: none; margin: 0px ;}
List-style: None. This sentence cancels the vertices before the list, because we do not need these vertices.
Margin: 0px. This statement deletes ul indent, so that all list content is not indented.

　　# Menu ul Li {float: left;Margin: 0 10px; display: block; line-Height: 28px}
Here, float: Left and Right are displayed in the same row, so the floating attribute (float) is used ).
Margin: 0 10px is used to generate a 20-pixel distance between the list content (left: 10px, right: 10px)
Display: block; line-Height: 28px is used to center the text vertically.

The final effect is as follows: