How to set the horizontal navigation structure of Html _ HTML/Xhtml _ webpage Creation

This article describes in detail how to set the horizontal navigation structure for Html. This article describes two ways to set the horizontal navigation structure, with the help of the list structure, if you are interested, you can refer to the two horizontal navigation structure setting methods shared in this article, mainly using the list structure.

Method 1: The combination of Block Structure and intra-row structure.

Here we will first introduce the differences between block elements and intra-row structures.

(1) You can set attributes such as row height, width (width, height), margin (margin, padding), and border (border) in a block structure. The Row Element can only set the Row Height, left margin, and right margin, but does not have the attributes such as the outer margin, top and bottom margin, and border.

(2) The block structure is overbearing and does not share a line with other elements. In-row elements can be nested in other elements.

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

However, sometimes, to make the block structure have the characteristics of intra-row elements, or to make intra-row elements have the characteristics of block elements, the two will be combined. For example, label a is one of the most important intra-Row Labels. You can access the corresponding page based on the link specified by a block element. To make the elements under tag a more beautiful, we want to set some attributes for this link, such as the border, margin, and background color. We know that these attributes are only available in a block structure. Therefore, we want to continue using the intra-row label a to accommodate the link content, and hope that the intra-Row Element can also have relevant attributes of the block structure.

We can solve this problem by setting "a {display: block.

Similarly, when we want to use the list to set horizontal navigation, we want each row of the list to be displayed in the same line, at this time, we can also achieve this through the combination of Block Structure and intra-row structure.

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

Method 2: Use the float attribute settings.

The float attribute can be set to float in two directions, including left and right. When you set the horizontal navigation, the list is moved to the left to float the left. The float to the left is because the navigation sequence is set to the left to the right, that is, navigation from left to right is one to four, which is more in line with the habits of more users.

Code:

Copy XML/HTML Code to clipboard

9. • Navigation 1
   • Navigation 2
   • Navigation 3
11. Baidu

The above is all the content of this article, hoping to help you learn.

Original article: http://www.cnblogs.com/xiaoqqmin/p/5317551.html