Simple CSS menu: Learn CSS

 I have always been very interested in CSS + Div layout, especially in the face of IE6, which is a tough problem. We always try our best to take care of it. I usually seldom learn this and take notes here.

You can also create a nice navigation menu using the image designed by the artist, but you can still use the clever CSS.

Here is a navigation that I created on the jquery Website ,:

 

Procedure:

1. Compile HTML.

 

2. Write CSS.

I plan to use two images. In Chapter 1, fill in the left side of the navigation. This image must be long and can be fully wrapped with the increase of <li> in # header_nav.

Use the second image to fill the rightmost navigation. Both images have rounded corners, making the navigation smoother.

 

 

Note that the rounded corner of the image is black. The blue color of the image can be used with the black color to make the navigation display more obvious.

First, set the background of # header_nav to the first image and the background of <ul> to the second image.

Set border isolation on both sides of <li>.

 

3. Set the edges of the first <li> and last <li>.

 

Of course, this is set through CSS, but JS is used for the sake of simplicity of CSS.

Add the source code.

Download