Create CSS Landscape navigation menus with UL and Li tags? Go

Last Update:2015-05-14 Source: Internet

Author: User

Tags set background

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

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.52css.com/" >HomePage</a></li>
<li><a href= "http://www.52css.com/" >div+css tutorials </a></li>
<li><a href= "http://www.52css.com/" >css layout example </a></li>
<li><a href= "http://www.52css.com/" >css2.0 tutorials </a></li>
<li><a href= "http://www.52css.com/" >css online manual </a></li>
<li><a href= "http://www.52css.com/" >web standard </a></li>
<li><a href= "http://www.52css.com/" >xhtml tutorials </a></li>
</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" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>www.52css.com</title>
<style type= "Text/css" >
<!--
#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;
White-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;
}
-
</style>
<body>
<div id= "NAV" >
<ul>
<li><a href= "http://www.52css.com/" >HomePage</a></li>
<li><a href= "http://www.52css.com/" >div+css tutorials </a></li>
<li><a href= "http://www.52css.com/" >css layout example </a></li>
<li><a href= "http://www.52css.com/" >css2.0 tutorials </a></li>
<li><a href= "http://www.52css.com/" >css online manual </a></li>
<li><a href= "http://www.52css.com/" >web standard </a></li>
<li><a href= "http://www.52css.com/" >xhtml tutorials </a></li>
</ul>
</div>
</body>

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.

---------------------------------------------------------------------------------------------------------------

1. Traditional div css layout and nav CSS layout full HTML source code

<! DOCTYPE html>
<meta charset= "Utf-8"/>
<title>nav Layout Online Demo divcss5</title>
<style>
ul,li{padding:0; Margin:0;list-style:none}
. nav{border:1px solid #000; width:510px; Overflow:hidden}
. Nav li{line-height:22px; float:left; padding:0 5px;}
. Nav li a:hover{color: #F00}
/* Set black border on Class=nav, mouse over hyperlink text red */

nav{border:1px solid #F00; width:520px; Overflow:hidden}
Nav li{line-height:22px; float:left; padding:0 6px;}
Nav li a{color: #F00}
/* Set red border on nav, hyperlink position Red */

nav.bg{background: #CCC}
nav.bg li a{color: #090}
/* Set CLASS=BG on NAV, set background to gray, hyperlink position Green */
</style>
<body>
<p> Traditional Div ul li layout navigation bar effects </p>
<div class= "NAV" >
<ul>
<li><a href= "http://www.divcss5.com/" > website Home </a></li>
<li><a href= "http://www.divcss5.com/html/" >html tutorials </a></li>
<li><a href= "http://www.divcss5.com/htmlrumen/" >html Getting Started </a></li>
<li><a href= "http://www.divcss5.com/html5/" &GT;HTML5 tutorials </a></li>
<li><a href= "http://www.divcss5.com/rumen/" >css tutorials </a></li>
<li><a href= "http://www.divcss5.com/cssrumen/" >css Getting Started </a></li>
</ul>
</div>
<p> </p>
&LT;P&GT;HTML5 nav ul Li Layout nav bar does not set nav li a hyperlink text font color to red character and red box effect on NAV plus ID and class </p>
<nav>
<ul>
<li><a href= "http://www.divcss5.com/" > website Home </a></li>
<li><a href= "http://www.divcss5.com/html/" >html tutorials </a></li>
<li><a href= "http://www.divcss5.com/htmlrumen/" >html Getting Started </a></li>
<li><a href= "http://www.divcss5.com/html5/" &GT;HTML5 tutorials </a></li>
<li><a href= "http://www.divcss5.com/rumen/" >css tutorials </a></li>
<li><a href= "http://www.divcss5.com/cssrumen/" >css Getting Started </a></li>
</ul>
</nav>
<p> </p>
&LT;P&GT;HTML5 nav ul li layout plus class=bg set Background to gray-black, hyperlink text font color green </p>
<nav class= "BG" >
<ul>
<li><a href= "http://www.divcss5.com/" > website Home </a></li>
<li><a href= "http://www.divcss5.com/html/" >html tutorials </a></li>
<li><a href= "http://www.divcss5.com/htmlrumen/" >html Getting Started </a></li>
<li><a href= "http://www.divcss5.com/html5/" &GT;HTML5 tutorials </a></li>
<li><a href= "http://www.divcss5.com/rumen/" >css tutorials </a></li>
<li><a href= "http://www.divcss5.com/cssrumen/" >css Getting Started </a></li>
</ul>
</nav>

<ins class= "Adsbygoogle" style= "display:inline-block;width:728px;height:90px" Data-ad-client= "ca-pub-6057706211967641" data-ad-slot= "8787106124" ></ins><script> (Adsbygoogle = Window.adsbygoogle | | []). push ({});</script></p>
<p> </p>
<p> </p>
<p> return <a href= "http://www.divcss5.com/html5/h716.shtml" >html nav tutorial </a> <a href= "/http/ www.divcss5.com/html5/h716.shtml "> Download HTML5 nav CSS layout case </a>:http://www.divcss5.com/html5/h716.shtml</p >
</body>

Create CSS Landscape navigation menus with UL and Li tags? Go

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More