Pure CSS to realize label navigation production_Experience exchange

After searching on the Internet, I didn't see many tutorials or instructions on making label navigation purely using CSS. Most of them involve the writing of JS. This is really not considerate for many people who are learning CSS. Since no one has done it, let me try it first! The CSS label navigation I am doing here is a green navigation with pure CSS, no JS, and no background image. This article is suitable for beginners, experts can pass by, haha!

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>nav02</title> <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; } ulli{ 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> <div class="mainNav"> <ul> <li><a href="#" id="nav001">Script House 01</a></li> <li><a href="#" id="nav002">Script House 02</a></li> <li><a href="#" id="nav003">Script Home 03</a></li> </ul> </div> <div class="con">Script Home <a href="</div">www.jb51.net</a> </div>>
[Ctrl A Select all Note:If you need to introduce external Js, you need to refresh to execute]

Copy code The 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;  
} 

复制代码 代码如下:

  
    

  
        

  
            
• 阿里满满01
  
            
• 阿里满满02
  
            
• 阿里满满03
  
        

  
    

 

In fact, the key point is the position:absolute command in ul. Due to the use of this CSS attribute, the content of the ul navigation becomes a layer display, which is equivalent to floating on the browser. In order to prevent the following content from filling up the content of the ul part, a div is placed outside the ul, which helps the ul occupy space. This div also serves as the ul background. The key to label navigation is the bottom border. After reading it all, you will find that it is actually very simple, but the key is to have an idea. alright! Keep learning!