天猫京东当当店铺常用代码整理

web前端 8827 9年前 (2016-01-19)

淘宝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>


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

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


天猫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="全屏海报" border="0" /></a>
		</div>
	</div>
</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="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(图片.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>


天猫导航去掉微淘主页的方法:

点店铺装修 → 编辑导航条→显示设置
加入后面的代码
.aitao-menu{display: none; width:0px; text-indent:2000px;} --------------隐藏微淘主页
.aitao-menu{float:right;} --------------将微淘主页显示在导航最右侧


天猫店铺导航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(背景.png) no-repeat 0 -84px; }
导航鼠标滑过的设置
.menu-list .menu-hover .link { background:url(背景.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;}


当当店铺全屏无轮播代码(1920*400):

<div style="height:400px;" class="shop_topbanner">
<div style="position: absolute; margin-left:-480px;">
<a href="图片链接" target="_blank"><img height="400" width="1920" src="图片.jpg" />
</div>
</div>


京东全屏代码:

<div style="width:1920px; height:400px">
	<div style="width:1920px; left:50%; position:absolute; height:400px;">
		<div style=" width:1920px;margin-left:-960px;height:400px;">
			<img src="图片.jpg" />
		</div>
	</div>
</div>
分享给朋友: