手机版 | 登陆 | 注册 | 投稿 | 反馈留言 | 设首页 | 加收藏
网站首页 > 素材 > 特效 > 特效技巧 >蓝白相间纯CSS悬停立体效果导航菜单特效

蓝白相间纯CSS悬停立体效果导航菜单特效

时间:2018-01-20    点击: 次    发布者:佚名 - 小 + 大

CSS导航菜单实例




代码如下:

<fck:meta http-equiv="Content-Type" mrc="text/html; charset=gb2312">
<title>
CSS导航菜单实例
</title>
<style type="text/css">
* {
font-size:12px;
text-align:center;
}
body{
background:#Fff;
}
#nav {
width:700px;
margin:20px auto 0 auto;
}
#nav li {
display: inline;
list-style-type: none;
}
#nav li a:link,#nav li a:visited {
float:left;
margin-right:2px;
padding:3px 8px 3px 8px;
text-decoration: none;
color:#fff;
background:#06f;
border-top:1px solid #fff;
border-right:1px solid #333;
border-bottom:1px solid #333;
border-left:1px solid #fff;
}
#nav li a:hover {
padding:2px 8px 4px 8px;
border-top:1px solid #333;
border-right:1px solid #fff;
border-bottom:1px solid #fff;
border-left:1px solid #333;
}
#nav li a#current {
color:#ff0;
}
</style>
<ul id="nav">
<li>
<a href="../" id="current">模板无忧</a> 
</li>
<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>
<li>
<a href="../">下载排行</a> 
</li>
<li>
<a href="../">联系我们</a> 
</li>
</ul>
</fck:meta>

上一篇:简约、兼容好的XHTML+css二级导航菜单特效

下一篇:没有了



Copyright © 2019 天人系列管理系统 版权所有,授权www.rjc.wang使用  Powered by 55TR.COM 运行代码测试页
锐教程网站www.rjc.wang由天天科技荣誉出品