[分享]网页中漂亮的导航01
Posted by Kevin | Filed under Tools/share | 2011-01-23
很久没有做资源分享了，趁过年回家之前先来分享一个，资源和图全是别人做的，我自知从整站中精简了下，然后再css里面做了一下注释，供懒虫们使用。节约开发成本 = = ，可以这么理解。以后决定做成分享专题，把自己觉得不错的资源都分享出来，希望对大家有所帮助！
这次为大家带来一个漂亮的导航。直接看资源分享图。
核心CSS代码：
- /*-- nav css start --*/
- #channel-nav {background:transparent url("catalogbar.png") no-repeat;height: 33px;margin: 0 auto;overflow: hidden;padding: 1px 2px 3px;position: relative;width: 980px; margin-top:40px;}
- #channel-nav ul {font-size: 14px;height: 33px;left: 4px;line-height: 33px;overflow: hidden;position: absolute;top: 1px;width: 100%;}
- #channel-nav li {background: transparent url("catalogbar.png") no-repeat 0 -40px ;float: left;height: 33px;left: -2px;overflow: hidden;padding-left: 2px;position: relative;list-style:none;}
- #channel-nav li a {color: #FFFFFF;float: left;padding: 0 16px;text-decoration: none;}
- #channel-nav li a:hover {background: url("catalogbar.png") no-repeat 50% -41px; text-decoration: none;}
- #channel-nav li.selected a {background: url("catalogbar.png") no-repeat 50% -40px; text-decoration: none;}
- /*-- nav css end --*/
直接观看效果：点击观看
也可以看看以前分享的：
-