HTML code CSS

The first step, writing the HTML code schema for the Landscape menu

Please add the following code to the navigation bar area of the HTML document.

<ul id= "Menu" > <li><a href= "http://www.baidu.com" >Baidu.Com</a></li> <li><a Href= "http://www. Code52.net ">Code52.Net</a></li> <li><a href=" http://www.yahoo.com ">yahoo.com</a ></li> <li><a href= "http://www.google.com" class= "Last" >google.com</a></li></ Ul>

Step two, write CSS code

1. Set Public style

Please add the following CSS code to the

<style type= "Text/css" > #menu {font:12px Verdana, Arial, Sans-serif;/* Set text size and font style */} #menu, #menu li {list-style:n One /* Remove the default list symbol from the */padding:0; /* Remove the default padding from the */margin:0; /* Remove the default margin */}</style>

Everyone knows that the entries in,<ul> <li> are vertically arranged by default, and we need to define CSS to arrange them horizontally.

Tips: because we are now pulling out the navigation bar for independent explanation, we need to set some common styles, if you have reset the default effect in body or elsewhere, the above code can be removed

2. Let the text be horizontal

As you all know, the items under the,<ul> tab <li> are vertically arranged by default, and we need to define additional CSS properties to arrange them horizontally.

<style type= "Text/css" > #menu li {float:left;/* Go left floating */}</style>

3. set the link style:

<style type= "Text/css" > #menu li a {display:block;/* Sets the link to block-level element */padding:8px 50px;/* Set padding */background: #3A4953;/* Set background color */color: #fff; /* Set text color */text-decoration:none; /* Remove the underline */border-right:1px solid #000; /* Add divider line to left */}</style>

We use padding (that is, fill padding) to make each menu wider, if your menu is mixed in Chinese and English, it is recommended to set a high width of a single menu, so as to avoid the high inconsistency between Chinese and English characters lines height error. How to set the fixed height:

<style type= "Text/css" > #menu li a {display:block;/* Sets the link to block-level element */width:150px;/* Set width */height:30px;/* Set height */line- height:30px; /* Set the row height, set the row height and height of the same value, you can let single-line text vertically centered */text-align:center; /* Center Align Text */background: #3A4953; /* Set Background color */color: #fff; /* Set text color */text-decoration:none; /* Remove the underline */border-right:1px solid #000; /* Add divider line to left */}</style>

4. Link Hover effect:

Through the combination of the above steps, the initial frame of a horizontal navigation bar appears. This step is primarily to define the hover effect of the link, making the navigation bar more aesthetically pleasing. Of course, if you want to make the navigation bar more glamorous, you can define the background image on the CSS hover property.

<style type= "Text/css" > #menu li a:hover {background: #146C9C;/* Transform background color */color: #fff;/* Transform text color */}</style>

Here the code a flaw, the rightmost side will come out a border, because: First-child pseudo-class is not supported by IE series Browser, we can only write a style, the last border is removed, and to add an additional selector to the HTML code.

<ul id= "menu" ><li><a href= "http://www.baidu.com" >baidu.com</a></li><li><a Href= "http://www. Code52.net ">code52.net</a></li><li><a href=" http://www.yahoo.com ">yahoo.com</a ></li><li><a href= "http://www.google.com" class= "Last" >google.com</a></li></ Ul><style type= "Text/css" > #menu li a.last {border-right:0;/* Remove left Border */}</style>

Well, here's a simple horizontal navigation menu that's done, isn't it simple? The complete code is given below:

<style type= "Text/css" > #menu {  font:12px verdana, Arial, Sans-serif;} #menu, #menu li {list-style:none; padding:0; margin:0;} #menu li {  float:left;} #menu Li a {display:block;/* If the text is mixed in Chinese and English, it is recommended to use fixed width width:150px; height:30px; line-height:30px; text-align:center; * * Paddi NG:8PX 50px; Background: #3A4953; Color: #fff; Text-decoration:none; border-right:1px solid #000;} #menu li a:hover {background: #146C9C; color: #fff; text-decoration:none; border-right:1px solid #000;} #menu Li A.last {border-right:0;/* Remove left Border */}</style>

<ul id= "Menu" > <li><a href= "http://www.baidu.com" >Baidu.Com</a></li> <li><a Href= "http://www. Code52.net ">Code52.Net</a></li> <li><a href=" http://www.yahoo.com ">yahoo.com</a ></li> <li><a href= "http://www.google.com" class= "Last" >Google.com</a></li> </ Ul>

You can view our production of online demos and download the sample packages provided in this article.

The above CSS style, I modified a bit. As follows:

<style type= "Text/css" >
#menu {
font-size:12px;
Font-weight:bolder;
}
#menu li{
List-style-image:none;
List-style-type:none;

border-right-width:1px;
Border-right-style:solid;
Border-right-color: #000000;
Float:left;
}
#menu Li a{
Color: #FFFFFF;
Text-decoration:none;
margin:0px;
padding-top:8px;
Display:block; /* As a block */
padding-right:50px; /* Set the properties of the block */
padding-bottom:8px;
padding-left:50px;
}
#menu Li a:hover{
Background-color: #0099CC;
}

</style>

HTML code CSS