淘宝大气时尚通栏页头CSS导航代码及使用教程

老y

第一步：页头背景设置与安装方法

点击下载需要的素材--

页头背景

--将素材下载并保存到您的电脑桌面。

登陆淘宝网站，进入卖家中心--店铺装修--顶部“装修“--下拉”样式管理“--选择背景设置，如下图：

专业版背景设置

进入页头设置页面，页头背景色不做设置，下面的页头背景图上传刚才下载保存到桌面的页头背景素材，上传后背景显示选择横向平铺，背景对齐选择居中。
背景设置上方有个页头下边距10像素的选项，一般选择关闭即可取消页头与页面的间隔，如果选择开启会有10像素的间隔。
所有的设置好了以后注意点击保存，然后返回装修页面。
第二步：店招安装（我们使用自定义店招）

复制下面的店招自定义代码：

• <div style="width:950px;height:120px;">
•     <div style="width:950px;text-align:center;height:85px;padding-top:10px;">
•         <div style="float:left;width:760px;">
•             <h1 style="line-height:60px;font-size:38px;">
•                 <a href="#" style="font-family:微软雅黑;color:white;text-shadow:2px 2px 0 #444;">淘宝店铺名字</a></h1>
•             <h2 style="color:white;font-size:14px;text-shadow:1px 1px 0 #555;">
•                 ———————— 淘宝店铺简单介绍，简单写一下即可 ————————</h2>
•         </div>
•     </div>
•     <div style="width:950px;height:22px;clear:both;overflow:hidden;">
•         <div style="position:relative;padding-left:25px;width:350px;background:url() no-repeat 5px 5px;float:right;height:22px;overflow:hidden;">
•             <div class="J_TWidget" data-widget-config="{'contentCls':'bbs-taobaoux-com','hasTriggers':false,'effect':'scrollx','easing':'easeOutStrong','interval':5,'duration':1}" data-widget-type="Slide" style="position:relative;">
•                 <ul class="bbs-taobaoux-com" style="width:999999px;left:-573.994px;">
•                     <li class="-_-switchable-panel-internal539" style="line-height:20px;width:580px;display:block;height:20px;font-size:12px;overflow:hidden;text-decoration:none;float:left;">
•                         <a href="第一个公告链接" style="color:yellow;" target="_blank">第一个公告内容</a></li>
•                     <li class="-_-switchable-panel-internal539" style="line-height:20px;width:580px;display:block;height:20px;font-size:12px;overflow:hidden;text-decoration:none;float:left;">
•                         <a href="第三个公告链接" style="color:yellow;" target="_blank">第二个公告内容</a></li>
•                     <li class="-_-switchable-panel-internal539" style="line-height:20px;width:580px;display:block;height:20px;font-size:12px;overflow:hidden;text-decoration:none;float:left;">
•                         <a href="第三个公告链接" style="color:yellow;" target="_blank">第三个公告内容</a></li>
•                 </ul>
•             </div>
•         </div>
•     </div>
• </div>
  

注意：不要复制代码前面的数字。如果直接复制不好用，可以在此处下载店招自定义代码 1-131231213P2.rar (876 Bytes, 下载次数: 492)

2014-1-1 22:09 上传

点击文件名下载附件 。需要修改的内容我们都已经在代码里标明，您直接修改代码即可。

改好了代码以后，复制下改完的代码，在首页装修页面店招区域，选择编辑--自定义店招--在自定义编辑器里选择源码按钮，将代码粘贴进去，然后底部高度设置为120。如下图所示：

店招源代码

安装完了以后注意点击保存按钮。
第三步：安装导航CSS代码

下面的代码就是本次需要安装的核心代码导航CSS代码：

• .menu-list .menu{border-color:white;border:none;background:none;}
• .all-cats{background:none;max-width:200px;}
• .skin-box-bd .menu-list{width:700px;margin-left:50px;}
• .skin-box-bd .menu-list,.skin-box-bd{float:left;background:none;}
• .skin-box-bd .menu-list .link{background:none;}
• .all-cats .link{background:none;}
• .popup-content,.popup-content .cats-tree .snd-pop-inner{background:black;opacity:0.9;}
• .menu-list .menu .title{color:#FFFFFF;}
• .all-cats .link .title{color:#FFFFFF;margin:0 0 0 60px;font-family:microsoft yahei;font-weight:bold;font-size:16px;}
• .popup-content .cat-name{color:#FFFFFF;}
• .popup-content .cats-tree .snd-pop-inner .cat-name,.popup-content .cats-tree .fst-cat .snd-pop .snd-cat-hd a{color:#FFFFFF;}
• .menu-list .menu-hover .link{background:none;}.all-cats-hover .link{background:none;}
• .popup-content .cats-tree .cat-hd-hover{background:#FF0000;}
• .popup-content .cats-tree .snd-cat-hd-hover{background:#FF0000;}
• .menu-popup-cats .sub-cat-hover{background:#FF0000;}
• .menu-list .menu-hover .title{color:#FFFF00;}.all-cats-hover .link .title{color:#FFFF00;}
• .popup-content .cat-hd-hover .cat-name{color:#FFFFFF;}
• .popup-content .cats-tree .snd-cat-hd-hover .cat-name,.popup-content .cats-tree .fst-cat .snd-pop .snd-cat-hd a:hover{color:#FFFFFF;}
• .menu-popup-cats .sub-cat-hover .cat-name{color:#FFFFFF;}
• .skin-box-bd .menu-list .menu-selected .link .title{background:none;color:#FFFF00;}
• .skin-box-bd .menu-list .menu-selected .link{background:none;}
• .all-cats .link{border-color:white;border:none;}.menu-list .menu{border-color:white;border:none;}
• .skin-box-bd .all-cats-popup{width:200px;}.skin-box-bd .popup-content .cats-tree .fst-cat{width:200px;text-align:center;height:40px;line-height:40px;}
• .skin-box-bd .popup-content .cats-tree .fst-cat .cat-name{padding-left:20px;text-align:center;height:40px;line-height:40px;}
• .popup-content .cats-tree .has-children .fst-cat-icon{margin-top:15px;}.popup-content .cats-tree .snd-pop-inner{padding:0;}
• .skin-box-bd .popup-content .cats-tree .fst-cat .snd-pop .snd-cat-hd a,.popup-content .cats-tree .snd-cat-hd,.popup-content .cats-tree .snd-cat-hd,.popup-content .cats-tree .fst-cat-hd{text-align:left;height:40px;line-height:40px;border-bottom:1px solid #666;}
  

   注意不要复制前面的数字，您也可以直接在此处下载本代码 1-131231214912.rar (622 Bytes, 下载次数: 482)

2014-1-1 22:11 上传

点击文件名下载附件 。

复制上面或者下载文件里的代码，在装修页面鼠标放在导航区域出现编辑按钮，点击编辑，弹出导航设置对话框，这里您可以设置需要在导航里显示的分类或者页面。

然后点击显示设置，弹出一个空白的框，将上面复制的代码直接粘贴进去就可以了。最后注意保存。

最后装修效果：

店招效果图

潇洒哥

基础版 可以设置通栏店招吗 我看到有人写代码说可以  但是自己穿上去 是背景图的

爱C深

请问：公告链接是什么意思？