Home > Article > Web Front-end > How to set up horizontal navigation structure in Html
How to set up horizontal navigation structure in Html
- 高洛峰Original
- 2017-02-21 13:36:061863browse
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 domineering and does not share a line 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 hope that each row of the list can be displayed on the same line. At this time, we can also combine the block structure and the inline structure. achieve this purpose.
We only need to add a line of code to the list: list{display:inline;}
Method 2 Use float attribute settings.
The float attribute 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:
<!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>导航一</li>
<li>导航二</li>
<li>导航三</li>
</ul>
<a href="#">百度</a>
</body>
</html>
The above is the entire content of this article, I hope it will be helpful to everyone's study.
For more articles related to how to set up a horizontal navigation structure in Html, please pay attention to the PHP Chinese website!