Perhaps the easiest way to create a CSS style text navigation bar is to put all the links in one line of text, which seems reasonable and intuitive. But the problem is that putting all the links in one line of text makes it hard to control the gaps between the links and the front and back. So, in order to avoid all the links being squeezed together, you end up usually having to insert something or a newline of whitespace to separate the text so that it doesn't mix.
Now our normal practice is to apply the UL, Li tags to the link as an unordered list (unordered list) to identify. The CSS style is then used to control it and is displayed in the container in the form we expect. The use of unordered tables for navigation bars does not seem intuitive, as we are accustomed to using an unordered table as a vertically-pushed list item, each preceded by a list preset tag. This does not seem to conform to the horizontal direction of the navigation bar habit. However, the list logical structure that is a collection of stand-alone list items can be applied to links in the navigation bar, and the CSS rules allow you to force the substitution of the default form of list items to eliminate them and arrange the list items to flow horizontally in the container, rather than from the top down rule. Now let's take a look at the example and create a horizontal navigation menu of CSS styles and XHTML tags based on unordered lists.
CSS Code
Let's take a look at this CSS code:
CSS Code
Let's take a look at the full HTML of the code above, copy it and put it in an HTML page and you can see the effect:
xml/html Code
Below we will parse the above code:
XHTML Code First defines a container div id= "nav". This container is used to place the contents of this unordered list horizontal navigation menu, but some people think that the container is superfluous, directly define the UL id= "NAV" on it. We do not recommend that you do so, to know that our site is extensible, we want to leave enough room for future expansion, if our navigation style design more complex, the only UL is not enough to meet the needs. Our definition of such containers is also more in line with our code-writing habits. The
#nav定义了窗口的宽高及背景颜色. #nav ul contains margin and padding declarations, fonts and color statements. line-height:30px is a very important definition, and if you cancel the definition of row height, our link text may be affected vertically. White-space:nowrap; Maybe you don't understand what it does, it defines forcing all text to appear in the same line until the text ends or the BR object is encountered. The
#nav the List-style-type:none in Li; the preset tags used by the list items are removed. Make it more like plain text, without a list tag. Display:inline declaration allows list items to float from left to right on the page without having each item appear in a separate row and from top to bottom. These two statements are key to implementing the unordered list horizontal navigation menu. The
#nav li A and #nav Li A:hover define the style of the link. The content is not in-depth, the only thing to say is: padding:7px 10px; it is used to control the gap between the text of the link, you can try to change the value of a try.
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
