How to use CSS code to make a website navigation bar? Example

This article mainly introduces you about how to use CSS to do navigation bar related knowledge, I hope to have the necessary friends to help. For any web site, the presence of the navigation bar is critical, so if you just make a tedious navigation menu with HTML, the effect is definitely poor. The importance of CSS properties is then reflected.

Here is a concrete example of CSS navigation code:

1. Vertical navigation bar
   

<! DOCTYPE html>
The above effects are as follows:



2. Horizontal navigation bar

<! DOCTYPE html>
Effects such as:



Here are the key things to know:

Display: Its properties specify the type of box that the element should generate. This property is used to define the type of display box that the element generates when the layout is established. For document types such as HTML, it can be dangerous to use display without caution because it may violate the display hierarchy already defined in HTML. For XML, all display is absolutely necessary because XML does not have this hierarchical structure built into it.

Display:inline; -The,<li> element is a block element by default. Here, we remove line breaks before and after each list item to display a row.

 So the above is for the CSS navigation in the Web page how to do the relevant introduction, has a certain reference value. We hope to help you.