《旺铺2012分享导航css代码深入篇全方位制作属于你的个性导航》由会员分享，可在线阅读，更多相关《旺铺2012分享导航css代码深入篇全方位制作属于你的个性导航（19页珍藏版）》请在金锄头文库上搜索。
1、【旺铺2012分享】导航CSS代码深入篇 全方位制作属于你的个性导航论坛里很早就有修改导航代码的教程了，大家应该也都知道。一些基本的我就不再重复了，本帖旨在深入与提高。用到的软件有Photoshop， Dreamweaver，不会用吗？其实我也只是个老菜鸟，不过我们不用在意这些，两个软件只是辅助一下。我们只是从中拿点数据来用而已，在下会提供所有源文件供大家“分解”！修改导航链接文字的背景色.skin-box-bd .linkbackground:#000000;修改整个导航的背景色.skin-box-bd .menu-listbackground:#000000;到这里大家会发现导航右边会有一
2、缺口，我也不知道是啥东西，不管它下一个代码补上。修补导航右侧缺口.skin-box-bdbackground:#000000;这个比较简单，我就不啰嗦了，#后面是颜色值，大家可以调用Photoshop来获取。如图到这里，还有链接文字点击的背景没被换到，这里分为字里字外两个部分，再上两个代码！链接文字后内背景代码.skin-box-bd .menu-list .menu-selected .link .titlebackground:#000000;链接文字点击后外背景代码.skin-box-bd .menu-list .menu-selected .linkbackground:#000000
3、;把这两个颜色取值相同就看不出了。以上是关于导航颜色的部分，这些大家应该都知道了，我就只大概说一下，后边套套公式就可以了。下面进入主题！单独个性颜色是不是太单调了呢？整点图片那才叫个性！每个代码的颜色值都可以换成“url(图片链接)”，大家可以参考一下我做的。我用的图片有这几张下面几张图 店招+导航全局主图 按下文字后的背景图 导航背景色 页头背景图其实都是从源文件里裁出来的。花了些时间整理了一下，稍后我会上传源文件供大家试用。回到正题，接下来就直接套代码吧！首先上号代码.skin-box-bd .linkbackground:url(http:/ .menu-listbackground:u
4、rl(http:/ .menu-list .menu-selected .linkbackground:url(http:/ .menu-list .menu-selected .link .titlebackground:url(http:/ 我们看看效果相当的悲剧！换成前面的，停留在某链接的页面时就是这种效果。代码如下当然，这不是很好看啦！主要是本人能力有限，而且，现在我也只是讲公式这是我的东西，但不是你的个性，量身定做还是得你们自己DIY。导航的背景差不多就这些。.分隔一下.按下来说说文字效果。一级分类分“所有分类”与其它两个部分，两个部分要各自修改。“所有分类”以外文字的代码.menu
5、-list .menu .titlecolor:#颜色代码;font-size:字号px;“所有分类”代码.all-cats .link .titlecolor:#颜色代码;font-size:字号px;这是从论坛里学来的，你认为抄袭就是抄袭吧！但我抄出新意了。那默认字体实在是不太好看，想改改吗？在上面代码上动点手脚就可以啦！用这段代码效果怎样？.menu-list .menu .titlecolor:#FFFFFF;font-size:15px;font-family:黑体;代码就是这么简单。.menu-list .menu .titlefont-family:字体名称;color:#颜色代
6、码;font-size:字号px;怎么找到字体名称呢？刚才说到的Dreamweaver可以上场了。搞代码你还真的少不了它，哪怕你是个菜鸟（菜鸟算上我）。颜色，字号，字体，代码就在上面，你也可以试试加粗。.menu-list .menu .titlefont-family: 方正行黑简体;font-size: 18px;color: #00FF00;font-weight: bold;效果就是这个样好吧！拿我店子真枪实战开几刀吧看到这鸟样爽了吧？疑问也出来了吧？别捣腾了，字体是不可以乱搞的！这不是图片，不是你电脑里有什么字体你就可以用什么字体，网页常用的。比如宋体，仿宋，黑体，一般改个黑体就足够
7、醒目的啦！字号一般12到20之间，自己DIY去吧！你设成200我也没意见的！重在DIY！哈哈哈哈要提醒一点，这里如果修改了颜色鼠标经过就不会再变色了哦！不喜欢的可以把color: #XXXXXX干掉。我个人认为，有了号代码也可以了。剩下的“所有分类”也可以按这样修改。有一点，修改字号后导航上会只有一个“所有分类”。我也只是个菜鸟，我也不懂这是为什么，反正我不改就是了。要不然干脆就干掉它！.all-catsdisplay:none;反正上面可以添加分类。我自己用的代码差不多就这些了，像二级分类还有一些可以捣腾的，我就不参合了。再次引用一下，或者说抄袭吧！首页导航栏的文字出现背景，修改代码：.sk
8、in-box-bd .menu-list .menu-selected .link .titlebackground:#颜色代码导航背景色代码：.menu-list .linkbackground:#颜色代码导航栏文字：.menu-list .menu .titlecolor:#颜色代码;font-size:字号;宝贝分类二级菜单文字颜色代码：.menu-popup-cats .sub-cat .cat-namecolor:#颜色代码所有分类的背景色代码：.all-cats .linkbackground:#颜色代码所有分类的文字代码：.all-cats .link .titlecolor:#
9、颜色代码;font-size:字号;所有分类后面的分隔线代码：.all-cats .linkborder-color:#颜色代码整个导航背景色代码：.skin-box-bdbackground:#颜色代码;整个分类段的背景色代码：.skin-box-bd .menu-listbackground:#颜色代码二级分类文字代码：.popup-content .cats-tree .fst-cat .cat-namefont-size:字号;color:#颜色代码;font-weight:bold/bolder/normal;二级分类背景代码：.popup-contentbackground:#颜色
10、代码三级分类文字代码：.popup-content .cats-tree .fst-cat .cat-namefont-size:字号;color:#颜色代码;font-weight:bold/bolder/normal;三级分类背景代码：.popup-content .cats-tree .snd-pop-innerbackground:#颜色代码一级导航分类分隔线颜色代码：.menu-list .menuborder-color:#颜色代码鼠标滑过一级分类导航文字变换背景色代码：.menu-list .menu-hover .linkbackground:#颜色代码鼠标滑过二级分类导航文字
11、变换背景色代码： .popup-content .cats-tree .cat-hd-hoverbackground:#颜色代码鼠标滑过三级分类导航文字变换背景色代码： .popup-content .cats-tree .snd-cat-hd-hoverbackground:#颜色代码鼠标滑过宝贝分类的文字变换背景色代码：.menu-popup-cats .sub-cat-hoverbackground:#颜色代码鼠标滑过宝贝分类的文字变换颜色代码：.menu-popup-cats .sub-cat-hover .cat-name color:#颜色代码捣腾这个真的很累人。看一下总体效果吧！最直接的还是直接使用，http:/。第一次发贴，这不算是打广告吧？罪过罪过！这里只说导航，大家要是点进去了就只看导航，别看商品。不过。我那店子一看也不像是要做生意的。装修中。接下来说说店招跟页头吧！导航以上高度也就150，拿我那源文件来说，你可以直接用但是高度必需120，要不然导航就被挤掉了。当然，也可以只裁灰色部分，减少图片加载时间。我的没有裁，跟页头用的也是同一张图，懒得再另外传了。如果要分开的话那页头就没必要那么大了，这个足够了150X30怎么平铺怎
