(4) create part 2 at the top of the page

Use List <li> to create a menu

Before learning this section, make sure that you have written div1_css to the index.htmand css.css files.

In this section, I will show you how to use the list <li> to create menus.

• homepage




• blog




• design




• album




• Forum




• about

The above is the structure of this part.<Ul> </ul> and <li> </Li> You can refer to these two HTML elements by yourself. Their main function is to display some information in HTML in the form of a list.

Another point that needs to be clearly stated is that when HTML is definedId = "divid", The setting syntax for CSS is# Divid {}If it is definedClass = "divid"In CSS, the corresponding setting syntax is. divid.

IfId = "divid"This layer includes a </img>, the corresponding setting Syntax of this IMG in CSS should be# Divid IMG {}, Similarly, if it is included inClass = "divid"In this layer, the set syntax should be.Divid IMG {}, I hope you will be clear about this.

In addition, all elements in HTML can be defined, such as table, TR, TD, Th, form, IMG, input... if you want to set them in CSS, you can simply add a pair of braces {} to the element name. All CSSCodeShould be written in braces{}.

According to the introduction, we first write the following code in css.css:

# Menu ul {list-style: none; margin: 0px ;}
# Menu ul Li {float: Left ;}

Explanations:

# 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 ;}
Here, float: Left and Right are displayed in the same row, so the floating attribute (float) is used ).

In this step, we recommend that you first save the preview effect, and then add the following content. The effect is as follows:

In this case, the list content is arranged in one row, and we add code in # menu ul Li {}.Margin: 0 10px

# Menu ul {list-style: none; margin: 0px ;}
# Menu ul Li {float: Left; margin: 0 10px}

The function of margin: 0 10px is to make the list content a 20-pixel distance (left: 10px, right: 10px). The preview effect is as follows:

Now that the prototype has come out, let's fix the menu position and change the code to the following:

# 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}

At this time, the position has been determined, but there is a vertical line between the menu options in the conception diagram. What should I do?
Don't forget, we have already reserved an empty <li class = "menudiv"> </LI>. You can use it if you want to add a vertical line.
Follow the method described above to add the following code:

. Menudiv {width: 1px; Height: 28px; Background: #999}

Save the preview and check whether the vertical bars have come out? I will not talk about this code much, so it should be easy to understand.

However, the text of the menu option is on the top, and we need to modify it to the following code:

# Menu ul Li {float: Left; margin: 0 10px; display: block; line-Height: 28px}

AboutDisplay: block; line-Height: 28pxYou can refer to the Manual and I will not talk about it more.

Basically, the effect has been proven. Add the following code in css.css to the chain style of the remaining modified menu:

# Menu ul Li A: Link, # menu ul Li A: visited {font-weight: bold; color: #666}
# Menu ul Li A: hover {}

There is nothing to say about it. The final effect is as follows:

This section is now complete. By the way, we will provide the materials to you:
Concept diagram:Click to download
HTML and CSS source files: Click to download