《旺铺分享导航CSS代码深入篇全方位制作属于你的个性导航.doc》由会员分享，可在线阅读，更多相关《旺铺分享导航CSS代码深入篇全方位制作属于你的个性导航.doc（20页珍藏版）》请在三一办公上搜索。
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(这图片可以是直接一根950的，但我觉得没那必要，它会自动平
4、铺。因为我的图有抽丝效果，我只选择30*30Pixel，后面会有说明。号代码.skin-box-bd .menu-listbackground:url(用号代码修补一下.skin-box-bdbackground:url(三张图片都是一样的哦！然后是号代码.skin-box-bd .menu-list .menu-selected .linkbackground:url(.skin-box-bd .menu-list .menu-selected .link .titlebackground:url(跟前面的一样，30X30Pixel就可以了。因为这部分是两张图组成的，素材图用上去后会被拉伸，
5、所以一定横向拉伸不会变形影响效果的。举得反例所用代码如果用这张图片 我们看看效果相当的悲剧！换成前面的，停留在某链接的页面时就是这种效果。代码如下当然，这不是很好看啦！主要是本人能力有限，而且，现在我也只是讲公式这是我的东西，但不是你的个性，量身定做还是得你们自己DIY。导航的背景差不多就这些。.分隔一下.按下来说说文字效果。一级分类分“所有分类”与其它两个部分，两个部分要各自修改。“所有分类”以外文字的代码.menu-list .menu .titlecolor:#颜色代码;font-size:字号px;“所有分类”代码.all-cats .link .titlecolor:#颜色代码;fo
6、nt-size:字号px;这是从论坛里学来的，你认为抄袭就是抄袭吧！但我抄出新意了。那默认字体实在是不太好看，想改改吗？在上面代码上动点手脚就可以啦！用这段代码效果怎样？.menu-list .menu .titlecolor:#FFFFFF;font-size:15px;font-family:黑体;除全部分类以外代码就是这么简单。.menu-list .menu .titlefont-family:字体名称;color:#颜色代码;font-size:字号px;全部分类 代码.all-cats .link .titlefont-family:字体名称;color:#颜色代码;font-si
7、ze:字号px;怎么找到字体名称呢？刚才说到的Dreamweaver可以上场了。搞代码你还真的少不了它，哪怕你是个菜鸟（菜鸟算上我）。颜色，字号，字体，代码就在上面，你也可以试试加粗。.menu-list .menu .titlefont-family: 方正行黑简体;font-size: 18px;color: #00FF00;font-weight: bold;效果就是这个样好吧！拿我店子真枪实战开几刀吧看到这鸟样爽了吧？疑问也出来了吧？别捣腾了，字体是不可以乱搞的！这不是图片，不是你电脑里有什么字体你就可以用什么字体，网页常用的。比如宋体，仿宋，黑体，一般改个黑体就足够醒目的啦！字号一般
8、12到20之间，自己DIY去吧！你设成200我也没意见的！重在DIY！哈哈哈哈要提醒一点，这里如果修改了颜色鼠标经过就不会再变色了哦！不喜欢的可以把color: #XXXXXX干掉。我个人认为，有了号代码也可以了。剩下的“所有分类”也可以按这样修改。有一点，修改字号后导航上会只有一个“所有分类”。我也只是个菜鸟，我也不懂这是为什么，反正我不改就是了。要不然干脆就干掉它！.all-catsdisplay:none;反正上面可以添加分类。我自己用的代码差不多就这些了，像二级分类还有一些可以捣腾的，我就不参合了。再次引用一下，或者说抄袭吧！首页导航栏的文字出现背景，修改代码：.skin-box-bd
9、 .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:#颜色代码;font
10、-size:字号;所有分类后面的分隔线代码：.all-cats .linkborder-color:#颜色代码11.一级导航“所有宝贝”分类分隔线颜色代码如下：.all-cats .linkborder-color:#000000;整个导航背景色代码：.skin-box-bdbackground:#颜色代码;整个分类段的背景色代码：.skin-box-bd .menu-listbackground:#颜色代码二级分类文字代码：.popup-content .cats-tree .fst-cat .cat-namefont-size:字号;color:#颜色代码;font-weight:bold
11、/bolder/normal;二级分类背景代码：.popup-contentbackground:#颜色代码三级分类文字代码：.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:#颜色代码鼠标滑过一级分类导航文字变换背景色代码：.men
12、u-list .menu-hover .linkbackground:#颜色代码鼠标滑过二级分类导航文字变换背景色代码： .popup-content .cats-tree .cat-hd-hoverbackground:#颜色代码鼠标滑过三级分类导航文字变换背景色代码： .popup-content .cats-tree .snd-cat-hd-hoverbackground:#颜色代码鼠标滑过宝贝分类的文字变换背景色代码：.menu-popup-cats .sub-cat-hoverbackground:#颜色代码鼠标滑过宝贝分类的文字变换颜色代码：.menu-popup-cats .su
13、b-cat-hover .cat-name color:#颜色代码捣腾这个真的很累人。看一下总体效果吧！最直接的还是直接使用，。第一次发贴，这不算是打广告吧？罪过罪过！这里只说导航，大家要是点进去了就只看导航，别看商品。不过。我那店子一看也不像是要做生意的。装修中。接下来说说店招跟页头吧！导航以上高度也就150，拿我那源文件来说，你可以直接用但是高度必需120，要不然导航就被挤掉了。当然，也可以只裁灰色部分，减少图片加载时间。我的没有裁，跟页头用的也是同一张图，懒得再另外传了。如果要分开的话那页头就没必要那么大了，这个足够了150X30怎么平铺怎么对齐那要看哪个最近似于无缝相接了。图片的话当然
14、是越小越好了，容易加载。中国的宽带都比较吭爹，再加上个啥啥啥快播之类的，那图片就看不到了。不知道大家喜欢这抽丝效果，我说明一下。目前我用的就只是这两个抽丝图案正的跟反的，这里每个是3个像素，所以为了无缝相接，上面的我一般都是宽度都是3的倍数。图片抽丝其实挺好看的，这个对PS有一定的要求，不懂的先去百度一下。有不明的地方也可以回下帖子。反正我那源文件就摆在那里了，效果你可以说我是丘抄袭，但是这图绝对是我纯手工制作的。为了让大家明了，我每个图层都标注名称了。要知道，我平时自己用的一般是不会写名称的！组1组2组3 图层1图层2图层3 ，多省事啊！呵呵这源文件呢！做得一般般，喜欢的可以直接拿去用，不喜欢的可以在此基础上修改。说来说去还是个公式，把你喜欢的图片套上去，再删掉原有的就是你自己的风格了。差不多了，太累人了，因为不是一气呵成的，也不知道有没有错，我就懒得检查了。本帖旨在分享，无任何版权，欢迎盗用！不详之处随时可以指出，错误的地方就直接上砖吧！累得睡着了，应该不会觉得痛的。评论权归大家所有，但最终解释权得归本人。若要抄袭随时欢迎！
