淘宝导航装修css全解超赞超详细修订稿
淘宝导航装修c s s全解超赞超详细Document number【SA80SAB-SAA9SYT-SAATC-SA6UT-SA18】一、首先我们进入到店铺的装修页面，将鼠标放在导航上面会出现“编辑”字样，单击，如图选择“显示设置”选项卡1.修改导航分类下面的背景色，代码如下：.skin-box-bd .link{background:#000000;}效果如下--------------------------------默认是黑色的，如果你要别的颜色，只要修改#000000就可以了，颜色对照表地址如果你想要更加个性，而不想只要简单的纯色块的话，可以自己做图片，然后连接上去，代码如下：.skin-box-bd .link{background:url(图片链接);}效果如下--------------------------------将“图片连接”换成你的图片的连接就可以了，一般都是自己做好然后上传到淘宝图片空间，然后链接就可以了！在图片空间点击对应图片下方的“链接”按钮可以直接复制图片链接，替换到代码里就可以了！2.修改整个导航的背景色【其实只修改了有分类之外的部分（前面我们已经修改好了分类背景），还有最右边那部分没改到，后面会有修改那里的代码，一步步跟着来就没错了！】代码如下：.skin-box-bd .menu-list{background:#000000;}效果如下--------------------------------修改颜色的方法同上--------------------------------------------------------------------------修改成图片的代码如下：.skin-box-bd .menu-list{background:url(图片链接);}3.修改最右边留下的一小块，2里提到的，代码如下：.skin-box-bd{background:#000000;}效果如下--------------------------------修改颜色的方法同上--------------------------------------------------------------------------修改成图片的代码如下：.skin-box-bd{background:url(图片链接);}这样做你的导航完成的差不多了，但是发布之后你会发现字体的背景色块有问题，只有文字下方才有色块，比如“首页”，只有“首页”两个字下面有颜色，其它有些四个字的就四个字有，这样很影响美观！所以我们还要加上两条代码4.字外：.skin-box-bd .menu-list .menu-selected .link{background:#000000;}5.字里：.skin-box-bd .menu-list .menu-selected .link .title{background:#000000;}字外+字里=全部！这样就完整了好了，以上就是我的淘宝店里的导航里用的所有代码，下面再给大家一些别的代码！！二、下面红色部分为可以修改的，颜色代码大家很熟悉了，字号就是字体的大小，在网页中，字体大小一般是14到20左右，根据自己的需要设定吧，直接填写数字就OK了！1.导航背景色代码（除去“所有分类”）如下：.menu-list .link{background:#000000;}2.导航栏文字（除去“所有分类”）如下：.menu-list .menu .title{color:#颜色代码;font-size:字号px;}3.“所有分类”的背景色代码如下：.all-cats .link{background:#000000;}4.“所有分类”的文字代码如下：.all-cats .link .title{color:#颜色代码;font-size:字号px;}最新代码，解决字体改大后导航右侧消失的情况！代码如下：.all-cats.link.title{font-size:字号px;}.all-cats.link{background:#3BAFFF;margin:0;padding:0px3px;}字号最大为21，继续变大右侧导航将消失！该代码还不是很完善，我们会继续研究！5.二级分类文字代码如下：.popup-content .cats-tree .fst-cat .cat-name{font-size:字号px;color:#颜色代码;font-weight:bold/bolder/normal;}原来效果修改后效果6.二级分类背景代码如下：.popup-content{background:#000000;}7.三级分类文字代码（除去“所有宝贝”分类）如下.popup-content.cats-tree.snd-pop-inner{font-size:字号px;color:#颜色代码;font-weight:bold/bolder/normal;}原来效果修改后效果8.三级分类文字代码（包括“所有宝贝”分类字体大小）这样就无法改变字体颜色，我们会继续完善该代码！如下.popup-content.cats-tree.snd-pop-inner{font-size:字号px;color:#颜色;}9.三级分类背景代码：.popup-content .cats-tree .snd-pop-inner{background:#000000;}10.一级导航分类（除去“所有宝贝”分类）分隔线颜色代码如下：.menu-list .menu{border-color:#000000;}11.一级导航“所有宝贝”分类分隔线颜色代码如下：.all-cats.link{border-color:#000000;}12.一级导航分类的宽度修改代码如下：.menu-list .menu{background:#颜色;margin:0;padding:0px 增加的宽度px;}13.鼠标滑过一级分类导航文字变换背景色代码如下：.menu-list .menu-hover .link{background:#000000;}14.鼠标滑过一级分类导航文字变换颜色代码如下：.menu-list .menu-hover .link .title{color:#FFFFFF;}15.鼠标滑过二级分类导航文字变换背景色代码如下：.popup-content .cats-tree .cat-hd-hover{background:#000000;}16.鼠标滑过二级分类导航文字变换颜色代码如下：.skin-box-bd .popup-content .cats-tree .cat-hd-hover .cat-name{color:#ff0000;} 17.鼠标滑过三级分类导航文字变换背景色代码如下：.popup-content .cats-tree .snd-cat-hd-hover{background:#000000;}18.二级分类上加空间代码如下：.popup-content .cats-tree{margin:0 0 50px 0;}19.修改“所有宝贝”右边小图标代码如下：.all-cats .link .popup-icon{background:url(图片连接);}20.修改二级分类右侧图标代码如下（有三级分类才会显示）：.popup-content .cats-tree .fst-cat-icon{background:url(图片连接);}22.在三级分类前加上小块白色代码如下：.popup-content .cats-tree .snd-cat-icon{display:block;height:3px;width:3px;} 好了，我简单的导航修改技巧就到这里了，以上效果都是用白色或黑色做给大家看，是为了大家能更好的看清楚效果，如果上面有些看到是全白的，那是因为字体颜色和背景颜色一样才变成全白的，修改了背景大家再修改字体颜色就可以了！希望大家都可以做出自己喜欢的导航！三、关于店招和导航两侧的修改！这里修改好，跟导航和店招结合在一起会更加完美！修改方式如下：在店铺装修页面的左上方有个“装修”，将鼠标放在上面会出现下拉菜单，选择“样式菜单”单击左侧的“背景设置”这里有两个选项卡，分别是“页头设置”和“页面设置”。
所谓页头，其实就是导航以上（包括导航）的部分，而页面就是导航以下的部分了！这里可以用纯颜色设置，也可以用图片设置，我们要结合导航，肯定就用图片咯！当然你想要更加个性的话，你也可以给每一个页面都做一个不一样的效果，只要单击这里，下拉选择相应页面就可以了！四、最后还有一个发布不显示效果的解决方法！导航修改好代码之后，预览有效果，但是发布之后还是显示原来的效果，没有任何变化！解决的方法是在你修改好代码之后，预览有效果了，之后就关闭“店铺装修”页面，之后重新打开再点“发布”就会显示效果了！如果你不知道哪个是“店铺装修”页面，那就直接关闭浏览器，重新进“店铺装修”那个点“发布”就OK咯！.skin-box-bd .menu-list{background:none repeat scroll 0 0 #20B2AA;}.skin-box-bd .menu-list .link{background:none repeat scroll 0 0 #20B2AA;}.skin-box-bd .menu-list .menu{border-right:1px #20B2AA solid;}.skin-box-bd .menu-list .menu .title{color:#FFFFFF;}.all-cats .link{background:none repeat scroll 0 0 #20B2AA;}.all-cats .link{border-right:1px #20B2AA solid;}.skin-box-bd .all-cats .title{color:#FFFFFF;}.skin-box-bd{background:#20B2AA;}.skin-box-bd .menu-list .menu-selected .link{background:#20B2AA;}.skin-box-bd .menu-list .menu-selected .link .title{background:#20B2AA;}.popup-content{background:#66CDAA;}.popup-content .cats-tree .snd-pop-inner{background:#66CDAA;}.popup-content .cats-tree .fst-cat .cat-name{font-size:12px;color:#FFFFFF;}.menu-list .menu-hover .link .title{color:#D8BFD8;}.popup-content .cats-tree .cat-hd-hover{background:#90EE90;}.popup-content .cats-tree .snd-cat-hd-hover{background:#90EE90;}。
淘宝装修常用自定义代码
一、插入图片代码：<img src="图片链接地址" />注：先把图片上传到网络相册网络地址(如果你没有网络相册可以申请一个)，把它拷贝下来，放到下边一串代码里替代汉字部分；可以应用于公告栏、分类栏及宝贝描述内。
二、插入公告栏挂饰代码：<img src="图片链接地址" style="left:20px; position: relative; top:0px" />注：先把挂饰图片上传到网络相册；可以应用于公告栏、分类栏及宝贝描述内。
三、背景音乐代码：< loop="-1" src="音乐地址"></ >注：先把挂饰图片上传到网络相册；可以应用于公告栏、宝贝描述内。
三、在图片里附加音乐的办法：<img border=0 src="图片地址" dynsrc=音乐地址>注：先把挂饰图片上传到网络相册；可以应用于公告栏、宝贝描述内。
四、浮动的图片的代码：＜img alt="1" height="150" src="这里放图片地址"/＞五、悬浮挂饰代码：＜img src="这里放图片地址" style="left:20px; position: relative; top:0px" /＞六、文字链接代码:＜a href="网页地址"＞链接的文字＜/a＞七、移动文字代码:＜marquee＞从右到左移动的文字＜/marquee＞八、计数器代码<a href="" target="_blank"><img src="计数器地址"border=0alt=""></a>九、店铺公告里的漂亮悬浮挂件的代码：<marquee style="position:relative;" ="this.stop()" ="this.start()" scrollamount="1" scrolldelay="85" direction="up" behavior="scroll" height="60"><img src="加入你自己的图片地址" />十、店铺公告添加个性的鼠标指针代码：<table style="CURSOR: url('上传后的鼠标指针的网址')"><tr><td><table border="0" style="TABLE-LAYOUT: fixed">十一、宝贝描述加上个性的鼠标指针代码先选“编辑源文件” ，然后复制以下代码：<table width="100%" style="CURSOR: url('这里是已上传的鼠标指针网址')"> <tr><td width="100%">另外，还要在源文件底部输入代码：</td></tr></table>十二、添加QQ在线交谈代码：<a target=blankhref=/msgrd?V=1&Uin=41826029&Site=www.goodcup.bokee. com&Menu=yes><img border="0" SRC=/pa?p=1:41826029:7 alt="点击这里给我发消息"></a>注: 这是QQ在线状态的代码，里面的数值要改变，号码和网址改为你自己的，这个链接的作用是别人可以直接点击联系你而无需加你为好友，使用方法是直接链接。
淘宝导航装修代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title></title></head><body><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><FCK:meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>nav</title><style type="text/css">#navlist {display: inline;list-style: none;}#navlist li {float: left;width: 100px;height:40px;text-align:center;}#navlist li a {width: 90px;height:30px;padding:5px;display:block;color:#fff;text-decoration: none;font-size:12px;font-weight:bold;line-height:30px;border-right:1px solid #fff;border-left:1px solid #fff;border-top: 5px solid #fff;border-bottom: 5px solid #fff;background-color:#333333;}#navlist li a:hover {border-top: 5px solid #555555;border-bottom: 5px solid #555555;background:#555555;font-size:14px;font-weight:bold;}</style></head><body><ul id="navlist"><li><a href="/?spm=0.0.0.173.7KC1xu"#">首页</a></li> <li><a href="/?spm=0.0.0.173.7KC1xu"#">1</a></li><li><a href="/?spm=0.0.0.173.7KC1xu"#">1</a></li><li><a href="/?spm=0.0.0.173.7KC1xu"#">1</a></li><li><a href="/?spm=0.0.0.173.7KC1xu"#">1</a></li><li><a href="/?spm=0.0.0.173.7KC1xu"#">1</a></li></ul><p> </p><p> </p></body></html></body></html>请注明出处/?spm=0.0.0.173.7KC1xu。
淘宝店铺装修代码大全
超级链接代码格式如下：/popup/add_collection.htm?itemid=5847 4453&itemtype=0&ownerid=30cb242d2a2b27aa47bd0edd27ef756f 代码分为两部份：蓝色+红色蓝色：为店铺的地址中数字部分。
如：/链接网址/catalog/thread/154503-4783203.htm这几天来过我店的朋友，看过我的模板的朋友都说装修真的快要让他焦头烂额了,发现了这样的一个好东东,当然要拿来和大家一起分享哦!希望可以对和我一样的新朋友有多帮助哦公告栏大小:宽不要超过480像素,高可以随意代码:<img src="店铺公告地址"/>要求:图片一定要通过网上空间或相册放置:管理我的店铺——基本设置——公告可以预览看一下悬挂饰物代码::<img src="你图片的地址" style="left: 20px; position: relative; top: 0px" />要求:不能是自己电脑上的图片,要在网上的图片地址才行放置:管理我的店铺——基本介绍——公告宝贝分类大小:宽不要超过148像素,长可以随意代码::<img src="宝贝分类地址" />要求:图片要通过网上空间或相册,格式为jpg或gif.图片地址不要超过40字符. 可以把图片地址缩短的网站放置:管理我的店铺——宝贝分类加图片的代码：：<img src="你的图片地址" />分类的小技巧：关于序号字体滚动代码：<★marquee>宝贝类目名称<★/marquee>下面的代码设置在一定区域内让文字向上滚：“scrollamount=”可改变速度。
<font size=3 color=ff0000><b><center><marquee width=150 height=100 direction=up scrollamount=2>文字</marquee></font></b></center>让文字左右来回流动--------<marquee behavior="alternate">文字</marquee>让文字由下至上滚动--------<marquee direction="up">文字</marquee>让文字左右来回流动-------- 文字让文字由下至上滚动--------粗体字的代码：<★b>宝贝类目名称<★/b>字体大小代码：<★font size="阿拉伯数字1~7控制大小">宝贝类目名称<★/font>斜体字的代码：<★i>宝贝类目名称<★/i>加下划线代码：<★u>宝贝类目名称<★/u>加删除线代码：<★strike>宝贝类目名称<★/strike>做空格的代码：<★li>宝贝类目名称<★/li>控制颜色代码：<★font color="颜色代码或者英文颜色名">宝贝类目名称<★/font>店铺分类代码: <IMG src="图片地址">浮动的图片的代码：</td></tr></table>;<img alt="1" height="150" src="图片地址"漂亮的浮动的图片的代码：;：</td></tr></table>;<img alt="1" height="150" src="图片地址"style="position:relative;bottom:0px;right:0px;" width="150" /><p align="center"></p><div><img src="about:blank"style="display:none" /></div>滚动字幕代码：这个用处可就多了，放到哪里那些字都是会动的，有很多朋友在好评里都会用到哦！<marquee>输入你想说的话</marquee>自定义颜色代码<font color=blue>输入你想要说的话</font>店铺分类的代码<img src=" 图片的地址" />代码就放在：我的淘宝—管理我的店铺—宝贝分类简单介绍一下我的操作方法：1、选好喜欢的宝贝分类模板，复制保存之后，填上适当的文字，然后上传到网上相册；2、复制代码<img src="" /> 到宝贝分类中；3、打开网上相册，选中相应的模板，右击属性，复制属性中的图片地址；4、由于网上的图片地址过长，因此要在/上进行网址缩短工作：即把复制的图片地址到这个网站中进行缩短，然后会出现一个较短的图片地址5、再用短地址放入<img src="" /> 的""中就ok了如何在店铺公告添加个性的鼠标指针：<table style="CURSOR: url('上传后的鼠标指针的网址')"><tr><td><table border="0"style="TABLE-LAYOUT: fixed"> 另外，还要在源文件底部输入代码：</td></tr></table>马上copy这个代码，它可以让您的店铺公告更有吸引力呀公告图片的代码：：<img border="0" src="图片地址" />6.换行代码如果你想换行，直接用Enter键是不行的，需要在您想换行的位置输入这样就会分成两行显示，整个网站看起来也不会是一大片了，而是段落分明如果输入一个，那就是另起一行，如果连续输入两个，即，那就会空一行html设计代码大全1)贴图：< img src="图片地址">本人照片（献丑了）2)加入连接：< a href="所要连接的相关地址">写上你想写的字< /a>3)在新窗口打开连接：< a href="相关地址" target="_blank">写上要写的字< /a>4)移动字体(走马灯)：< marquee>写上你想写的字< /marquee> （可用于店铺分类，和评价）5)字体加粗：< b>写上你想写的字< /b>6)字体斜体：< i>写上你想写的字< /i>7)字体下划线: < u>写上你想写的字< /u>字体删除线: < s>写上你想写的字< /s>9)字体加大: < big>写上你想写的字< /big>10)字体控制大小：< h1>写上你想写的字< /h1>(其中字体大小可从h1-h5,h1最大，h5最小)(其中字体大小可从h1-h5,h1最大，h5最小)11)更改字体颜色：< font color="#value">写上你想写的字< /font>(其中value值在000000与ffffff(16位进制)之间12)消除连接的下划线：< a href="相关地址"style="text-decoration:none">写上你想写的字< /a>13)贴音乐：< embed src="音乐地址" width="宽度" height="高度" autostart=false>14)贴flash: < embed src="flash地址" width="宽度" height="高度">15)贴影视文件：< img dynsrc="文件地址" width="宽度" height="高度" start=mouseover>16)换行：< br>17)段落：< p>段落< /p>1原始文字样式：< pre>正文< /pre>19)换帖子背景：< body background="背景图片地址">20)固定帖子背景不随滚动条滚动：< body background="背景图片地址" bodybgproperties=fixed>21)定制帖子背景颜色：< body bgcolor="#value">(value值见10)22)帖子背景音乐：< bgsound="背景音乐地址" loop=infinite>（听到音乐了吗？也可以加在你的店铺公告里）23)贴网页：< iframe src="相关地址" width="宽度" height="高度">< /iframe>最后注意了，以上所有代码中的前边后边代码段，我都加入了一个空格，要不再这里就运行了，你们无法看见了！使用时把前边后边代码内的空格去掉即可！举个例子4)移动字体(走马灯)：< marquee>写上你想写的字< /marquee>把< marquee>和< /marquee>删为去掉括号中的空格即可，其他不用动！后边代码不动即可！店铺装修代码1、店铺音乐代码:音乐网址" loop="-1">2、图片制作代码：＜img src="这里放图片地址"＞3、公告图片代码：＜img border="0" src="这里放图片地址" /＞或＜img src="这里放图片地址"/＞4、悬浮挂饰代码：＜img src="这里放图片地址" style="left:20px; position: relative; top:0px" /＞5、商品分类代码:＜img src="这里放图片地址"/＞6、字体大小代码:＜font size="2"＞这里放要处理的文字，可用3、4、5等设置大小＜/font＞7、字体颜色代码:＜font color="red"＞这里放要处理的文字，可以换成blue,yellow等＜/font＞8、文字链接代码:＜a href="网页地址"＞链接的文字，在分类栏里用时链接的网页地址必须缩短＜/a＞9、移动文字代码:＜marquee＞从右到左移动的文字＜/marquee＞10、背景音乐代码：＜bgsound loop="-1" src="这里放音乐地址"＞＜/bgsound＞11、图片附加音乐代码：＜img border=0 src="这里放图片地址" dynsrc="这里放音乐地址"＞12、浮动图片代码:＜img alt="1" height="150" src="这里放图片地址"/＞公告图片的代码：公告挂饰：店铺分类代码:背景音乐代码：换行代码计数器代码颜色代码：1白色#FFFFFF2红色#FF00003绿色#00FF004蓝色#0000FF5牡丹红#FF00FF6青色#00FFFF7黄色#FFFF008黑色#0000009海蓝#70DB9310巧克力色#5C331711蓝紫色#9F5F9F12黄铜色#B5A64213亮金色#D9D91914棕色#A67D3D15青铜色#8C7853162号青铜色#A67D3D17士官服蓝色#5F9F9F18冷铜色#D9871919铜色#B8733320珊瑚红#FF7F0021紫蓝色#42426F22深棕#5C403323深绿#2F4F2F24深铜绿色#4A766E25深橄榄绿#4F4F2F26深兰花色#9932CD27深紫色#871F7828深石板蓝#6B238E29深铅灰色#2F4F4F30深棕褐色#97694F32深绿松石色#7093DB 33暗木色#855E4234淡灰色#54545435土灰玫瑰红色#856363 36长石色#D1927537火砖色#8E232338森林绿#238E2339金色#CD7F3240鲜黄色#DBDB7041灰色#C0C0C042铜绿色#527F7643青黄色#93DB7044猎人绿#215E2145印度红#4E2F2F46土黄色#9F9F5F47浅蓝色#C0D9D948浅灰色#A8A8A849浅钢蓝色#8F8FBD59浅木色#E9C2A660石灰绿色#32CD32 61桔黄色#E4783362褐红色#8E236B63中海蓝色#32CD99 64中蓝色#3232CD65中森林绿#6B8E23 66中鲜黄色#EAEAAE 67中兰花色#9370DB 68中海绿色#426F42 69中石板蓝色#7F00FF 70中春绿色#7FFF00 71中绿松石色#70DBDB 72中紫红色#DB7093 73中木色#A6806474深藏青色#2F2F4F 75海军蓝#23238E76霓虹篮#4D4DFF77霓虹粉红#FF6EC7 78新深藏青色#00009C 79新棕褐色#EBC79E 80暗金黄色#CFB53B 81橙色#FF7F0082橙红色#FF240083淡紫色#DB70DB84浅绿色#8FBC8F85粉红色#BC8F8F86李子色#EAADEA87石英色#D9D9F388艳蓝色#5959AB89鲑鱼色#6F424290猩红色#BC171791海绿色#238E6892半甜巧克力色#6B4226 93赭色#8E6B2394银色#E6E8FA95天蓝#3299CC96石板蓝#007FFF97艳粉红色#FF1CAE98春绿色#00FF7F99钢蓝色#236B8E100亮天蓝色#38B0DE 101棕褐色#DB9370 102紫红色#D8BFD8 103石板蓝色#ADEAEA 104浓深棕色#5C4033 105淡浅灰色#CDCDCD 106紫罗兰色#4F2F4F 107紫罗兰红色#CC3299 108麦黄色#D8D8BF109黄绿色#99CC32店铺公告里的漂亮悬浮挂件的代码：公告图片的代码：<img border="0" src="图片地址" />公告挂饰：<img src="图片地址" style="left:20px; position: relative; top:0px" /> 店铺分类代码:<img src="缩完后的图片地址"／>背景音乐代码：<bgsound loop="-1" src="音乐地址"></bgsound>换行代码<br>计数器代码<a href="" target="_blank"><img src="计数器地址" border=0 alt=""></a>店铺公告里的漂亮悬浮挂件的代码：<marquee style="position:relative;" onMouseOver="this.stop()" onMouseOut="this.start()" scrollamount="1" scrolldelay="85" direction="up" behavior="scroll" height="60"><img src="加入你自己的图片地址" />1.公告栏的图片代码,帖到公告栏就行了. 不过还是有好多人来问我公告栏的位置-----点我的淘宝-----管理我的店铺------基本设置，下面写着公告的位置。
淘宝导航装修css全解超赞超详细
一、首先我们进入到店铺的装修页面，将鼠标放在导航上面会出现“编辑”字样，单击，如图选择“显示设置”选项卡1.修改导航分类下面的背景色，代码如下：.skin-box-bd .link{background:#000000;}效果如下--------------------------------默认是黑色的，如果你要别的颜色，只要修改#000000就可以了，颜色对照表地址.114la./other/rgb.htm--------------------------------------------------------------------------如果你想要更加个性，而不想只要简单的纯色块的话，可以自己做图片，然后连接上去，代码如下：.skin-box-bd .link{background:url(图片);}效果如下--------------------------------将“图片连接”换成你的图片的连接就可以了，一般都是自己做好然后上传到淘宝图片空间，然后就可以了！在图片空间点击对应图片下方的“”按钮可以直接复制图片，替换到代码里就可以了！2.修改整个导航的背景色【其实只修改了有分类之外的部分（前面我们已经修改好了分类背景），还有最右边那部分没改到，后面会有修改那里的代码，一步步跟着来就没错了！】代码如下：.skin-box-bd .menu-list{background:#000000;}效果如下--------------------------------修改颜色的方法同上--------------------------------------------------------------------------修改成图片的代码如下：.skin-box-bd .menu-list{background:url(图片);}3.修改最右边留下的一小块，2里提到的，代码如下：.skin-box-bd{background:#000000;}效果如下--------------------------------修改颜色的方法同上--------------------------------------------------------------------------修改成图片的代码如下：.skin-box-bd{background:url(图片);}这样做你的导航完成的差不多了，但是发布之后你会发现字体的背景色块有问题，只有文字下方才有色块，比如“首页”，只有“首页”两个字下面有颜色，其它有些四个字的就四个字有，这样很影响美观！所以我们还要加上两条代码4.字外：.skin-box-bd .menu-list .menu-selected .link{background:#000000;}5.字里：.skin-box-bd .menu-list .menu-selected .link .title{background:#000000;} 字外+字里=全部！这样就完整了好了，以上就是我的淘宝店里的导航里用的所有代码，下面再给大家一些别的代码！！二、下面红色部分为可以修改的，颜色代码大家很熟悉了，字号就是字体的大小，在网页中，字体大小一般是14到20左右，根据自己的需要设定吧，直接填写数字就OK了！1.导航背景色代码（除去“所有分类”）如下：.menu-list .link{background:#000000;}2.导航栏文字（除去“所有分类”）如下：.menu-list .menu .title{color:#颜色代码;font-size:字号px;}3.“所有分类”的背景色代码如下：.all-cats .link{background:#000000;}4.“所有分类”的文字代码如下：.all-cats .link .title{color:#颜色代码;font-size:字号px;}最新代码，解决字体改大后导航右侧消失的情况！代码如下：.all-cats .link .title{font-size:字号px;}.all-cats .link {background:#3BAFFF;margin:0;padding:0px 3px;} 字号最大为21，继续变大右侧导航将消失！该代码还不是很完善，我们会继续研究！5.二级分类文字代码如下：.popup-content .cats-tree .fst-cat .cat-name{font-size:字号px;color:#颜色代码;font-weight:bold/bolder/normal;}原来效果修改后效果6.二级分类背景代码如下：.popup-content{background:#000000;}7.三级分类文字代码（除去“所有宝贝”分类）如下.popup-content .cats-tree .snd-pop-inner{font-size:字号px;color:#颜色代码;font-weight:bold/bolder/normal;}原来效果修改后效果8.三级分类文字代码（包括“所有宝贝”分类字体大小）这样就无法改变字体颜色，我们会继续完善该代码！如下.popup-content .cats-tree .snd-pop-inner{font-size:字号px;color:#颜色;}9.三级分类背景代码：.popup-content .cats-tree .snd-pop-inner{background:#000000;}10.一级导航分类（除去“所有宝贝”分类）分隔线颜色代码如下：.menu-list .menu{border-color:#000000;}11.一级导航“所有宝贝”分类分隔线颜色代码如下：.all-cats .link{border-color:#000000;}12.一级导航分类的宽度修改代码如下：.menu-list .menu{background:#颜色;margin:0;padding:0px 增加的宽度px;}13.鼠标滑过一级分类导航文字变换背景色代码如下：.menu-list .menu-hover .link{background:#000000;}14.鼠标滑过一级分类导航文字变换颜色代码如下：.menu-list .menu-hover .link .title{color:#FFFFFF;}15.鼠标滑过二级分类导航文字变换背景色代码如下：.popup-content .cats-tree .cat-hd-hover{background:#000000;}16.鼠标滑过二级分类导航文字变换颜色代码如下：.skin-box-bd .popup-content .cats-tree .cat-hd-hover .cat-name{color:#f f0000;}17.鼠标滑过三级分类导航文字变换背景色代码如下：.popup-content .cats-tree .snd-cat-hd-hover{background:#000000;}18.二级分类上加空间代码如下：.popup-content .cats-tree{margin:0 0 50px 0;}19.修改“所有宝贝”右边小图标代码如下：.all-cats .link .popup-icon{background:url(图片连接);}20.修改二级分类右侧图标代码如下（有三级分类才会显示）：.popup-content .cats-tree .fst-cat-icon{background:url(图片连接);}22.在三级分类前加上小块白色代码如下：.popup-content .cats-tree .snd-cat-icon{display:block;height:3px;width:3 px;}好了，我简单的导航修改技巧就到这里了，以上效果都是用白色或黑色做给大家看，是为了大家能更好的看清楚效果，如果上面有些看到是全白的，那是因为字体颜色和背景颜色一样才变成全白的，修改了背景大家再修改字体颜色就可以了！希望大家都可以做出自己喜欢的导航！三、关于店招和导航两侧的修改！这里修改好，跟导航和店招结合在一起会更加完美！修改方式如下：在店铺装修页面的左上方有个“装修”，将鼠标放在上面会出现下拉菜单，选择“样式菜单”单击左侧的“背景设置”这里有两个选项卡，分别是“页头设置”和“页面设置”。
网页制作装修代码大全(新手必看)
淘宝装修代码大全（新手必看）如何提高店铺的访问量呢？这个问题大家一定都很想知道，有好的产品，有好的宣传，更吸引顾客眼球的是你有特别的装修，让你的店铺与众不同！好了，现在简单为大家总结下：html设计代码大全1)贴图：< img src="图片地址">本人照片（献丑了）2)加入连接：< a href="所要连接的相关地址">写上你想写的字< /a>3)在新窗口打开连接：< a href="相关地址" target="_blank">写上要写的字< /a>4)移动字体(走马灯)：< marquee>写上你想写的字 < /marquee> （可用于店铺分类，和评价）5)字体加粗：< b>写上你想写的字< /b>6)字体斜体：< i>写上你想写的字< /i>7)字体下划线: < u>写上你想写的字< /u>字体删除线: < s>写上你想写的字< /s>9)字体加大: < big>写上你想写的字< /big>10)字体控制大小：< h1>写上你想写的字< /h1>(其中字体大小可从h1-h5,h1最大，h5最小)(其中字体大小可从h1-h5,h1最大，h5最小)11)更改字体颜色：< font color="#value">写上你想写的字< /font>(其中value值在000000与ffffff(16位进制)之间12)消除连接的下划线：< a href="相关地址" style="text-decoration:none">写上你想写的字< /a>13)贴音乐：< embed src="音乐地址" width="宽度" height="高度" autostart=false>14)贴flash: < embed src="flash地址" width="宽度" height="高度">15)贴影视文件：< img dynsrc="文件地址" width="宽度" height="高度" start=mouseover>16)换行：< br>17)段落：< p>段落< /p>1原始文字样式：< pre>正文 < /pre>19)换帖子背景：< body background="背景图片地址">20)固定帖子背景不随滚动条滚动：< body background="背景图片地址" bodybgproperties=fixed>21)定制帖子背景颜色：< body bgcolor="#value">(value值见10)22)帖子背景音乐：< bgsound="背景音乐地址" loop=infinite>（听到音乐了吗？也可以加在你的店铺公告里）23)贴网页：< iframe src="相关地址" width="宽度" height="高度">< /iframe>最后注意了，以上所有代码中的前边后边代码段，我都加入了一个空格，要不再这里就运行了，你们无法看见了！使用时把前边后边代码内的空格去掉即可！举个例子4)移动字体(走马灯)：< marquee>写上你想写的字< /marquee>把< marquee>和< /marquee>删为去掉括号中的空格即可，其他不用动！后边代码不动即可！店铺装修代码1、店铺音乐代码:音乐网址" loop="-1">2、图片制作代码：＜img src="这里放图片地址"＞3、公告图片代码：＜img border="0" src="这里放图片地址" /＞或＜img src="这里放图片地址"/＞4、悬浮挂饰代码：＜img src="这里放图片地址" style="left:20px; position: relative; top:0px" /＞5、商品分类代码:＜img src="这里放图片地址"/＞6、字体大小代码:＜font size="2"＞这里放要处理的文字，可用3、4、5等设置大小＜/font ＞7、字体颜色代码:＜font color="red"＞这里放要处理的文字，可以换成blue,yellow等＜/font ＞8、文字链接代码:＜a href="网页地址"＞链接的文字，在分类栏里用时链接的网页地址必须缩短＜/a＞9、移动文字代码:＜marquee＞从右到左移动的文字＜/marquee＞10、背景音乐代码：＜bgsound loop="-1" src="这里放音乐地址"＞＜/bgsound＞11、图片附加音乐代码：＜img border=0 src="这里放图片地址" dynsrc="这里放音乐地址"＞12、浮动图片代码:＜img alt="1" height="150" src="这里放图片地址"/＞计数器代码" target="_blank">店铺公告里的漂亮悬浮挂件的代码：2.公告悬浮装饰图片代码，COPY到公告的最下面就好了哦，3.加背景音乐的代码。
淘宝装修模板代码教程大全
淘宝装修模板代码教程大全淘宝装修模板是淘宝店主在创建店铺和设计商品详情页面时常用的工具。
通过使用模板代码，店主可以轻松地进行页面布局、添加图片和文字等操作，使店铺更具吸引力和个性化。
本教程将为您详细介绍淘宝装修模板的使用方法，帮助您快速掌握相关技巧。
一、模板代码简介淘宝装修模板代码是以HTML、CSS和JavaScript为基础的网页代码。
通过在模板代码中嵌入相应的标签和属性，店主可以自由地定制自己的店铺页面。
以下将介绍几个常用的模板代码标签及其作用：1. DIV标签：用于定义HTML文档中的一个区块，可进行布局和样式设置。
2. IMG标签：用于在网页中插入图片，店主可以通过设置图片路径和尺寸来展示商品图片。
3. P标签：用于定义段落，可以设置文字内容和样式。
4. A标签：用于创建超链接，店主可以将其应用于商品详情链接和店铺链接。
5. SPAN标签：用于设置文本样式，店主可以通过设置字体、颜色和行高等属性来进行个性化设置。
二、模板代码的使用步骤要使用淘宝装修模板代码，店主需要按照以下步骤进行操作：1. 登录淘宝商家后台，点击“店铺装修”进入装修界面。
2. 选择模板：在模板库中选择适合自己店铺风格的模板，点击“使用”进行编辑。
3. 进行编辑：在编辑界面中，店主可以通过拖拽、替换和调整模块的方式进行页面布局。
同时，也可以使用模板代码来进行更加个性化的设置。
4. 插入模板代码：在适当的位置，点击“插入代码”按钮，将需要的模板代码粘贴到弹出的代码框中，点击确定即可完成插入。
5. 预览和保存：在编辑完成后，点击预览按钮查看效果。
如果满意，点击保存按钮即可将修改应用到店铺页面。
三、常见模板代码示例在使用淘宝装修模板代码时，店主可以参考下面的示例代码进行使用和修改，以满足自己店铺页面的需求。
1. 布局代码示例：```<div class="layout"><div class="header">店铺头部</div><div class="main">主要内容区域</div><div class="footer">店铺底部</div></div>```2. 图片展示代码示例：```<img src="图片路径" alt="商品图片" width="200" height="200"> ```3. 文字描述代码示例：```<p>这是一段商品描述文字。
淘宝新2012旺铺店铺装修导航css设置教程
淘宝新2012旺铺店铺装修导航css设置教程整个淘宝页面样式和背景颜色设置在左侧装修下面可看到在装修样式中可选。
自己喜欢的样式和背景颜色所有页面都可以设置导航颜色设置以下文字内容可以一同复制使用，不会影响到使用效果哦！/* 导航条背景色*/.skin-box-bd .menu-list{background: none repeat scroll 0 0 #00ad08;}/*首页/店铺动态背景色*/.skin-box-bd .menu-list .link{background: none repeat scroll 0 0 #00ad08;} /*首页/店铺动态右边线*/.skin-box-bd .menu-list .menu{border-right:1px #006205 solid;}/*首页/店铺动态文字颜色*/.skin-box-bd .menu-list .menu .title{color:#ff0000}/*所有分类背景色*/.all-cats .link{background: none repeat scroll 0 0 #00ad08;}/*所有分类右边线*/.all-cats .link{border-right:1px #006205 solid;}/*所有分类文字颜色*/.skin-box-bd .all-cats .title{color:#ff0000}看一下效果哦！【用了红绿配，赛狗屁的颜色。
让大家可以更加深刻的对比代码中的颜色。
】红#FF0000绿#00FF00蓝#0000FF橙色#FF7f00黑#000000白#FFFFFF其他可在DREAM WEAVER 中查看。
颜色器【设置导航文字的背景，因为系统中默认有很多地方有背景，所以这个地方需要覆盖完全】.tshop-pbsm-shop-nav-ch .link{background-color: #F37C06;background-image: none;}【设置文字颜色】.tshop-pbsm-shop-nav-ch .title{color: white;}tshop-pbsm-shop-nav-ch 和 .title, .link…. 这些就是css的选择器，代表我想把哪个背景色或者文字颜色应用在哪个元素上面。
淘宝导航栏css代码分享
淘宝导航栏css代码分享类似淘宝的导航栏html代码复制代码代码如下:<div class="end_wrap"><div class="end_box"><ul><li class="shiling"><dl><dt><h3>时令周边游</h3><p><a href="">天数</a><a href="">丽⽔</a><a href="">台州</a><a href="">休闲度假</a></p></dt><dd><div class="navcontent clear"><div class="subitem"><div class="li_dl"><div class="li_dl_dt">漂流</div><div class="li_dl_dd"><em><a href="">⼤峡⾕</a></em><em><a href="">三清⼭</a></em><em><a href="">千岛湖</a></em></div></div><div class="li_dl"><div class="li_dl_dt">游乐园</div><div class="li_dl_dd"><em><a href="">⼤峡⾕</a></em><em><a href="">三清⼭</a></em><em><a href="">千岛湖</a></em></div></div></div><div class="subitem"><div class="li_dl"><div class="li_dl_dt">名⼭明⽔</div><div class="li_dl_dd"><em><a href="">⼤峡⾕2</a></em><em><a href="">三清⼭2</a></em><em><a href="">千岛湖2</a> </em></div></div></div></div></dd></dl></li><li class="guonei"><dl><dt><h3>国内风⾏游</h3><p><a href="">天数</a><a href="">丽⽔</a><a href="">台州</a><a href="">休闲度假</a></p></dt><dd>2</dd></dl></li><li class="guoji"><dl><dt><h3>国际风尚游</h3><p><a href="">天数</a><a href="">丽⽔</a><a href="">台州</a><a href="">休闲度假</a></p></dt><dd>3</dd></dl></li><li class="gongsi"><dl><dt><h3>公司游</h3><p><a href="">天数</a><a href="">丽⽔</a><a href="">台州</a><a href="">休闲度假</a></p></dt><dd>3</dd></dl></li><li class="visa"><dl><dt><h3>签证</h3><p><a href="">天数</a><a href="">丽⽔</a><a href="">台州</a><a href="">休闲度假</a></p></dt><dd>5</dd></dl></li></p> <p> </ul></div></div>js代码复制代码代码如下:$(function(){$('.end_box ul li').each(function(){$(this).hover(function() {$(this).addClass('hover')}, function() {$(this).removeClass('hover')});})})css复制代码代码如下:*{ margin: 0px; padding: 0px;}ul,li{ list-style:none;}img{ border: 0;}body{font-family: "Microsoft YaHei","微软雅⿊",Arial,Helvetica,sans-serif;color: #404040; font-size: 14px;} .clear { clear:both; zoom:1;}.clear:after {visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}.hide{ display: none;}.show{ display: block;}.fl{ float: left;}.fr{ float: right;}.pb10{ padding-bottom: 10px;}.f12{ font-size: 12px; font-family: 微软雅⿊;}.f14{ font-size: 14px; font-family: 微软雅⿊;}.site_wrap{ width: 100%;}.sitenav{ float: left; width: 10%; background: #fcfcfc; padding: 10px 0;}.nav_top,.nav_con{ width: 95%; margin: 0px auto;}.nav_top{ margin-bottom: -1px;}.nav_top ul li{ float: left; display: inline; margin-right: 3px; padding: 0 15px; height: 25px; line-height: 25px; border-radius:2px; background: #cfcfcf; color: #333; border: 1px solid #ccc; margin-left: -1px; cursor: pointer;}.nav_top ul li.on{ background: #fff; color: #000; border-bottom: 1px solid #fff;}.nav_con{ border: 1px solid #ccc;}.navcontent{}.sitecontent{ float: left; width: 90%; padding: 10px 0;}.width130{ float: left; width: 130px; text-align: right; padding-right: 40px; line-height: 25px;}.con_style{}.con_style input[type='text']{ width: 180px; border-radius: 2px; border: 1px solid #c5c5c5; border-top: 1px solid #c4c4c4; height: 23px; line-height: 23px; padding: 0 5px;-webkit-box-shadow: 1px 1px 1px 0px rgba(0,0,0,.0) inset; box-shadow: 1px 1px 1px 0px rgba(0,0,0,.1) inset;}.con_style input[type='button'],.con_style button{ border-radius: 2px; border: 1px solid #afafaf; border-top: 1px solid #b0b0b0; height: 25px; line-height: 25px; padding: 0 15px; margin-left: 5px; cursor: pointer;*overflow:visible;}.con_style input[type='checkbox'],.con_style input[type='radio']{ position: relative; margin-right: 2px; display: inline; cursor: pointer;}.con_style input[type='file']{height: 25px; line-height: 25px; }.con_style select{ height: 25px; line-height: 25px; padding: 0; width: 180px; border-radius: 2px; border: 1px solid #c5c5c5; border-top: 1px solid #c4c4c4;}.con_style label{ padding-right: 25px;}.con_style input.width80{ width: 80px; margin-left: 5px;}.search_con{ border:1px solid #ccc; padding: 15px; margin: 10px 0;}.con_title{ height: 30px; line-height: 30px; color: #000; font-weight: bold;}.con_con label{ display: inline-block;}</p> <p>.end_wrap{ width: 80%;}.end_box{ margin: 6px; height: 320px; background: #f8f6f8; margin-top: 0; position: relative; border-right: 1px solid #f8f6f8;} .end_box li{ display: block; height: 62px; background-position: 20px center; background-repeat: no-repeat; border-right: 1px solid #ccc; width: 297px;}.end_box li:hover {background-color: #fff;border: 1px solid #ccc;border-right: 1px solid #fff;}.end_box h3{color: #f39b19; font-size: 13pt;}.end_box a{margin-right: 10px; text-decoration: none; color: #404040;}.end_box li dl{ padding-left: 75px; padding-top: 10px; padding-bottom: 3px; width: 223px;}.end_box li dl dt{ display: block;position: relative;}.end_box li dl dd{ width: 867px; border: 1px solid #ccc; height: 318px; position: absolute; z-index: 2; left: 298px; background: #fff; top: 0; display: none; border-left: 0 none; overflow-y: auto;}.end_box li.hover dl dd{ display: block;}.end_box .shiling{ background-image: url(../images/ico_shiling.png);}.end_box .guonei{ background-image: url(../images/ico_train.png);}.end_box .guoji{ background-image: url(../images/ico_plane.png);}.end_box .gongsi{ background-image: url(../images/ico_men.png);}.end_box .visa{ background-image: url(../images/ico_visa.png);}</p> <p>.subitem { float: left; width: 385px; min-height: 65px; padding-left: 15px; z-index: 100;}.subitem .li_dl { overflow: hidden; zoom: 1; padding: 5px 0; }.subitem .li_dl_dt { float: left; width: 85px; line-height: 20px; text-align: left; color: #f39b19;}.subitem .li_dl_dd { float: left; width: 300px; }.subitem em { float: left; font-style: normal; white-space: nowrap; height: 14px; line-height: 14px; border-right: 1px solid #ccc; margin: 3px 0; padding: 0 8px; }.subitem em:last-child { border: 0 none; }。
divcss布局实例淘宝分析（一）
divcss布局实例淘宝分析（一）对于刚入门学DIV,CSS布局的朋友来说,不知道从那里下手,我以为从分析优秀网站的源代码来学习div,css布局是一个不错的方法,这篇div+ css布局教程是我自己在边分析边学习中总结出来的,如果你要转载请注明出处,另外本人特别声明:本教程只是分析淘宝网站的HTML,CSS源代码,作为一个教程的例子,达到学习DIV+CSS排版的效果,请勿模仿淘宝,或者仿照淘宝制作网站,谢谢,这是第一篇,淘宝顶部排版方式我们看看原始图片通过观察,我们把它分为如下图所示块具体的HTML,DIV+CSS排版样式为我们一行一行分析,1.全部的代码均在一个DIV容器(我暂时这样称呼) Head里面,我们来看看Head的写法#Head{text-align:center;}为什么Head前面有一个'#'号呢?而有的却是在前面加一个'．'比如'．Head',有时候写css的时候干脆什么也不加,比如td,body,他们有什么区别,具体怎么用,如果仔细你就会发现在HTML代码的DIV容器里面,有的是<div id='Head'></div> 而有的是这样 <div class='HackBox'></div> 从id和class字面上的意思,我们也已经了解了,id具有唯一性,而class是一个类,适用于可多次重复使用的容器,而前面什么也不带的,便是CSS里默认的通用于HTML代码的描叙,即对HTML里的代码起全局作用,比如td,便是对HTML表格里面的全部列起作用,text-align:center是指在此容器里面的文字全部居中对齐,我们注意到,行后面还有一个分号 ';',语法text-align : left | right | center | justify取值说明：left :默认值。
淘宝导航栏CSS代码
.menu-list .menu .title{color:yellow;}
8、所有分类的文字颜色（最左边那个）,
.all-cats .link .title{colቤተ መጻሕፍቲ ባይዱr:yellow;}
小结：其实原来默认文字的颜色也挺好的
第三部分、分类下的颜色
9、二级分类的背景色，设为灰色
size:14px;font-weight:500;}
a:hover
{ //鼠标滑过效果
text-decoration:none;background:#C0D9D9;font-size:14px;font-weight:500;}
.skin-box-bd
{ //导航框
background-image:none;
3、导航条整个分类段背景色，还是要设为红色，整体布局好看些
.skin-box-bd .menu-list{background:red;}
注意观察，最右边还有一丝地方没有变
4、导航条背景色（是最底层了吧），修补导航右侧缺口，再设为红色
.skin-box-bd{background:red;}
小结：有点成功感了！换换其它颜色试试看吧
.popup-content{background:gray;}
10、三级分类的背景色，我设为深灰色
.popup-content .cats-tree .snd-pop-inner{background:#504f4f;}
11、二级分类的文字颜色，设为黄色
.popup-content .cat-name{color:yellow;}
color:green;
display:block;background:#C0D9D9;}