important! The foreword is a must-read!
This chapter mainly studies the horizontal navigation bar of CSS. First of all, you must know what tags are used to form the navigation bar. In HTML, it is implemented using list tags, that is, it is implemented using the unordered tags ul>li>a of the list. Note The list generated by default is with item tags, which requires us to use the list deletion attribute of css (list-style-type: none). The function of this attribute is to delete the item tags of the list. It must be added at the same time (margin: 0 and padding: 0) Used to delete the browser's default settings. Hyperlinks are underlined by default. If you need to remove the underline of hyperlink (a), please use the text decoration attribute (text-decoration: none). Please pay attention to the horizontal navigation bar. Set it as an inline element to represent a block-level element, that is, use the (display: inline-block) attribute. The function of this attribute is to make the element display as an inline element and the element to appear as a block-level element. Inline elements refer to displaying the element only in On the same line, appearing as block-level elements means displaying the elements as one block.
Horizontal navigation bar: ul>li>a
Notice! The horizontal navigation bar refers to using the display: inline-block attribute to set the element to an inline element and behave as a block element.
code diagram
renderings
Hover horizontal navigation bar
Notice! Hovering a horizontal navigation bar refers to using the anchor pseudo-class (:hover) on the navigation bar.
code diagram
renderings
