淘宝店铺装修：首页导航CSS代码修改教程（上）

淘宝店铺装修不论对于新手卖家还是老卖家都是非常重要的，聪明的卖家为了迎合顾客的购物体验，会让导航通过CSS代码做的更加完美的。

有个美观的导航才是淘宝店铺装修的开始，一个好的导航不仅能够快速让顾客找到自己需要的商品，更加提升了买家的停留时间和第一印象。但是导航如果想要通过CSS代码来装修好的，其实对于不懂代码的卖家也没有想象中这么难的。CSS能很完美的将我们的导航做到极致，可以完全根据自己的想法来修改好导航，包括文字，文字前小图标，导航高度，宽度，图片背景，透明背景，鼠标划过时的变色等等。

1）店铺导航的构造

淘宝店铺导航可以分为两个部分，就是所有分类和其他分类，而所有分类包含二级、三级导航，而其他分类则只包含二级导航。

2）导航CSS装修实操教学

导航效果对比：修改前导航（第一个系统模板的导航）修改后导航

案例是针对新手制作的，不得不承认，如果对CSS不了解，可能会看着复杂，且玩转导航几乎是不可能的，但同样也可以跟着案例做出漂亮的导航，替换一些自己的要素，达到预期的效果，需要耐心，查看案例时，会有很多重复的属性设置，这是必要的，是为了适应大部分浏览器。

了解CSS代码的卖家可以不看案例直接点击这里，这里列出了导航的HTML构造和相应的CSS名称，可根据构造任意修改，任意设计。

开始一步一步制作。

首先列出导航中用到的素材（图像另存到本地计算机即可使用原图）

店招背景素材

店招素材

按钮素材会在下面教程中一一说明使用方法

1.修改店招背景

完成后效果如上

2.整个导航大小设置

首先了解一下在哪写CSS代码

现在修改导航的整体大小

类名

整个外框类名：.skin-box-bd{}

属性

width：宽度设置

height：高度设置

background：设置背景颜色及图片（颜色代码（如#000000），图片链接：url(图片地址)）

提到过得属性下面不会重复

重要：每个属性必须以分号“;”结束

代码如下

.skin-box-bd{width:950px;height:30px;background:none;}

案例中设置为950像素宽30像素高，背景设置不显示，系统模板其实是无法设置高度的（height属性，貌似固定了30像素，但从装修市场购买的模板可以设置高度）

效果如下

3.其他分类大小及背景设置

类名

其他分类外框类名：.skin-box-bd.menu-list{}

属性

display：设置显示方式（none为隐藏该块，block为块显示，可百度了解该属性）

代码如下

.skin-box-bd.menu-list{width:760px;height:30px;display:block;background:none;}

宽度设置为760像素，给所有分类按钮预留190像素宽度，便于左侧190模块对齐，背景设置不显示

效果如下

4.所有分类大小及背景设置

类名

所有分类部分类名：.skin-box-bd.all-cats{}

属性

padding：上右下左（块与块的外边距）

代码如下

.skin-box-bd.all-cats{height:30px;padding:0px79px0px0px;background:none;}

经调试，系统模板无法设置所有分类的宽度和高度（width属性和height属性），但从装修市场购买的模板能设置宽度，因此使用padding属性调整了外边距，与右侧其他分类距离79像素，插入图片后可正好190像素宽

效果如下

5.所有分类：一级导航设置

类名

按钮类名：.skin-box-bd.all-cats.all-cats-trigger{}

按钮链接类名（a标签）：.skin-box-bd.all-cats.all-cats-trigger.link{}

文字类名：.skin-box-bd.all-cats.all-cats-trigger.link.title{}

图标类名：.skin-box-bd.all-cats.all-cats-trigger.link.popup-icon{}

属性
margin：块的内边距

border：描边

代码如下

.skin-box-bd.all-cats.all-cats-trigger{margin:0px;padding:0px;background:none;}

设置内边距和外边距为0，确保宽度准确，然后去掉按钮背景

.skin-box-bd.all-cats.all-cats-trigger.link.title{display:none;}

.skin-box-bd.all-cats.all-cats-trigger.link.popup-icon{display:none;}

因为要使用图片作为所有按钮的样式，隐藏掉原来的文字和图标，可一行一行添加试看效果

效果如下

添加按钮图片

.skin-box-bd.all-cats.all-cats-trigger.link{width:190px;height:30px;margin:0px;padding:0px;border:none;display:block;background:no-repeaturl(图片地址);}

给按钮添加背景，背景在按钮链接部分添加，以便鼠标划过时位置准确，设置高宽及内外边距，去掉描边，背景设置为不平铺（no-repeat），而后添加图片地址（url()）

.skin-box-bd.all-cats.all-cats-trigger.link:hover{background-position:0px-30px;}

设置鼠标滑过时背景图向上移动30像素，用准备好的素材按钮即可，当然也可以替换为您设计的按钮

*本站部分文字及图片均来自于网络，如侵犯到您的权益，请及时通知我们删除。联系信息：甩手网

相关知识

揭阳淘宝店铺代运营=分享=淘宝店铺推广方法
CSS 禅意花园: CSS 设计之美
如何修改hexo中主题的css
HTML+CSS+JavaScript美食博客网页制作教程：从零开始，超详细代码解析与完整示例，适合初学者！
美丽花店CSS网页模板资源
大学生线上花店源码和设计报告
如何在基于JSP和SQL Server 2005的网上购物商城项目中设计一个高效且易扩展的导航栏系统？请结合具体实例进行说明。
HTML5期末大作业：鲜花网站设计——网上鲜花网页设计(5页) HTML+CSS+JavaScript 期末作业HTML代码
鲜花静态HTML网页作业作品 大学生鲜花网页设计制作成品 简单DIV CSS布局网站
花纹背景css整站模板资源

网址: 淘宝店铺装修：首页导航CSS代码修改教程（上） https://www.huajiangbk.com/newsview838921.html