淘宝天猫店铺装修模板CSS代码

2018/11/2220:58:12淘宝天猫店铺装修模板CSS代码已关闭评论 1,161

淘宝C店1920全屏代码:

<div style="height:500px;">
    <div class="footer-more-trigger" style="left:50%;top:auto;border:none;padding:0;">
        <div class="footer-more-trigger" style="left:-960px;top:auto;border:none;padding:0;">
      <a href="#" target="_blank" style="width:1920px;height:500px;display:block;">
              <img src="#" border="0" alt="全屏海报" /></a>
        </div>
    </div>
</div>

天猫店铺1920全屏自定义代码:

<div style="height:500px;">
	<div class="sn-simple-logo" style="padding:0px; left:50%; top:auto;">
		<div class="sn-simple-logo" style="padding:0px; left:-960px; top:auto;">
			<a href="#" style="width:1920px; height:500px; display:block;" target="_blank"><img src="图片.jpg" alt="淘宝天猫店铺装修模板CSS代码" alt="全屏海报" border="0" /></a>
		</div>
	</div>
</div>

天猫首页添加购物车和收藏链接的方法:

<a class="J_CartPluginTrigger" href="商品链接">加入购物车</a>
<a href="http://favorite.taobao.com/popup/add_collection.htm?id=(宝贝ID)&itemtype=1&scjjc=1" target="_blank">收藏</a>
说明:将代码中的(宝贝ID)替换成宝贝ID(不包括引号),如宝贝链接地址为http://item.taobao.com/item.htm?id=41864596145 ,红色部分即为宝贝ID。 

天猫右侧悬浮侧栏代码:

<div class="J_TWidget margin_top" data-widget-config="{'duration':0.1,'activeTriggerCls':'.tml-dialog-b2b','interval':0.1,'effect':'fade','activeIndex':2,'navCls':'nav_tabs','contentCls':'content_lists','autoplay':true}" data-widget-type="Carousel" style="position:relative;">
	<ul class="content_lists" style="display:none;width:999999px;left:0px;">
		<li style="float:left; z-index:9; opacity:1; position:absolute; display:block;" class="-_-switchable-panel-internal545 ks-switchable-panel-internal692">&nbsp;</li>
	</ul>
	<ul class="nav_tabs" style="width:0;height:0;overflow:visible;">
		<li class="J_TWidget -_-switchable-trigger-internal544 -_- ks-switchable-trigger-internal691 tml-dialog-b2b" style="visibility:visible;width:145px;height:545px;overflow:hidden;left:50%;bottom:40px;margin-left:530px;z-index:99;top:auto;">
			<div style="width:135px; height:423px; margin-right:500px; padding-top:43px; background:url(悬浮栏图片.jpg) no-repeat; top:245px; right:50%;">
					<a href="#第1楼层" style="width:100%; height:30px; display:block;"></a>
					<a href="#第2楼层" style="width:100%; height:30px; display:block;"></a>
					<a href="#第3楼层" style="width:100%; height:30px; display:block;"></a>
					...以上为相关楼层链接代码,以下是返回顶部...
					<a href="#bd" style="width:100%; height:30px; display:block;"></a>

			</div>
		</li>
	</ul>
</div>

天猫左侧悬浮栏代码:

<div class="J_TWidget margin_top" data-widget-config="{'duration':0.1,'activeTriggerCls':'.tml-dialog-b2b','interval':0.1,'effect':'fade','activeIndex':2,'navCls':'nav_tabs','contentCls':'content_lists','autoplay':true}" data-widget-type="Carousel" style="position:relative;">
	<ul class="content_lists" style="width:999999px; left:0px; display:none;">
		<li style="float:left; z-index:9; opacity:1; position:absolute; display:block;" class="-_-switchable-panel-internal545 ks-switchable-panel-internal692">&nbsp;</li>
	</ul>
	<ul class="nav_tabs" style="width:0; height:0; overflow:visible;">
		<li class="J_TWidget -_-switchable-trigger-internal544 -_- ks-switchable-trigger-internal691 tml-dialog-b2b" style="visibility:visible; width:135px; height:463px; overflow:hidden; left:auto; right:50%; bottom:40px; margin-right:500px; z-index:99; top:auto;">
			<div style="width:135px; height:470px;left:auto;margin-right:500px; background:url(http://img01.taobaocdn.com/imgextra/i1/758451085/TB2FQ_vaVXXXXbfXpXXXXXXXXXX-758451085.png) no-repeat; top:245px; right:50%;">
					<a href="#第1楼层" style="width:100%; height:30px; display:block;"></a>
					<a href="#第2楼层" style="width:100%; height:30px; display:block;"></a>
					<a href="#第3楼层" style="width:100%; height:30px; display:block;"></a>
					...以上为相关楼层链接代码,以下是返回顶部...
					<a href="#bd" style="width:100%; height:30px; display:block;"></a>
			</div>
		</li>
	</ul>
</div>

天猫店铺导航CSS说明:

导航条高度和背景设置
.skin-box-bd .menu-list{height:35px;background:none repeat scroll 0 0 #B83F44;}
导航文字设置
.skin-box-bd .menu-list .menu .title{float:none;font-size:14px;color:#FFF;font-family:microsoft yahei;}
隐藏所有分类
.all-cats .link{display:none;}
导航每个分类的宽度和高度
.skin-box-bd .menu-list .menu{width:95px;height:35px;}
导航每个分类下链接的设置
.skin-box-bd .menu-list .menu a{width:95px;height:35px;padding:0;line-height:35px;text-align:center;display:block;}
导航选中的样式
.skin-box-bd .menu-list .menu-selected { background:url(http://img02.taobaocdn.com/imgextra/i2/758451085/T2xprcXM4XXXXXXXXX-758451085.png) no-repeat 0 -84px; }
导航鼠标滑过的设置
.menu-list .menu-hover .link { background:url(http://img02.taobaocdn.com/imgextra/i2/758451085/T2xprcXM4XXXXXXXXX-758451085.png) no-repeat 0 -84px; }
导航下拉列表文字颜色设置
.skin-box-bd .popup-content .sub-cat .cat-name{font-size:14px;color:#FFF;font-family:microsoft yahei;}
导航下拉列表背景色
.skin-box-bd .popup-content{background:#B83F44;}
导航下拉列表鼠标划过背景色
.skin-box-bd .popup-content .menu-popup-cats .sub-cat-hover{background:#600;}
  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin