This principle is often used. I remember that this was the first time I found it was in Google music.
Http://www.google.cn/music/homepageto view the category navigation. After clicking here, the blue line is lost.
Today, we can see the navigation bar of Sina's homepage, which also has such applications.
There is a wired link in the middle, but there is no line on the left. The two navigation structures are the same.
This is the standard html code:
<div>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
The complete code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Style type = "text/css">
Body {margin: 0; padding: 0; margin: 100px ;}
A {text-decoration: none ;}
Li {list-style: none ;}
Ul li div {margin: 0; padding: 0 ;}
. Test1 {border-bottom: 1px solid; height: 23px ;}
. Test1 li {
Float: left;
Margin-right: 5px;
Text-align: center;
Width: 80px;
}
. Test1 {
Background: url ("http://www.google.cn/music/images/navi_active.gif ");
Display: block;
Height: 19px;
Padding-top: 4px;
}
. Test1. actived {
Background: url ("http://www.google.cn/music/images/navi_active.gif ");
Border-bottom: 1px solid # FFFFFF;
}
. Test2 {display: inline; width: pixel PX ;}
. Test2 ul {height: 23px; margin: 0; padding: 0; overflow: hidden ;}
. Test2 li {margin-left:-1px; padding: 0 6px; line-height: 12px; float: left; background: url ("http://i1.sinaimg.cn/dy/deco/2009/0825/sinahome_0803_ws_002_new.gif ") no-repeat scroll 0-250px transparent ;}
</Style>
</Head>
<Body>
<Div class = "test1">
<Ul>
<Li> <a href = ""> homepage 1 </a> </li>
<Li> <a href = ""> homepage 1 </a> </li>
<Li class = "actived"> <a href = ""> homepage 1 </a> </li>
<Li> <a href = ""> homepage 1 </a> </li>
</Ul>
</Div>
<Br/>
<Div class = "test2">
<Ul>
<Li> <a href = ""> dw </a> </li>
<Li> <a href = ""> dw </a> </li>
<Li> <a href = ""> dw </a> </li>
</Ul>
</Div>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
