你好,欢迎来到阿里巴巴外贸圈 注册 登出
cn1511425066
名人堂嘉宾
名人堂嘉宾
  • 用户名cn1511425066
  • 粉丝2158
  • 发帖数1743
  • 铜币717枚
  • 威望19点
  • 追星达人
  • 活跃读者
  • 外贸达人
  • 社区居民
  • 忠实会员
  • 最爱沙发
  • 社区明星
阅读:35548回复:67

[名人堂嘉宾]产品详情代码分享之图文分离(二)

楼主#
更多 发布于:2016-11-28 11:29
國産〇〇柒
       今天给大家分享另外一种阿里巴巴国际站宝贝详情页图文分离的方法,之前给大家分享过一种图文分离的方法,有兴趣的小伙伴可以点击这里查看零基础玩儿代码之详情页图文分离。今天这种方式与之前的方法不同,目前来看阿里是支持这种方法的,废话不多说直接干货上图:
这里我就用制作详情描述中关联产品模板的方式举例,如下图:

图片:moban.jpg

      这里把所有的产品制作到同一张图片上,每个产品下部留出文字空间(由于下面代码的调试全部是基于该图,所以下面给出的代码在阿里详情页内部只符合该图尺寸,有需要该模板PSD源文件的小伙伴可联系国産〇〇柒)
接下来我们看一下加入代码后在阿里产品详情页预览效果,如图:

图片:阿里内预览示意图02.png

下面直接上代码:

<div style="background: url('这里填写你的图片链接') no-repeat; width: 750px; height: 472px; clear: both;">
<div style="clear: both; width: 130px; font-size: 14px; float: left; text-align: center; margin-top: 185px; height: 30px;"><a href="产品链接地址" target="_blank">print painting on canvas for sales</a></div>
<div style="float: left; width: 40px; margin-left: 3px; margin-top: 185px; text-decoration: line-through; text-align: center;"><span style="font-size: 8px;">235</span></div>
<div style="float: left; width: 40px; margin-left: -40px; margin-top: 203px; color: #ff6600; text-align: center;"><span style="font-size: 8px;">199</span></div>
<div style="width: 130px; font-size: 14px; float: left; text-align: center; margin-top: 185px; margin-left: 19px; height: 30px;"><a href="产品链接地址" target="_blank">oil painting with inner frame</a></div>
<div style="float: left; width: 39px; margin-left: 3px; margin-top: 185px; text-decoration: line-through; text-align: center;"><span style="font-size: 8px;">265</span></div>
<div style="float: left; width: 39px; margin-left: -39px; margin-top: 203px; color: #ff6600; text-align: center;"><span style="font-size: 8px;">185</span></div>
<div style="width: 128px; font-size: 14px; float: left; text-align: center; margin-top: 185px; margin-left: 19px; height: 30px;"><a href="产品链接地址" target="_blank">buddha painting with inner frame</a></div>
<div style="float: left; width: 40px; margin-left: 3px; margin-top: 185px; text-decoration: line-through; text-align: center;"><span style="font-size: 8px;">289</span></div>
<div style="float: left; width: 40px; margin-left: -40px; margin-top: 203px; color: #ff6600; text-align: center;"><span style="font-size: 8px;">168</span></div>
<div style="width: 128px; font-size: 14px; float: left; text-align: center; margin-top: 185px; margin-left: 19px; height: 30px;"><a href="产品链接地址" target="_blank">canvas painting with inner frame</a></div>
<div style="float: left; width: 40px; margin-left: 3px; margin-top: 185px; text-decoration: line-through; text-align: center;"><span style="font-size: 8px;">245</span></div>
<div style="float: left; width: 40px; margin-left: -40px; margin-top: 203px; color: #ff6600; text-align: center;"><span style="font-size: 8px;">188</span></div>
<div style="width: 128px; font-size: 14px; float: left; text-align: center; margin-top: 198px; height: 30px; margin-left: 2px;"><a href="产品链接地址" target="_blank">inner frame for painting</a></div>
<div style="float: left; width: 40px; margin-left: 3px; margin-top: 198px; text-decoration: line-through; text-align: center;"><span style="font-size: 8px;">25</span></div>
<div style="float: left; width: 40px; margin-left: -40px; margin-top: 217px; color: #ff6600; text-align: center;"><span style="font-size: 8px;">9.9</span></div>
<div style="width: 126px; font-size: 14px; float: left; text-align: center; margin-top: 198px; margin-left: 20px; height: 30px;"><a href="产品链接地址" target="_blank">stretcher bar for painting</a></div>
<div style="float: left; width: 40px; margin-left: 4px; margin-top: 198px; text-decoration: line-through; text-align: center;"><span style="font-size: 8px;">35</span></div>
<div style="float: left; width: 40px; margin-left: -40px; margin-top: 217px; color: #ff6600; text-align: center;"><span style="font-size: 8px;">15</span></div>
<div style="width: 126px; font-size: 14px; float: left; text-align: center; margin-top: 198px; margin-left: 20px; height: 30px;"><a href="产品链接地址" target="_blank">wood photo shadow frame </a></div>
<div style="float: left; width: 40px; margin-left: 4px; margin-top: 198px; text-decoration: line-through; text-align: center;"><span style="font-size: 8px;">15</span></div>
<div style="float: left; width: 40px; margin-left: -40px; margin-top: 217px; color: #ff6600; text-align: center;"><span style="font-size: 8px;">6</span></div>
<div style="width: 126px; font-size: 14px; float: left; text-align: center; margin-top: 198px; margin-left: 20px; height: 30px;"><a href="产品链接地址" target="_blank">oil painting with frame</a></div>
<div style="float: left; width: 40px; margin-left: 4px; margin-top: 198px; text-decoration: line-through; text-align: center;"><span style="font-size: 8px;">689</span></div>
<div style="float: left; width: 40px; margin-left: -40px; margin-top: 217px; color: #ff6600; text-align: center;"><span style="font-size: 8px;">459</span></div>
</div>
(由于阿里对代码的支持不是太理想,以上代码是通过多次在阿里后台调试得出,结合上图可直接使用。以上代码并非最精简,如有需要小伙伴们可以自行精简,也可以自己按照自己的设计图来调整代码)【参考为主】


注意:第一句代码中

<div style="background: url('这里填写你的图片链接') no-repeat; width: 750px; height: 472px; clear: both;">
Width建议是750;height必须是你制作图片的实际高度。
url('这里填写你的图片链接')一般都是把图片上传到图片银行空间中,然后复制其网址,记住:链接中如有后缀“_350x350.jpg”,一定要去掉。


优缺点:

采用这种图文分离的优点:不占用阿里详情描述中的图片数量,如图:

图片:不占用图片数03.png


      已经加入图片,后台显示图片张数仍为15张,这种方法比较适合有大量图片需要展示的店铺使用。
      有优点就会有缺点,这种方式在制作关联产品的时候效果不太理想,原因是链接只能加在文字上,图片无法加点击链接。由此可见,制作关联产品仍然是热点模式比较有优势。但是制作其他无需图片加入链接的效果仍然有较大优势。
      今天是纯技术分享,作为上次图文分离的补充分享,内容确实干的有些无聊。如有看不太明白的小伙伴可以联系国産〇〇柒交流。
国産〇〇柒电商分享
2条评分, 铜币 +2
  • 俄双清专线
    铜币 +1
    你这么厉害圈妹造吗!
    2016-11-29 16:32
  • 贸小七-王
    铜币 +1
    地球已经无法阻止你的脚步了!
    2016-11-29 10:40
喜欢28 评分2
007公众号
互动交流请加Q群:348745696,“阿里店铺”、“行业及同行”数据挖掘及分析学习交流加Q:378859340

cn1519728830obaq
禁止发言
禁止发言
  • 用户名cn1519728830obaq
  • 粉丝13
  • 发帖数265
  • 铜币327枚
  • 威望-3点
  • 活跃读者
  • 社区居民
沙发#
发布于:2016-11-28 12:00
用户被禁言,该主题自动屏蔽!
回复(0) 喜欢(0)     评分
zshongbao
外贸博士
外贸博士
  • 用户名zshongbao
  • 粉丝21
  • 发帖数517
  • 铜币1518枚
  • 威望0点
  • 社区居民
  • 忠实会员
