可以先做一整张的大图,150高度,把导航和店招都做进去,比如这样
这里因为整张图都是在ps里做的,所以可以随意修改文字颜色等等样式,接下去是要把这个放到导航里去且可以点击。
第一步:在装修——样式管理——背景设置 里的页头背景图里上传这张图片
第二步:这时我们会发现原来的导航文字会跟我们做的图重叠,这里就要修改导航的css样式,1、把导航背景设置为透明
2、把导航文字设置为透明
3、把鼠标滑过导航的背景设置为透明
4、把所有分类文字设置为透明
5、把所有分类背景设置为透明
代码如下:.skin-box-bd{background:url(这里是一张透明图片地址);}
.all-cats .link{这里是一张透明图片地址);}
.skin-box-bd .menu-list .menu .title{color:#00CCFF;font-size:16px;opacity:0;}
.skin-box-bd .menu-list .menu .link .title{font-family:微软雅黑;}
.skin-box-bd.all-cats .title{color:#FFF100;font-size:14px;opacity:0;}
.menu-list .menu-hover .link{background:url(这里是一张透明图片地址);}
其中透明图片可用ps做一张透明的然后保存为png格式即可,上传到图片空间获取地址复制到上述代码文字处。
注意:因为要实现鼠标可点击跳转的功能,所以原来导航上的一级导航文字位置一定要跟所做的图片导航文字位置重合!!可以在加代码前截一张原来导航的图
然后放到ps里面所做图上面,修改其透明度,就可以比较位置,然后修改至重合即可
然后把原来做的导航文字移动一下位置,跟原来系统导航重合即可。