注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

米欧互联

No matter what you want to express……

 
 
 

日志

 
 

钢琴按键效果的CSS导航栏代码  

2013-07-04 15:06:42|  分类: html |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
效果图:
钢琴按键效果的CSS导航栏代码 - 米欧studio - 米欧光影工作室
 

代码:

/*导航的结构*/
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>








/*导航的样式*/
#nav{ width:200px; font-family:Arial, Helvetica, sans-serif; font-size:18px/12;}

#nav ul {
list-style:none;
padding:0; margin:20px 0 0 0; text-indent:0;
}
 
#nav li {
padding:0; margin:3px;
list-style:none;
}
 
#nav li a {
font-size:12px; line-height:12px;/*字体大小和行间距*/
display:block; background-color:#e8e8e8;
padding:7px; margin:0;
text-decoration:none; color:#000;
border-bottom:1px solid #bbb;
text-align:right;
}
 
#nav li a::after {
content:'>>'; color:#aaa; font-weight:bold;
display:inline; float:right;
margin:0 2px 0 5px;
}
 
#nav li a:hover, #nav li a:focus {
background:#f8f8f8;
border-bottom-color:#777;
}
 
#nav li a:hover::after {
margin:0 0 0 7px; color:#f93;
}
 
#nav li a:active {
padding:8px 7px 6px 7px;
}



refer:
1.
  评论这张
 
阅读(285)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018