爱购论坛

 找回密码
 立即注册
搜索
查看: 4663|回复: 7

[图文教程] 旺铺2012分享导航CSS代码深入篇 制作属于个性导航

  [复制链接]
匿名
匿名  发表于 2012-11-20 21:38:11 |阅读模式
导航CSS代码深入篇 全方位制作属于你的个性导航
论坛里很早就有修改导航代码的教程了,大家应该也都知道。
一些基本的我就不再重复了,本帖旨在深入与提高。
用到的软件有PhotoshopDreamweaver,不会用吗?
其实我也只是个老菜鸟,不过我们不用在意这些,两个软件只是辅助一下。
我们只是从中拿点数据来用而已,在下会提供所有源文件供大家分解 2.gif
修改导航链接文字的背景色
.skin-box-bd .link{background:#000000;}
T2tn4LXeFeXXXXXXXX_%21%211053486591.png
②修改整个导航的背景色
.skin-box-bd .menu-list{background:#000000;}
T2Bt94XlpXXXXXXXXX_%21%211053486591.png
到这里大家会发现导航右边会有一缺口,我也不知道是啥东西,不管它下一个代码补上。
③修补导航右侧缺口
.skin-box-bd{background:#000000;}
T2VpJLXm8cXXXXXXXX_%21%211053486591.png
这个比较简单,我就不啰嗦了,#后面是颜色值,大家可以调用Photoshop来获取。
如图
T2WmyGXbtcXXXXXXXX_%21%211053486591.png
到这里,还有链接文字点击的背景没被换到,这里分为字里字外两个部分,再上两个代码!
④链接文字后内背景代码
.skin-box-bd .menu-list .menu-selected .link .title{background:#000000;}
⑤链接文字点击后外背景代码
.skin-box-bd .menu-list .menu-selected .link{background:#000000;}
把这两个颜色取值相同就看不出了。
以上是关于导航颜色的部分,这些大家应该都知道了,我就只大概说一下,后边套套公式就可以了。
下面进入主题!
单独个性颜色是不是太单调了呢?整点图片那才叫个性!
每个代码的颜色值都可以换成“url(图片链接)”,大家可以参考一下我做的。
我用的图片有这几张下面几张图
T2lyueXbVcXXXXXXXX_%21%211053486591.png 店招+导航全局主图
T22jCyXXhcXXXXXXXX_%21%211053486591.png   
按下文字后的背景图
T2ST1LXXVbXXXXXXXX_%21%211053486591.png   
导航背景色

T2DWiKXdVbXXXXXXXX_%21%211053486591.png 页头背景图

T2uTW3Xf0aXXXXXXXX_%21%211053486591.png   

其实都是从源文件里裁出来的。
T2uLS4XhxXXXXXXXXX_%21%211053486591.png
花了些时间整理了一下,稍后我会上传源文件供大家试用。

匿名
匿名  发表于 2012-11-20 21:39:37
接着1楼

回到正题,接下来就直接套代码吧!

  1. 首先上①号代码

  2. .skin-box-bd .link{background:url(http://img01.taobaocdn.com/imgextra/i1/1053486591/T2Ffq3Xc8aXXXXXXXX_!!1053486591.jpg);}

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

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

  5. ②号代码

  6. .skin-box-bd .menu-list{background:url(http://img01.taobaocdn.com/imgextra/i1/1053486591/T2Ffq3Xc8aXXXXXXXX_!!1053486591.jpg);}

  7. 用③号代码修补一下

  8. .skin-box-bd{background:url(http://img01.taobaocdn.com/imgextra/i1/1053486591/T2Ffq3Xc8aXXXXXXXX_!!1053486591.jpg);}
复制代码



三张图片都是一样的哦!

然后是④⑤号代码

  1. .skin-box-bd .menu-list .menu-selected .link{background:url(http://img02.taobaocdn.com/imgextra/i2/1053486591/T2uEuDXnlbXXXXXXXX_!!1053486591.jpg);}

  2. .skin-box-bd .menu-list .menu-selected .link .title{background:url(http://img02.taobaocdn.com/imgextra/i2/1053486591/T2uEuDXnlbXXXXXXXX_!!1053486591.jpg);}
复制代码



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

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

举个反例

所用代码

T253uaXdVcXXXXXXXX_%21%211053486591.png

如果用这张图片 T2fc54Xk8XXXXXXXXX_%21%211053486591.png 我们看看效果

T2RA1SXbFbXXXXXXXX_%21%211053486591.png

相当的悲剧!

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

代码如下


T2pcKYXnhaXXXXXXXX_%21%211053486591.png


T2uLl3XkFdXXXXXXXX_%21%211053486591.png



当然,这不是很好看啦!主要是本人能力有限,而且,现在我也只是讲公式~~~

这是我的东西,但不是你的个性,量身定做还是得你们自己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:"黑体";}

T2Mka3XbpaXXXXXXXX_%21%211053486591.png

代码就是这么简单。

.menu-list .menu .title{font-family:"字体名称";color:#颜色代码;font-size:字号px;}


怎么找到字体名称呢?刚才说到的Dreamweaver可以上场了。

搞代码你还真的少不了它,哪怕你是个菜鸟(菜鸟算上我)。

T2eH8RXfleXXXXXXXX_%21%211053486591.png

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

.menu-list .menu .title{font-family: "方正行黑简体";font-size: 18px;color: #00FF00;font-weight: bold;}

效果就是这个样

T2MpSXXipXXXXXXXXX_%21%211053486591.png

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

T2Hk5uXedcXXXXXXXX_%21%211053486591.png
T23m10XoNaXXXXXXXX_%21%211053486591.png

看到这鸟样爽了吧?疑问也出来了吧?

别捣腾了,字体是不可以乱搞的!

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

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

字号一般1220之间,自己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:#颜色代码}

匿名
匿名  发表于 2012-11-20 21:40:35
接着上面说的。

看一下总体效果吧!

T2Smy3XexaXXXXXXXX_%21%211053486591.png


T2lRq3XgBaXXXXXXXX_%21%211053486591.png





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

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


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

导航以上高度也就150,拿我那源文件来说,你可以直接用
T2agG3XllaXXXXXXXX_%21%211053486591.png

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

T2FlCKXb0bXXXXXXXX_%21%211053486591.png

T2y8q3XmNaXXXXXXXX_%21%211053486591.png

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

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

T2iWt3XcNdXXXXXXXX_%21%211053486591.png

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

T2DWiKXdVbXXXXXXXX_%21%211053486591.png

150X30

T2RQKGXjFbXXXXXXXX_%21%211053486591.png

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

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

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


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

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


T2yJ52XbBXXXXXXXXX_%21%211053486591.png

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

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

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


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

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

T2_zu1XftaXXXXXXXX_%21%211053486591.png

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

T2vHKWXX4bXXXXXXXX_!!1053486591.png

组123  图层1图层2图层3 ,多省事啊!呵呵~~


这源文件呢!做得一般般,喜欢的可以直接拿去用,不喜欢的可以在此基础上修改。

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




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




发表于 2012-11-30 22:45:09 | 显示全部楼层
本帖最后由 发呆。 于 2012-11-30 22:46 编辑

楼主我想请教你页面背景图是怎么弄的,那中立体效果很棒!求方法
发表于 2012-12-4 21:48:29 | 显示全部楼层
佩服啊
发表于 2013-6-7 12:22:01 | 显示全部楼层
果然牛,,学习了。
发表于 2014-7-4 13:54:55 | 显示全部楼层
强帖终于出现,要顶的啊,谢谢楼主











http://povc.org/   http://ppsspptv.org/sitemap.html   http://povc.org/sitemap.html  
发表于 2016-4-14 16:03:51 | 显示全部楼层
谢谢楼主,辛苦了,值得收藏,向楼主致敬。微信转发视频加我微信号:niux1688
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

网店装修|淘宝店铺装修免费模板|专业版模板|淘宝装修教程|淘宝大学|淘宝素材|淘宝店铺装修视频教程|店招在线制作|爱购论坛  

GMT+8, 2019-1-23 22:01

快速回复 返回顶部 返回列表