How to Set a horizontal navigation structure and a horizontal navigation structure
How to set the horizontal navigation structure
The two methods for setting the horizontal navigation structure are described here, mainly by 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:
<! DOCTYPE html>
<Html>
<Head lang = "en">
<Meta charset = "UTF-8">
<Title> </title>
<Style type = "text/css">
Ul {
Float: right;
}
Li {
Padding-right: 30px;
Float: left;
}
A {
Margin-left: 20px;
Font-size: 20px;
Font-weight: bold;
Color: white;
Display: block;
Border: 1px solid black;
Width: 100px;
Text-decoration: none;
Text-align: center;
Background-color: darkseagreen;
}
A: hover {
Color: red;
}
</Style>
</Head>
<Body>
<Ul>
<Li> Navigation 1 </li>
<Li> navigation 2 </li>
<Li> navigation 3 </li>
</Ul>
<A href = "http://www.baidu.com"> Baidu </a>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
