Create CSS Landscape navigation menus with UL and Li tags

The simplest way to create a CSS-style text navigation bar might be to put all the links in one line of text, which looks reasonable and intuitive. But the problem is that it's hard to control the gaps between links and back and forth by putting all the links in one line of text. So, in order to avoid all the links being squeezed together, you end up having to insert something or a non-newline blank character as a separator to separate the text from the mix.

It is now normal for us to use the UL and Li tags to identify the link as an unordered list (unordered list). The CSS style is then used to control it, which is displayed in the container in the form we expected. Using an unordered list on a navigation bar seems to be a non-intuitive experience, as we are accustomed to use unordered lists as a vertical push-up listing item, each preceded by a list preset tag. This does not seem to conform to the horizontal orientation of the navigation bar. But the list logical structure as a standalone list item collection can be applied to links in the navigation bar, and CSS rules allow you to override the default representation of list items to eliminate them and arrange the list items to be arranged horizontally within the container, rather than from the top down rule. Now let's take a look at the example, creating a landscape navigation menu of CSS styles and XHTML labels based on unordered lists.

CSS Code

<div id= "NAV" >     <ul>       <li><a href= "http://www.php1.cn/" >     <li><a href= " http://www.php1.cn/">     <li><a href=" http://www.php1.cn/">     <li><a href="/http/ www.php1.cn/">     <li><a href=" http://www.php1.cn/">     <li><a href="/http/ www.php1.cn/">     <li><a href=" http://www.php1.cn/">   </ul>   </div>

Let's take a look at this CSS code:

CSS Code

#nav {       height:30px;       width:100%;       Background-color: #c00;   }   #nav ul {       margin:0 0 0 30px;       padding:0px;       font-size:12px;       Color: #FFF;       line-height:30px;       whitewhite-space:nowrap;   }   #nav li {       list-style-type:none;       display:inline;   }   #nav Li a {       text-decoration:none;       Font-family:arial, Helvetica, Sans-serif;       PADDING:7PX 10px;       Color: #FFF;   }   #nav li a:hover {       color: #ff0;       Background-color: #f00;   }

Let's take a look at the full HTML of the above code, and copy it into an HTML page where you can see the effect:

xml/html Code

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > < HTML xmlns= "http://www.w3.org/1999/xhtml" > 
Let's parse the above code:

The 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 this, 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 can not meet the needs. We define such containers to be more consistent with our code-writing habits.

#nav定义了窗口的宽高及背景颜色. #nav ul contains margin and padding declarations, font and color declarations. line-height:30px is a very important definition, and if you cancel the definition of line height, the vertical center of our link text may be affected. White-space:nowrap; Maybe you don't understand what it does, it defines forcing all text to be displayed in the same line until the text ends or the BR object is encountered.

#nav the List-style-type:none in Li; Removes the preset tag used by the list item. Make it more like plain text, without a list tag. Display:inline; A declaration enables a list item to float from left to right on a page without having each item appear in a separate row and from top to bottom. These two statements are key to our implementation of the unordered list of landscape navigation menus.
#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.

