[旺铺2012专业版分享]导航CSS代码深入分析制作属于自己的店招分类VIP免费

【旺铺2012分享】导航CSS代码深入篇全方位制作属于你的个性导航论坛里很早就有修改导航代码的教程了，大家应该也都知道。一些基本的我就不再重复了，本帖旨在深入与提高。用到的软件有Photoshop，Dreamweaver，不会用吗？其实我也只是个老菜鸟，不过我们不用在意这些，两个软件只是辅助一下。我们只是从中拿点数据来用而已，在下会提供所有源文件供大家“分解”！①修改导航链接文字的背景色.skin-box-bd.link{background:#000000;}②修改整个导航的背景色.skin-box-bd.menu-list{background:#000000;}到这里大家会发现导航右边会有一缺口，我也不知道是啥东西，不管它下一个代码补上。③修补导航右侧缺口.skin-box-bd{background:#000000;}这个比较简单，我就不啰嗦了，#后面是颜色值，大家可以调用Photoshop来获取。如图到这里，还有链接文字点击的背景没被换到，这里分为字里字外两个部分，再上两个代码！④链接文字后内背景代码.skin-box-bd.menu-list.menu-selected.link.title{background:#000000;}⑤链接文字点击后外背景代码.skin-box-bd.menu-list.menu-selected.link{background:#000000;}把这两个颜色取值相同就看不出了。以上是关于导航颜色的部分，这些大家应该都知道了，我就只大概说一下，后边套套公式就可以了。下面进入主题！单独个性颜色是不是太单调了呢？整点图片那才叫个性！每个代码的颜色值都可以换成“url(图片链接)”，大家可以参考一下我做的。我用的图片有这几张下面几张图店招+导航全局主图按下文字后的背景图导航背景色页头背景图其实都是从源文件里裁出来的。花了些时间整理了一下，稍后我会上传源文件供大家试用。回到正题，接下来就直接套代码吧！首先上①号代码.skin-box-bd.link{background:url(http://img01.taobaocdn.com/imgextra/i1/1053486591/T2Ffq3Xc8aXXXXXXXX_!!1053486591.jpg);}这图片可以是直接一根950的，但我觉得没那必要，它会自动平铺。因为我的图有抽丝效果，我只选择30*30Pixel，后面会有说明。②号代码.skin-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);}三张图片都是一样的哦！然后是④⑤号代码.skin-box-bd.menu-list.menu-selected.link{background:url(http://...