Create CSS Landscape navigation menus with UL and Li tags

Source: Internet
Author: User
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.

  • Related Article

    Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.