【旺铺2012分享】导航css代码深入篇 全方位制作属于你的个性导航

《【旺铺2012分享】导航css代码深入篇 全方位制作属于你的个性导航》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、【旺铺2012分享】导航CSS代码深入篇全方位制作属于你的个性导航论坛里很早就有修改导航代码的教程了，大家应该也都知道。一些基本的我就不再重复了，本帖旨在深入与提高。用到的软件有Photoshop，Dreamweaver，不会用吗？其实我也只是个老菜鸟，不过我们不用在意这些，两个软件只是辅助一下。我们只是从中拿点数据来用而已，在下会提供所有源文件供大家“分解”！①修改导航链接文字的背景色.skin-box-bd.link{background:#000000;}②修改整个导航的背景色.skin-box-bd.m

2、enu-list{background:#000000;}到这里大家会发现导航右边会有一缺口，我也不知道是啥东西，不管它下一个代码补上。③修补导航右侧缺口.skin-box-bd{background:#000000;}这个比较简单，我就不啰嗦了，#后面是颜色值，大家可以调用Photoshop来获取。如图到这里，还有链接文字点击的背景没被换到，这里分为字里字外两个部分，再上两个代码！④链接文字后内背景代码.skin-box-bd.menu-list.menu-selected.link.title{backgr

3、ound:#000000;}⑤链接文字点击后外背景代码.skin-box-bd.menu-list.menu-selected.link{background:#000000;}把这两个颜色取值相同就看不出了。以上是关于导航颜色的部分，这些大家应该都知道了，我就只大概说一下，后边套套公式就可以了。下面进入主题！单独个性颜色是不是太单调了呢？整点图片那才叫个性！每个代码的颜色值都可以换成“url(图片链接)”，大家可以参考一下我做的。我用的图片有这几张下面几张图店招+导航全局主图按下文字后的背景图导航背景色页头背

4、景图其实都是从源文件里裁出来的。花了些时间整理了一下，稍后我会上传源文件供大家试用。回到正题，接下来就直接套代码吧！首先上①号代码.skin-box-bd.link{background:url(http://img01.taobaocdn.com/imgextra/i1/1053486591/T2Ffq3Xc8aXXXXXXXX_!!1053486591.jpg);}这图片可以是直接一根950的，但我觉得没那必要，它会自动平铺。因为我的图有抽丝效果，我只选择30*30Pixel，后面会有说明。②号代码.ski

5、n-box-bd.menu-list{background:url(http://img01.taobaocdn.com/imgextra/i1/1053486591/T2Ffq3Xc8aXXXXXXXX_!!1053486591.jpg);}用③号代码修补一下.skin-box-bd{background:url(http://img01.taobaocdn.com/imgextra/i1/1053486591/T2Ffq3Xc8aXXXXXXXX_!!1053486591.jpg);}三张图片都是一样的哦！

6、然后是④⑤号代码.skin-box-bd.menu-list.menu-selected.link{background:url(http://img02.taobaocdn.com/imgextra/i2/1053486591/T2uEuDXnlbXXXXXXXX_!!1053486591.jpg);}.skin-box-bd.menu-list.menu-selected.link.title{background:url(http://img02.taobaocdn.com/imgextra/i2/105

7、3486591/T2uEuDXnlbXXXXXXXX_!!1053486591.jpg);}跟前面的一样，30X30Pixel就可以了。因为这部分是两张图组成的，素材图用上去后会被拉伸，所以一定横向拉伸不会变形影响效果的。举得反例所用代码如果用这张图片我们看看效果相当的悲剧！换成前面的，停留在某链接的页面时就是这种效果。代码如下当然，这不是很好看啦！主要是本人能力有限，而且，现在我也只是讲公式~~~这是我的东西，但不是你的个性，量身定做还是得你们自己DIY。导航的背景差不多就这些。...............

8、...........................................分隔一下..............................................................按下来说说文字效果。一级分类分“所有分类”与其它两个部分，两个部分要各自修改。⑦“所有分类”以外文字的代码.menu-list.menu.title{color:#颜色代