淘宝店铺装修不管关于新手卖家还是老卖家都是十分重要的,聪明的卖家为了迎合顾客的购物体验,会让导航经过CSS代码做的愈加圆满的。
有个美观的导航才是淘宝店铺装修的开端,一个好的导航不只可以快速让顾客找到本人需求的商品,愈加提升了买家的停留时间和第一印象。但是导航假如想要经过CSS代码来装修好的,其实关于不懂代码的卖家也没有想象中这么难的。
CSS能很圆满的将我们的导航做到极致,能够完整依据本人的想法来修正好导航,包括文字,文字前小图标,导航高度,宽度,图片背景,透明背景,鼠标划过时的变色等等。淘宝店铺导航能够分为两个局部,就是一切分类和其他分类,而一切分类包含二级、三级导航,而其他分类则只包含二级导航。导航效果比照:修正前导航(第一个系统模板的导航)修正后导航案例是针对新手制造的,不得不供认,假如对CSS不理解,可能会看着复杂,且玩转导航简直是不可能的,但同样也能够跟着案例做出漂亮的导航,交换一些本人的要素,到达预期的效果,需求耐烦,查看案例时,会有很多反复的属性设置,这是必要的,是为了顺应大局部阅读器。理解CSS代码的卖家能够不看案例直接点击这里,这里列出了导航的HTML结构和相应的CSS称号,可依据结构恣意修正,恣意设计。
开端一步一步制造。首先列出导航中用到的素材(图像另存到本地计算机即可运用原图)店招背景素材店招素材按钮素材会在下面教程中逐个阐明运用办法完成后效果如上首先理解一下在哪写CSS代码如今修正导航的整体大小类名整个外框类名:.skin-box-bd{}属性width:宽度设置height:高度设置background:设置背景颜色及图片(颜色代码(如#000000),图片链接:url(图片地址))提到过得属性下面不会反复代码如下.skin-box-bd{width:950px;height:30px;background:none;}案例中设置为950像素宽30像素高,背景设置不显现,系统模板其实是无法设置高度的(height属性,貌似固定了30像素,但从装修市场购置的模板能够设置高度)效果如下类名其他分类外框类名:.skin-box-bd.menu-list{}属性display:设置显现方式(none为躲藏该块,block为块显现,可百度理解该属性)代码如下.skin-box-bd.menu-list{width:760px;height:30px;display:block;background:none;}宽度设置为760像素,给一切分类按钮预留190像素宽度,便于左侧190模块对齐,背景设置不显现效果如下类名一切分类局部类名:.skin-box-bd.all-cats{}属性padding:上右下左(块与块的外边距)代码如下.skin-box-bd.all-cats{height:30px;padding:0px79px0px0px;background:none;}经调试,系统模板无法设置一切分类的宽度和高度(width属性和height属性),但从装修市场购置的模板能设置宽度,因而运用padding属性调整了外边距,与右侧其他分类间隔79像素,插入图片后可正好190像素宽效果如下类名按钮类名:.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{}属性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像素,用准备好的素材按钮即可,当然也能够交换为您设计的按钮