【旺铺2012 专业版分享】导航CSS代码深入分析 制作属于自己的店招分类.pdfVIP

【旺铺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(/imgextra/i1/1053486591/T2Ffq3X c8aXXXXXXXX_!!1053486591.jpg);} 这图片可以是直接一根950的，但我觉得没那必要，它会自动平铺。 因为我的图有抽丝效果，我只选择30*30Pixel，后面会有说明。 ②号代码 .skin-box-bd .menu-list{background:url(/imgextra/i1/105348659 1/T2Ffq3Xc8aXXXXXXXX_!!1053486591.jpg);} 用③号代码修补一下 .skin-box-bd{background:url(/imgextra/i1/1053486591/T2Ffq3Xc8a XXXXXXXX_!!1053486591.jpg);} 三张图片都是一样的哦！ 然后是④⑤号代码 .skin-box-bd .menu-list .menu-selected .link{background:url(/imgextr a/i2/1053486591/T2uEuDXnlbXXXXXXXX_!!1053486591.jpg);} .skin-box-bd .menu-list .menu-selected .link .title{background:url(/im gextra/i2/1053486591/T2uEuDXnlbXXXXXXXX_!!1053486591.jpg);} 跟前面的一样，30X30Pixel 就可以了。 因为这部分是两张图组成的，素材图用上去后会被拉伸，所以一定横向拉伸不会变形影响效 果的。 举得反例 所用代码 如果用这张图片 我们看看效果 相当的悲剧！ 换成前面的，停留在某链接的页面时就是这种效果。 代码如下 当然，这不是很好看啦！主要是本人能力有限，而且，现在我也只是讲公式~~~ 这是我的东西，但不是你的个性，量身定做还是得你们自己DIY。 导航的背景差不多就这些。 分隔一下 按下来说说文字效果。 一级分类分“所有分类”与其它两个部分，两个部分要各自修改。 ⑦“所有分类”以外文字的代码 .menu-list .menu .title{color:#颜色代码;font-size:字号px;} ⑧“所有分类”代码 .all-cats .link .title{color:#颜色代