特效描述:利用CSS实现 彩色导航菜单,利用CSS实现彩色导航菜单
代码结构
1. 引入CSS
<link rel="stylesheet" href="sliding.css" type="text/css" media="screen" />
2. HTML代码
<ul class="green"> <li><a href="#" title="home" class="current"><span>home</span></a></li> <li><a href="#" title="products"><span>products</span></a></li> <li><a href="#" title="blog"><span>blog</span></a></li> <li><a href="#" title="contact"><span>contact</span></a></li> </ul> <ul class="blue"> <li><a href="#" title="home" class="current"><span>home</span></a></li> <li><a href="#" title="products"><span>products</span></a></li> <li><a href="#" title="blog"><span>blog</span></a></li> <li><a href="#" title="contact"><span>contact</span></a></li> </ul> <ul class="pink"> <li><a href="#" title="home" class="current"><span>home</span></a></li> <li><a href="http://51qianduan.com" title="products"><span>products</span></a></li> <li><a href="#" title="blog"><span>blog</span></a></li> <li><a href="#" title="contact"><span>contact</span></a></li> </ul> <ul class="red"> <li><a href="#" title="home" class="current"><span>home</span></a></li> <li><a href="#" title="products"><span>products</span></a></li> <li><a href="#" title="blog"><span>blog</span></a></li> <li><a href="#" title="contact"><span>contact</span></a></li> </ul> <div style="text-align:center;clear:both"> </div>