Search on the internet did not see how to use CSS to create a label navigation tutorial or instructions, most of them are to be involved in the compilation of JS. This is a lot of CSS in the study of the people are really not thoughtful, since no one to do that I come first to try! I do the CSS tag navigation here is a pure CSS without JS background picture green navigation. This article is suitable for beginners, master can pass by, hehe!
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "><pead> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title>nav02</title> </pead> <style type=" Text/css "> *{margin:0; padding:0; }. mainnav{margin:0 20px; height:47px; border-bottom:2px solid #000; } ul{margin:20px; margin-bottom:0; padding-left:20px; List-style-type:none; font-size:12px; Position:absolute; } ul li{Float:left; margin-right:5px; } ul Li a{display:block; width:100px; line-height:25px; Text-align:center; Color: #999; Background-color: #FC0; border:2px solid #000; } ul Li a:hover{height:27px; Background-color: #F60; Border-bottom:none; } #nav01 ul Li a#nav001, #nav02 ul Li A#nav002, #nav03 ul Li a#nav003{width:100px; height:27px; ColoR: #FFF; Background-color: #F60; border:2px solid #000; Border-bottom:none; }. con{margin:0 20px; padding:20px; Color: #FFF; Background-color: #F60; border:2px solid #000; Border-top:none; } </style> <body id= "nav01" > <ul> <li> Scripting House 01</li> <l i> Script House 02</li> <li> scripting House 03</li> </ul> scripting House www.jb51.net </body> ; </ptml>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
Copy CodeThe code is as follows:
. mainnav{
margin:0 20px;
height:47px;
border-bottom:2px solid #000;
}
ul{
margin:20px;
margin-bottom:0;
padding-left:20px;
List-style-type:none;
font-size:12px;
Position:absolute;
}
UL li{
Float:left;
margin-right:5px;
}
UL Li a{
Display:block;
width:100px;
line-height:25px;
Text-align:center;
Color: #999;
Background-color: #FC0;
border:2px solid #000;
}
UL Li a:hover{
height:27px;
Background-color: #F60;
Border-bottom:none;
}
#nav01 ul Li A#nav001,
#nav02 ul Li A#nav002,
#nav03 ul Li a#nav003{
width:100px;
height:27px;
Color: #FFF;
Background-color: #F60;
border:2px solid #000;
Border-bottom:none;
}
. con{
margin:0 20px;
padding:20px;
Color: #FFF;
Background-color: #F60;
border:2px solid #000;
Border-top:none;
}
Copy CodeThe code is as follows:
- Ali is 01 full.
- Ali is 02 full.
- Ali is 03 full.
In fact, the key point is UL in the Position:absolute command, due to the use of this CSS property, the content of the UL navigation becomes a layer display, is equivalent to floating in the browser above. And in order not to let the contents of the UL part of the content, in the UL outside also set a Div, played a role in helping the UL occupy a position. And this div also played a role as a UL background, the key to label navigation is the bottom border. After reading it all, you will find that it is very simple, but the key is to have ideas. All right! Keep Learning!
