May 29, 2021 Article blog
Many small partners encounter the question when they first learn html: What does the html landscape navigation bar do? Today W3Cschool editor-in-chief for you to share a simple horizontal navigation bar code, I believe it will help you.
html Landscape navigation bars are typically made in two ways: first, we use a block structure combined with an in-line structure. S
econd, we use
float
property to make it.
Since the first one is more commonly used, it is introduced in the first way.
First, let's be clear about the difference between a block element and the structure within a row:
(1) Block structure can customize the width, height, border, margin and other properties, while the in-line elements only support line height, margin customization, block elements have margins, top margins, border properties within the line elements are not.
(2) Block structures cannot be used on the same line as other elements, while in-row elements are supported for nesting in other elements.
Example of horizontal navigation bar code:
<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:140px;
font-weight:bold;
color:#FFFFFF;
background-color:#bebebe;
text-align:center;
padding:15px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#e6e6e6;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">W3Cschool</a></li>
<li><a href="#news">入门教程</a></li>
<li><a href="#contact">编程课程</a></li>
<li><a href="#about">编程实战</a></li>
</ul>
</body>
</html>
That's all there is to this article, and today I shared with you how to do html landscape navigation bar, interested friends can use our W3Cschool html online editor for debugging is very convenient!