Div CSS layout introductory tutorial (4)_html/css_WEB-ITnose

作者:番茄红了

三、页面顶部制作(2)----使用列表

制作菜单

　　开始此节的学习前，请确认你已经参照之前的几节内容写入了DIV、CSS到index.htm和css.css文件中。
　　这一节我将告诉大家如何用列表

来制作菜单。

程序代码

        

          

            
• 首页

            
• 
              
• 博客

            
• 
              
• 设计

            
• 
              
• 相册

            
• 
              
• 论坛

            
• 
              
• 关于

          

        

The above is the structure of this part. Regarding the two HTML elements

and

, please refer to the relevant content yourself. Well, their main function is to display some information in the form of a list in HTML.

There is another point that everyone must understand clearly. When it is defined as id="divID" in HTML, the corresponding setting syntax in CSS is #divID{}. If it is defined as class in HTML ="divID", the corresponding setting syntax in CSS is .divID.
If the layer with id="divID" includes an , the corresponding setting syntax of this img in CSS should be #divID img {}. Similarly, if it is included in class When ="divID" is in this layer, the setting syntax should be .divID img {}. I hope everyone can understand this clearly.
In addition, all elements in HTML can be defined, such as table, tr, td, th, form, img, input... etc. If you want to set them in CSS, write the elements directly Just add a pair of braces {} to the name. All CSS code should be written within curly brackets {}.

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

Program code

#menu ul {list-style:none;margin:0px ;}
#menu ul li {float:left;}

Explain:
#menu ul {list-style:none;margin:0px;}
list- style:none, this sentence is the point before canceling the list, because we don’t need these points.
Margin:0px, this sentence is to delete the indentation of UL. This can make all list contents unindented.

　 #menu ul li {float:left;}
　The left and right of float:left here allow the content to be displayed on the same line, so the float attribute (float) is used.

At this point, it is recommended that you save the preview effect first, and then add the following content. The effect is as follows:



At this time, the list contents are arranged in one line. We add the code margin:0 10px to #menu ul li {}:

Program code

#menu ul {list-style:none;margin:0px;}
#menu ul li {float:left;margin:0 10px}

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



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

Program code

#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 location has been determined, but in the conceptual diagram, there is a vertical line between the menu options. What should I do?
Don’t forget, we have already left an empty

, just use it if you want to add a vertical line.
Following the method mentioned above, we add the following code:

Program code

.menuDiv {width:1px;height:28px;background:#999}

, save and preview, have the vertical lines appeared? I won’t say much about this code, it should be easy to understand.



However, the text of the menu options is at the top, so we modify it to the following code:

Program code

#menu ul li {float: left;margin:0 10px;display:block;line-height:28px}

About display:block;line-height:28px, you can refer to the manual, I won’t go into details.

The effect has basically been achieved. All that remains is to modify the hyperlink style of the menu and add the following code to css.css:

Program code

#menu ul li a:link,#menu ul li a:visited {font-weight:bold;color:#666}
#menu ul li a:hover{}

I won’t say much more about this, there’s nothing more to say. The final effect is as follows:



That’s it for this section. By the way, I’ll provide you with the material:
Concept map: Click to download
HTML and CSS source files: Click to download

Related articles:
Div CSS layout introductory tutorial (1) # -- Page layout and planning
Div CSS layout Introductory tutorial (2) # -- Writing the overall layer structure and CSS
Div CSS layout introductory tutorial (3) # -- Making the top of the page (1)
Div CSS layout introductory tutorial (4) # -- Page Top creation (2)----Use list

to create menu
Div CSS layout introductory tutorial (5) # -- Use border and clear
to optimize your CSS code#