How to set up horizontal navigation structure in Html_HTML/Xhtml_Web page production

This article will share with you two methods of setting up horizontal navigation structures, mainly with the help of list structures.

Method 1: Combination of block structure and inline structure.

Here we first introduce the difference between block elements and inline structures.

(1) The block structure can set attributes such as line height, width (width, height), margin (margin, padding), and border (border). Inline elements can only set line height, left and right margins, but do not have attributes such as outer margins, top and bottom padding, and borders.

(2) The block structure is more overbearing and does not share a row with other elements. Inline elements can be nested within other elements.

Common block elements include ul, ol, p, form, etc. Common inline elements include meta, img, span, h1-h6, label, etc.

But sometimes, in order to make the block structure have the characteristics of inline elements, or to make the inline elements have the characteristics of block elements, the two are combined. To give an example of making an inline element have the characteristics of a block element: the a tag is one of the most important inline tags, and users can access the corresponding page according to the link it specifies. In order to make the elements under the a tag more beautiful, we want to set some attributes for this link, including borders, margins, background color, etc. We know that these attributes are only possessed by block structures, so at this moment we not only want to continue to use the inline tag a to accommodate link content, but also hope that this inline element can also have attributes related to block structures.

We can solve this problem through the setting of "a{display:block}".

Similarly, when we want to use a list to achieve the purpose of setting up horizontal navigation, we want each row of the list to be displayed on the same line. At this time, we can also achieve this goal by combining the block structure and the inline structure. .

We only need to add one line of code to the list: list{display:inline;}

Method 2: Use float attribute settings.

The attribute float can be set to float in two directions, including left and right. Setting up horizontal navigation is to float the list horizontally to the left. Floating to the left is because we hope that after setting the floating, the order of navigation will be horizontal from left to right, that is, from left to right, navigation one to navigation four. This More in line with the habits of more users.

Code:

XML/HTML CodeCopy content to clipboard

1. html>  
2. html>  
3. head lang="en">  
4.     meta charset="UTF-8">  
5.     title>title>  
6.     style type="text/css">  
7.         ul{   
8.             float:right;   
9.         }   
10.         li{   
11.             padding-right:30px;   
12.             float:left;   
13.         }   
14.         a{   
15.             margin-left:20px;   
16.             font-size:20px;   
17.             font-weight:bold;   
18.             color:white;   
19.             display:block;   
20.             border:1px solid black;   
21.             width:100px;   
22.             text-decoration:none;   
23.             text-align:center;   
24.             background-color:darkseagreen;   
25.         }   
26.         a:hover{   
27.             color:red;   
28.         }  
29.     style>  
30. head>  
31. body>  
32. ul>  
33.     li>导航一li>  
34.     li>导航二li>  
35.     li>导航三li>  
36. ul>  
37.   
38. a href="#">百度a>  
39. body>  
40. html>  

以上就是本文的全部内容，希望对大家的学习有所帮助。

原文：http://www.cnblogs.com/xiaoqqmin/p/5317551.html