板凳#
发布于:2016-11-28 14:10
感谢无私奉献
top one
回复(1) 喜欢(0)     评分
cn1518291895nikm
外贸新生
外贸新生
  • 用户名cn1518291895nikm
  • 粉丝47
  • 发帖数2418
  • 铜币91枚
  • 威望0点
  • 活跃读者
  • 忠实会员
地板#
发布于:2016-11-28 16:03
   没看懂
​​​
回复(2) 喜欢(1)     评分
cn1512882779
外贸新生
外贸新生
  • 用户名cn1512882779
  • 粉丝12
  • 发帖数42
  • 铜币1枚
  • 威望0点
地下室#
发布于:2016-11-28 17:04
喜欢技术男,暂时还没搞懂这个代码,呵呵
回复(1) 喜欢(0)     评分
cn1519387074vncr
外贸学长
外贸学长
  • 用户名cn1519387074vncr
  • 粉丝4
  • 发帖数29
  • 铜币8枚
  • 威望0点
下水道#
发布于:2016-11-28 17:12
不错不错,看得懂一些些,大概明白是怎么回事
I wanna stronger
回复(1) 喜欢(0)     评分
cn1519391614ghdw
外贸新生
外贸新生
  • 用户名cn1519391614ghdw
  • 粉丝3
  • 发帖数32
  • 铜币24枚
  • 威望0点
地下城市#
发布于:2016-11-28 18:04
赞一个,最近正准备学习这个!
回复(1) 喜欢(0)     评分
cn1516708874cnnp
禁止发言
禁止发言
  • 用户名cn1516708874cnnp
  • 粉丝40
  • 发帖数5737
  • 铜币563枚
  • 威望-2点
地核#
发布于:2016-11-28 18:14
用户被禁言,该主题自动屏蔽!
回复(1) 喜欢(0)     评分
cn1511425066
名人堂嘉宾
名人堂嘉宾
  • 用户名cn1511425066
  • 粉丝2158
  • 发帖数1743
  • 铜币717枚
  • 威望19点
  • 追星达人
  • 活跃读者
  • 外贸达人
  • 社区居民
  • 忠实会员
  • 最爱沙发
  • 社区明星
地心#
发布于:2016-11-29 09:48
zshongbao:感谢无私奉献回到原帖
大家可以一起分享,越分享  越成长
007公众号
互动交流请加Q群:348745696,“阿里店铺”、“行业及同行”数据挖掘及分析学习交流加Q:378859340

回复(0) 喜欢(0)     评分
cn1511425066
名人堂嘉宾
名人堂嘉宾
  • 用户名cn1511425066
  • 粉丝2158
  • 发帖数1743
  • 铜币717枚
  • 威望19点
  • 追星达人
  • 活跃读者
  • 外贸达人
  • 社区居民
  • 忠实会员
  • 最爱沙发
  • 社区明星
9重天#
发布于:2016-11-29 09:48
cn1518291895nikm:没看懂回到原帖
可以多多交流~ 共同学习
007公众号
互动交流请加Q群:348745696,“阿里店铺”、“行业及同行”数据挖掘及分析学习交流加Q:378859340

回复(0) 喜欢(0)     评分
cn1511425066
名人堂嘉宾
名人堂嘉宾
  • 用户名cn1511425066
  • 粉丝2158
  • 发帖数1743
  • 铜币717枚
  • 威望19点
  • 追星达人
  • 活跃读者
  • 外贸达人
  • 社区居民
  • 忠实会员
  • 最爱沙发
  • 社区明星
10楼#
发布于:2016-11-29 09:48
cn1512882779:喜欢技术男,暂时还没搞懂这个代码,呵呵回到原帖
多交流,一起学习 一起分享
007公众号
互动交流请加Q群:348745696,“阿里店铺”、“行业及同行”数据挖掘及分析学习交流加Q:378859340

回复(0) 喜欢(0)     评分
cn1511425066
名人堂嘉宾
名人堂嘉宾
  • 用户名cn1511425066
  • 粉丝2158
  • 发帖数1743
  • 铜币717枚
  • 威望19点
  • 追星达人
  • 活跃读者
  • 外贸达人
  • 社区居民
  • 忠实会员
  • 最爱沙发
  • 社区明星
