How to do the horizontal navigation bar of html

This article mainly introduces the relevant knowledge of "html horizontal navigation bar how to do", the editor shows you the operation process through the actual case, the operation method is simple and fast, practical, I hope this "html horizontal navigation bar how to do" article can help you solve the problem.

The html horizontal navigation bar is generally made in two ways: first, we use a block structure combined with an inline structure. Second, we use the float attribute to make it. Since the first one is more commonly used, it will be introduced in the first way.

First of all, you need to make clear the difference between block elements and in-line structures:

(1) the block structure can customize the width, height, border, margin and other attributes, while the inline elements only support the customization of the row height and margins, and the block elements have no outer margin, upper line margin and border attributes.

(2) Block structures cannot be used on the same line as other elements, while inline elements support nesting in other elements.

Horizontal navigation bar code example:

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 } W3Cschool introductory programming course programming practice on "how to do the html horizontal navigation bar" content is introduced here, thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.