加入国际站
返回旧版 新版反馈
关闭 评分
铜币:
剩余
* 评分才能提交噢
理由:

 | 
只看楼主


  • 0 楼#

    國産〇〇柒

    • 粉丝
      2139
    • 人气
      1000
    • 积分
      75
    • 铜币
      85349

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

    图片: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张,这种方法比较适合有大量图片需要展示的店铺使用。
          有优点就会有缺点,这种方式在制作关联产品的时候效果不太理想,原因是链接只能加在文字上,图片无法加点击链接。由此可见,制作关联产品仍然是热点模式比较有优势。但是制作其他无需图片加入链接的效果仍然有较大优势。
          今天是纯技术分享,作为上次图文分离的补充分享,内容确实干的有些无聊。如有看不太明白的小伙伴可以联系国産〇〇柒交流。
    国産〇〇柒电商分享

  • 封禁
    1 楼#

    采菇凉的小蘑菇

    • 粉丝
      7
    • 人气
      352
    • 积分
      0
    • 铜币
      327

    用户被禁言,该主题自动屏蔽!

  • 2 楼#

    zshongbao

    • 粉丝
      14
    • 人气
      845
    • 积分
      200
    • 铜币
      1518

    感谢无私奉献

  • 3 楼#

    cn1518291895nikm

    • 粉丝
      38
    • 人气
      1407
    • 积分
      35
    • 铜币
      91

       没看懂

  • 4 楼#

    cn1512882779

    • 粉丝
      5
    • 人气
      114
    • 积分
      0
    • 铜币
      1

    喜欢技术男,暂时还没搞懂这个代码,呵呵

  • 5 楼#

    cn1519387074vncr

    • 粉丝
      2
    • 人气
      67
    • 积分
      0
    • 铜币
      8

    不错不错,看得懂一些些,大概明白是怎么回事

  • 6 楼#

    cn1519391614ghdw

    • 粉丝
      0
    • 人气
      71
    • 积分
      0
    • 铜币
      24

    赞一个,最近正准备学习这个!

  • 7 楼#

    cn1516708874cnnp

    • 粉丝
      34
    • 人气
      2668
    • 积分
      0
    • 铜币
      563

    用户被禁言,该主题自动屏蔽!

  • 8 楼#

    國産〇〇柒

    • 粉丝
      2139
    • 人气
      1000
    • 积分
      75
    • 铜币
      85349

    zshongbao:感谢无私奉献回到原帖
    大家可以一起分享,越分享  越成长

  • 9 楼#

    國産〇〇柒

    • 粉丝
      2139
    • 人气
      1000
    • 积分
      75
    • 铜币
      85349

    cn1518291895nikm:没看懂回到原帖
    可以多多交流~ 共同学习

  • 10 楼#

    國産〇〇柒

    • 粉丝
      2139
    • 人气
      1000
    • 积分
      75
    • 铜币
      85349

    cn1512882779:喜欢技术男,暂时还没搞懂这个代码,呵呵回到原帖
    多交流,一起学习 一起分享

  • 11 楼#

    國産〇〇柒

    • 粉丝
      2139
    • 人气
      1000
    • 积分
      75
    • 铜币
      85349

    cn1519387074vncr:不错不错,看得懂一些些,大概明白是怎么回事回到原帖
    加油~

  • 12 楼#

    國産〇〇柒

    • 粉丝
      2139
    • 人气
      1000
    • 积分
      75
    • 铜币
      85349

    cn1519391614ghdw:赞一个,最近正准备学习这个!回到原帖
    一起学习  交流

  • 13 楼#

    國産〇〇柒

    • 粉丝
      2139
    • 人气
      1000
    • 积分
      75
    • 铜币
      85349

    cn1516708874cnnp:感谢楼主分享,很详细回到原帖

  • 14 楼#

    cn1519302171eumj

    • 粉丝
      8
    • 人气
      187
    • 积分
      0
    • 铜币
      89

    666

  • 15 楼#

    cn1519302171eumj

    • 粉丝
      8
    • 人气
      187
    • 积分
      0
    • 铜币
      89

    猜猜我谁

  • 16 楼#

    國産〇〇柒

    • 粉丝
      2139
    • 人气
      1000
    • 积分
      75
    • 铜币
      85349

    cn1519302171eumj:猜猜我谁回到原帖
    不管你是谁,肯定很漂亮

  • 17 楼#

    cn1519302171eumj

    • 粉丝
      8
    • 人气
      187
    • 积分
      0
    • 铜币
      89


  • 18 楼#

    cn1519302171eumj

    • 粉丝
      8
    • 人气
      187
    • 积分
      0
    • 铜币
      89

    666,可爱的我又出来了

  • 19 楼#

    xwq19880908

    • 粉丝
      4
    • 人气
      208
    • 积分
      495
    • 铜币
      27

    10086个赞!



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

    图片: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张,这种方法比较适合有大量图片需要展示的店铺使用。
          有优点就会有缺点,这种方式在制作关联产品的时候效果不太理想,原因是链接只能加在文字上,图片无法加点击链接。由此可见,制作关联产品仍然是热点模式比较有优势。但是制作其他无需图片加入链接的效果仍然有较大优势。
          今天是纯技术分享,作为上次图文分离的补充分享,内容确实干的有些无聊。如有看不太明白的小伙伴可以联系国産〇〇柒交流。
    国産〇〇柒电商分享


  • 封禁

    用户被禁言,该主题自动屏蔽!



  • 感谢无私奉献



  •    没看懂



  • 喜欢技术男,暂时还没搞懂这个代码,呵呵



  • 不错不错,看得懂一些些,大概明白是怎么回事



  • 赞一个,最近正准备学习这个!



  • 用户被禁言,该主题自动屏蔽!



  • zshongbao:感谢无私奉献回到原帖
    大家可以一起分享,越分享  越成长



  • cn1518291895nikm:没看懂回到原帖
    可以多多交流~ 共同学习



  • cn1512882779:喜欢技术男,暂时还没搞懂这个代码,呵呵回到原帖
    多交流,一起学习 一起分享



  • cn1519387074vncr:不错不错,看得懂一些些,大概明白是怎么回事回到原帖
    加油~



  • cn1519391614ghdw:赞一个,最近正准备学习这个!回到原帖
    一起学习  交流



  • cn1516708874cnnp:感谢楼主分享,很详细回到原帖



  • 666



  • 猜猜我谁



  • cn1519302171eumj:猜猜我谁回到原帖
    不管你是谁,肯定很漂亮






  • 666,可爱的我又出来了



  • 10086个赞!


68 回复

与 外贸社区|外贸圈 的连接断开,我们正在尝试重连,请耐心等待