11楼#
发布于:2016-11-29 09:49
cn1519387074vncr:不错不错,看得懂一些些,大概明白是怎么回事回到原帖
加油~
007公众号
互动交流请加Q群:348745696,“阿里店铺”、“行业及同行”数据挖掘及分析学习交流加Q:378859340

回复(0) 喜欢(0)     评分
cn1511425066
名人堂嘉宾
名人堂嘉宾
  • 用户名cn1511425066
  • 粉丝2158
  • 发帖数1743
  • 铜币717枚
  • 威望19点
  • 追星达人
  • 活跃读者
  • 外贸达人
  • 社区居民
  • 忠实会员
  • 最爱沙发
  • 社区明星
12楼#
发布于:2016-11-29 09:49
cn1519391614ghdw:赞一个,最近正准备学习这个!回到原帖
一起学习  交流
007公众号
互动交流请加Q群:348745696,“阿里店铺”、“行业及同行”数据挖掘及分析学习交流加Q:378859340

回复(0) 喜欢(0)     评分
cn1511425066
名人堂嘉宾
名人堂嘉宾
  • 用户名cn1511425066
  • 粉丝2158
  • 发帖数1743
  • 铜币717枚
  • 威望19点
  • 追星达人
  • 活跃读者
  • 外贸达人
  • 社区居民
  • 忠实会员
  • 最爱沙发
  • 社区明星
13楼#
发布于:2016-11-29 09:49
cn1516708874cnnp:感谢楼主分享,很详细回到原帖
007公众号
互动交流请加Q群:348745696,“阿里店铺”、“行业及同行”数据挖掘及分析学习交流加Q:378859340

回复(0) 喜欢(0)     评分
cn1519302171eumj
外贸学长
外贸学长
  • 用户名cn1519302171eumj
  • 粉丝15
  • 发帖数128
  • 铜币89枚
  • 威望0点
  • 社区居民
14楼#
发布于:2016-11-29 10:07
666
回复(0) 喜欢(0)     评分
cn1519302171eumj
外贸学长
外贸学长
  • 用户名cn1519302171eumj
  • 粉丝15
  • 发帖数128
  • 铜币89枚
  • 威望0点
  • 社区居民
15楼#
发布于:2016-11-29 10:08
猜猜我谁
回复(1) 喜欢(0)     评分
cn1511425066
名人堂嘉宾
名人堂嘉宾
  • 用户名cn1511425066
  • 粉丝2158
  • 发帖数1743
  • 铜币717枚
  • 威望19点
  • 追星达人
  • 活跃读者
  • 外贸达人
  • 社区居民
  • 忠实会员
  • 最爱沙发
  • 社区明星
16楼#
发布于:2016-11-29 10:12
cn1519302171eumj:猜猜我谁回到原帖
不管你是谁,肯定很漂亮
007公众号
互动交流请加Q群:348745696,“阿里店铺”、“行业及同行”数据挖掘及分析学习交流加Q:378859340

回复(0) 喜欢(0)     评分
cn1519302171eumj
外贸学长
外贸学长
  • 用户名cn1519302171eumj
  • 粉丝15
  • 发帖数128
  • 铜币89枚
  • 威望0点
  • 社区居民
17楼#
发布于:2016-11-29 10:14
回复(0) 喜欢(0)     评分
cn1519302171eumj
外贸学长
外贸学长
  • 用户名cn1519302171eumj
  • 粉丝15
  • 发帖数128
  • 铜币89枚
  • 威望0点
  • 社区居民
18楼#
发布于:2016-11-29 10:18
666,可爱的我又出来了
回复(1) 喜欢(0)     评分
hunhr
外贸新生
外贸新生
  • 用户名hunhr
  • 粉丝14
  • 发帖数30
  • 铜币27枚
  • 威望0点
  • 社区居民
19楼#
发布于:2016-11-29 10:18
10086个赞!
新手上路,请多关照!
回复(1) 喜欢(0)     评分
上一页
游客