旺铺分享导航CSS代码深入篇 全方位制作属于你的个性导航.docx

旺铺分享导航CSS代码深入篇 全方位制作属于你的个性导航.docx

《旺铺分享导航CSS代码深入篇 全方位制作属于你的个性导航.docx》由会员分享，可在线阅读，更多相关《旺铺分享导航CSS代码深入篇 全方位制作属于你的个性导航.docx（15页珍藏版）》请在冰豆网上搜索。

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

【旺铺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（

这图片可以是直接一根950的，但我觉得没那必要，它会自动平铺。

因为我的图有抽丝效果，我只选择30*30Pixel，后面会有说明。

②号代码

.skin-box-bd.menu-list{background:

url（

用③号代码修补一下

.skin-box-bd{background:

url（

三张图片都是一样的哦！

然后是④⑤号代码

.skin-box-bd.menu-list.menu-selected.link{background:

url（

.skin-box-bd.menu-list.menu-selected.link.title{background:

url（

跟前面的一样，30X30Pixel就可以了。

因为这部分是两张图组成的，素材图用上去后会被拉伸，所以一定横向拉伸不会变形影响效果的。

举得反例

所用代码

如果用这张图片

我们看看效果

相当的悲剧！

换成前面的，停留在某链接的页面时就是这种效果。

代码如下

当然，这不是很好看啦！

主要是本人能力有限，而且，现在我也只是讲公式~~~

这是我的东西，但不是你的个性，量身定做还是得你们自己DIY。

导航的背景差不多就这些。

..........................................................分隔一下..............................................................

按下来说说文字效果。

一级分类分“所有分类”与其它两个部分，两个部分要各自修改。

⑦“所有分类”以外文字的代码

.menu-list.menu.title{color:

#颜色代码;font-size:

字号px;}

⑧“所有分类”代码

.all-cats.link.title{color:

#颜色代码;font-size:

字号px;}

这是从论坛里学来的，你认为抄袭就是抄袭吧！

但我抄出新意了。

那默认字体实在是不太好看，想改改吗？

在上面代码上动点手脚就可以啦！

用这段代码效果怎样？

.menu-list.menu.title{color:

#FFFFFF;font-size:

15px;font-family:

"黑体";}

代码就是这么简单。

.menu-list.menu.title{font-family:

"字体名称";color:

#颜色代码;font-size:

字号px;}

怎么找到字体名称呢？

刚才说到的Dreamweaver可以上场了。

搞代码你还真的少不了它，哪怕你是个菜鸟（菜鸟算上我）。

颜色，字号，字体，代码就在上面，你也可以试试加粗。

.menu-list.menu.title{font-family:

"方正行黑简体";font-size:

18px;color:

#00FF00;font-weight:

bold;}

效果就是这个样

好吧！

拿我店子真枪实战开几刀吧~~

看到这鸟样爽了吧？

疑问也出来了吧？

别捣腾了，字体是不可以乱搞的！

这不是图片，不是你电脑里有什么字体你就可以用什么字体，网页常用的。

比如宋体，仿宋，黑体，一般改个黑体就足够醒目的啦！

字号一般12到20之间，自己DIY去吧！

你设成200我也没意见的！

重在DIY！

哈哈哈哈

要提醒一点，这里如果修改了颜色鼠标经过就不会再变色了哦！

不喜欢的可以把color:

#XXXXXX干掉。

我个人认为，有了④⑤号代码也可以了。

剩下的“所有分类”也可以按这样修改。

有一点，修改字号后导航上会只有一个“所有分类”。

我也只是个菜鸟，我也不懂这是为什么，反正我不改就是了。

要不然干脆就干掉它！

.all-cats{display:

none;}反正上面可以添加分类。

我自己用的代码差不多就这些了，像二级分类还有一些可以捣腾的，我就不参合了。

再次引用一下，或者说抄袭吧！

首页导航栏的文字出现背景，修改代码：

.skin-box-bd.menu-list.menu-selected.link.title{background:

#颜色代码}

导航背景色代码：

.menu-list.link{background:

#颜色代码}

导航栏文字：

.menu-list.menu.title{color:

#颜色代码;font-size:

字号;}

宝贝分类二级菜单文字颜色代码：

.menu-popup-cats.sub-cat.cat-name{color:

#颜色代码}

所有分类的背景色代码：

.all-cats.link{background:

#颜色代码}

所有分类的文字代码：

.all-cats.link.title{color:

#颜色代码;font-size:

字号;}

所有分类后面的分隔线代码：

.all-cats.link{border-color:

#颜色代码}

整个导航背景色代码：

.skin-box-bd{background:

#颜色代码;}

整个分类段的背景色代码：

.skin-box-bd.menu-list{background:

#颜色代码}

二级分类文字代码：

.popup-content.cats-tree.fst-cat.cat-name{font-size:

字号;color:

#颜色代码;font-weight:

bold/bolder/normal;}

二级分类背景代码：

.popup-content{background:

#颜色代码}

三级分类文字代码：

.popup-content.cats-tree.fst-cat.cat-name{font-size:

字号;color:

#颜色代码;font-weight:

bold/bolder/normal;}

三级分类背景代码：

.popup-content.cats-tree.snd-pop-inner{background:

#颜色代码}

一级导航分类分隔线颜色代码：

.menu-list.menu{border-color:

#颜色代码}

鼠标滑过一级分类导航文字变换背景色代码：

.menu-list.menu-hover.link{background:

#颜色代码}

鼠标滑过二级分类导航文字变换背景色代码：

.popup-content.cats-tree.cat-hd-hover{background:

#颜色代码}

鼠标滑过三级分类导航文字变换背景色代码：

.popup-content.cats-tree.snd-cat-hd-hover{background:

#颜色代码}

鼠标滑过宝贝分类的文字变换背景色代码：

.menu-popup-cats.sub-cat-hover{background:

#颜色代码}

鼠标滑过宝贝分类的文字变换颜色代码：

.menu-popup-cats.sub-cat-hover.cat-name{color:

#颜色代码}

捣腾这个真的很累人。

看一下总体效果吧！

最直接的还是直接使用，。

第一次发贴，这不算是打广告吧？

罪过罪过！

！

！

这里只说导航，大家要是点进去了就只看导航，别看商品。

不过。

。

。

。

我那店子一看也不像是要做生意的。

装修中。

。

。

。

接下来说说店招跟页头吧！

导航以上高度也就150，拿我那源文件来说，你可以直接用

但是高度必需120，要不然导航就被挤掉了。

当然，也可以只裁灰色部分，减少图片加载时间。

我的没有裁，跟页头用的也是同一张图，懒得再另外传了。

如果要分开的话那页头就没必要那么大了，这个足够了

150X30

怎么平铺怎么对齐那要看哪个最近似于无缝相接了。

图片的话当然是越小越好了，容易加载。

中国的宽带都比较吭爹，再加上个啥啥啥快播之类的，那图片就看不到了。

。

。

。

不知道大家喜欢这抽丝效果，我说明一下。

目前我用的就只是这两个抽丝图案

正的跟反的，这里每个是3个像素，所以为了无缝相接，上面的我一般都是宽度都是3的倍数。

图片抽丝其实挺好看的，这个对PS有一定的要求，不懂的先去XX一下。

有不明的地方也可以回下帖子。

反正我那源文件就摆在那里了，效果你可以说我是丘抄袭，但是这图绝对是我纯手工制作的。

为了让大家明了，我每个图层都标注名称了。

要知道，我平时自己用的一般是不会写名称的！

组1组2组3图层1图层2图层3，多省事啊！

呵呵~~

这源文件呢！

做得一般般，喜欢的可以直接拿去用，不喜欢的可以在此基础上修改。

说来说去还是个公式，把你喜欢的图片套上去，再删掉原有的就是你自己的风格了。

差不多了，太累人了，因为不是一气呵成的，也不知道有没有错，我就懒得检查了。

本帖旨在分享，无任何版权，欢迎盗用！

不详之处随时可以指出，错误的地方就直接上砖吧！

累得睡着了，应该不会觉得痛的。

评论权归大家所有，但最终解释权得归本人。

若要抄袭随时欢迎！