零基础玩儿代码之详情页图文分离

零基础玩儿代码之详情页图文分离

国産〇〇柒

注释：2016-11-29编辑添加，第二种图文分离方法：点击这里查看分享
很多入门的童鞋看到标题后也许不太理解是什么意思，这里我就从基础着手。图文分离其实就是把咱们平时用PS等制图软件制作的图片上的文字用代码的方法去实现，而不是直接把文字与图片做成一体的形式。也许有很多童鞋不理解为什么要这样做。其实原因很简单啦，你直接用制图软件生成的带文字的图片，但图片上面的文字是不能被阿里搜索系统检测出来的（并不是说没有这方面的技术），但是如果你把图片与文字分开来处理，用代码的方式去实现图片上的文字，达到的视觉效果是一样的，而且阿里搜索能够识别这些文字，对搜索排序是有益的(由于阿里详情描述有字数上限，所以我们实际制作的时候也必须要考虑实际情况，不要超过阿里上限范围)。
现在我就用“本地实例”来給大家讲解一下代码的使用方法。这里我就随便用一张图片来进行演示，大家制作的时候可以先把代码在“本地电脑”上做好，然后复制到阿里详情描述的html代码区域即可，接下来首先先看一下制作的成品，如图：

图片：完成品.jpg

为了给大家充分讲解图片文字代码控制效果，上图中所有文字都是使用代码浮动在图片上部的。无文字实际图片如下：

图片：kong.jpg

在制图软件中，大家只需要把图片做成上图这样既可，里面的文字可以全部用代码的形式去实现。当然，我这里是为了給大家演示，在实际操作过程中，有一些没必要用代码实现的文字可以直接用图片制作出来。比如：优惠券上面的文字、点击领取这类的跟关键词和产品无关的文字便没有必要用代码形式实现。但是在这里我会全部用代码形式来給大家实现。
制作步骤：
1，桌面创建一文件夹，起名为“文字浮动”，然后把用PS制作好的没有文字的图片复制到这个文件夹内（实际阿里操作的时候需要先把这个图片上传到阿里图片银行中，并取出图片连接地址以备后用）。
2，在“文字浮动”文件夹里点击鼠标右键，依次选择“新建”，然后点击新建里的“文本文档”。然后把文本文字名称修改成float，后缀名由.txt修改成.html。修改前后如图：

图片：修改前.jpg

（关于打开文件的“后缀名”，这块也是很简单的，文件夹上面有一排工具，大家选取查看，然后在下面就可以看到“文件扩展名”这个选项，把它前面的复选框打上“对号”即可）

图片：修改后.jpg

3，完成以上步骤后，在float.html这个文件上点击右键，然后选择“打开方式”在里面选择用“记事本”方式打开。然后把下面代码复制到打开的记事本中（关于代码的编辑工具有很多种，这里我们就不去介绍，也不用去下载，这里咱们就用最简单的“记事本”工具）。
代码：

&lt;div&gt;&lt;img src="#" style="float:left;width:0px;height:0px;"/&gt;&lt;/div&gt;
&lt;div&gt;
&lt;p style="float:left; margin-top:0px; margin-left:0px; font-size:0px;  font-family:'#' color:#ffffff"&gt;这里是需要浮动的文字&lt;/p&gt;
&lt;/div&gt;    
&lt;!-- 这里是代码注释，使用时无需复制，本代码中#号，除color后#号外，其余均是需要替换成相应值，所有0px均需要填写相应数值   --&gt;

以上代码含义：<div>我们可以忽略不去考虑，<p>标签我们也不要过分在意，我们只要注意:
<1>. <img/>里面的一些信息，img标签里面的 src=”#”这个表示链接图片，其中#号是需要我们换成我们需要使用的图片的地址，在阿里实际操作的时候，我们需要先把没有带文字的图片上传到后台图片空间里，然后复制出这个图片的实际地址，这个地址必须是以“http://”开头的，由于我们这里的演示是在本机进行，所以这个地址跟实际上传后的地址有区别，这一点大家需要注意。
<2>.然后需要注意的是width:0px 和 height:0px，这两个代码是控制图片显示的宽高。里面的0px是需要换成我们实际想让图片展示的宽高数据的。在这里，高度height是没有什么特殊要求的，宽度width这个建议不要超越750px，因为阿里产品页面的宽度是有限的超越这个宽度后会显示不全图片，这一点大家在PS里面制图的时候要考虑进去的。
<3>.接下来我们要注意的是margin-top和margin-left这两个值，他们两个是控制浮动文字的位置的，是非常非常的重要的参数，后面的数值是需要我们自行调整。
<4>.接下来是font-size:0px; font-family:'#'这两个一个是控制浮动文字的大小，后面需要填写字号，一个是控制浮动文字的字体类型，关于这个字体类型，我们必须使用阿里系统提供给我们的字体，不然的话是没办法实现效果的，实际阿里操作中全部为英文字体，没有中文，这里我使用的有中文字体。
<5>.最后一项是color:#ffffff 这是控制字体颜色的，字体颜色可以用英文来表示，比如red 、blue、black等，也可以用十六进制来表示，这里我们用十六进制来表示字体颜色。
4，上面的基础工作完成之后，接下来就是制作阶段了，我们用记事本打开刚从复制到float.html 里面的代码。如图：

图片：记事本代码01.jpg

打开之后我们需要做的第一件事就是先把img里面的图片地址链接添加进去，因为只有这样我们才可以依据这个图片来进行添加浮动文字。在阿里实际操作过程中，这里是需要先把没有文字的图片上传到阿里图片空间中，然后复制上传图片的地址，替换掉代码src 后面的#号。（引号千万不能丢失。实际操作中图片地址应该是以http://开头的），由于我这里是在本地电脑演示操作，所以直接把#号换成图片名称即可。代码即是src="无文字图片.jpg"。这时我们可以用浏览器打开float.html来预览一下，效果如图：（切忌。记事本“保存”后才可以预览出修改效果，每次增加修改都需要保存后才可预览效果）

图片：浏览器打开效果02.jpg

（在浏览器中打开之后预览效果如上图，由于需要添加图片，所以代码我进行了修改，图片的宽高修改成500px，字体的颜色修改成黑色，字体设置成了’微软雅黑’）
5，接下来我们开始进行浮动文字的制作，首先把<p>标签中默认的文字”这里是需要浮动的文字”修改成为咱们的第一个文字内容“2014带上梦和幸福前行”，接下来是修改margin-top和margin-left的值来控制这段文字在图片上的位置，代码修改如下：

&lt;p style="float:left;margin-top:95px;margin-left:-372px; font-size:15px; font-family:'微软雅黑';"&gt;2014带上梦和幸福前行&lt;/p&gt;

打开浏览器预览效果如下图：

图片：第一个文字效果03.jpg

（由上图可以看到，我们想要的文字效果及位置已经做好）

6，接下来依次在代码里添加我们需要定位的文字，其实就是添加<p>标签，并且添加里面所需的内容。浮动字体全部代码如下：（由于是阿里环境，这里咱们全部使用<p>来进行设置）

&lt;div&gt;
&lt;p style="float:left;margin-top:95px;margin-left:-372px; font-size:15px; font-family:'微软雅黑';"&gt;2014带上梦和幸福前行&lt;/p&gt;
&lt;p style="float:left;margin-top:95px;margin-left:-202px; color:#FFFFFF;font-family:'微软雅黑';"&gt;全场包邮&lt;/p&gt;
&lt;p style="float:left;margin-top:116px;margin-left:-390px;font-size:72px; font-family:'方正大标宋简体';"&gt;幸福前行&lt;/p&gt;
&lt;p style="float:left;margin-top:185px;margin-left:-378px;font-size:38px; font-family:Georgia, 'Times New Roman', Times, serif"&gt;HAPPY GO ON&lt;/p&gt;
&lt;p style="float:left;margin-top:230px;margin-left:-347px;font-size:10px; font-family:Georgia, 'Times New Roman', Times, serif"&gt;MAY THE SEASONS JOY FILL YOU &lt;/p&gt;
&lt;p style="float:left;margin-top:245px;margin-left:-316px;font-size:10px; font-family:Georgia, 'Times New Roman', Times, serif"&gt; ALL THE YEAR ROUND&lt;/p&gt;
&lt;p style="float:left;margin-top:294px;margin-left:-430px; font-size:26px; color:#FFFFFF; font-family:'黑体';"&gt;20元优惠券&lt;/p&gt;
&lt;p style="float:left;margin-top:322px;margin-left:-382px; font-size:12px; color:#FFFFFF; font-family:'黑体';"&gt;满370元减20元&lt;/p&gt;
&lt;p style="float:left;margin-top:298px;margin-left:-290px; font-size:12px;font-family:'微软雅黑';"&gt;点击&lt;/p&gt;
&lt;p style="float:left;margin-top:312px;margin-left:-290px; font-size:12px;font-family:'微软雅黑';"&gt;领取&lt;/p&gt;   
&lt;p style="float:left;margin-top:294px;margin-left:-240px; font-size:26px; color:#FFFFFF; font-family:'黑体';"&gt;50元优惠券&lt;/p&gt;
&lt;p style="float:left;margin-top:322px;margin-left:-190px; font-size:12px; color:#FFFFFF; font-family:'黑体';"&gt;满470元减50元&lt;/p&gt;
&lt;p style="float:left;margin-top:298px;margin-left:-96px; font-size:12px;font-family:'微软雅黑';"&gt;点击&lt;/p&gt;
&lt;p style="float:left;margin-top:312px;margin-left:-96px; font-size:12px;font-family:'微软雅黑';"&gt;领取&lt;/p&gt;    
&lt;p style="float:left;margin-top:343px;margin-left:-320px; font-size:14px; font-family:'微软雅黑';"&gt;活动时间：12月31日&lt;/p&gt;    
&lt;p style="float:left;margin-top:480px;margin-left:-235px; font-size:12px; font-family:'微软雅黑';"&gt;国産〇〇柒微&lt;/p&gt;
&lt;p style="float:left;margin-top:480px;margin-left:-112px; font-size:12px; font-family:'微软雅黑';"&gt;国産〇〇柒公众号&lt;/p&gt;
&lt;/div&gt;

上面是浮动文字所需要的全部代码，看上去很多很难的样子，其实大多是一样的代码，重复使用，所需要调整的就是定位代码，字体颜色，字体，字体大小，其余的基本都不需要修改的。最终效果如图：

图片：最终.jpg

7，本案例全部完整代码如下：

&lt;div&gt;&lt;img src="无文字图片.jpg"style="float:left;width:500px;height:500px;"/&gt;&lt;/div&gt;
&lt;div&gt;&lt;p style="float:left;margin-top:95px;margin-left:-372px; font-size:15px; font-family:'微软雅黑';"&gt;2014带上梦和幸福前行&lt;/p&gt;
&lt;p style="float:left;margin-top:95px;margin-left:-202px; color:#FFFFFF;font-family:'微软雅黑';"&gt;全场包邮&lt;/p&gt;
&lt;p style="float:left;margin-top:116px;margin-left:-390px;font-size:72px; font-family:'方正大标宋简体';"&gt;幸福前行&lt;/p&gt;
&lt;p style="float:left;margin-top:185px;margin-left:-378px;font-size:38px; font-family:Georgia, 'Times New Roman', Times, serif"&gt;HAPPY GO ON&lt;/p&gt;
&lt;p style="float:left;margin-top:230px;margin-left:-347px;font-size:10px; font-family:Georgia, 'Times New Roman', Times, serif"&gt;MAYTHE SEASONS JOY FILL YOU &lt;/p&gt;
&lt;p style="float:left;margin-top:245px;margin-left:-316px;font-size:10px; font-family:Georgia, 'Times New Roman', Times, serif"&gt;   ALL THE YEAR ROUND&lt;/p&gt;
&lt;p style="float:left;margin-top:294px;margin-left:-430px; font-size:26px; color:#FFFFFF; font-family:'黑体';"&gt;20元优惠券&lt;/p&gt;
&lt;p style="float:left;margin-top:322px;margin-left:-382px; font-size:12px; color:#FFFFFF; font-family:'黑体';"&gt;满370元减20元&lt;/p&gt;
&lt;p style="float:left;margin-top:298px;margin-left:-290px; font-size:12px;font-family:'微软雅黑';"&gt;点击&lt;/p&gt;
&lt;p style="float:left;margin-top:312px;margin-left:-290px; font-size:12px;font-family:'微软雅黑';"&gt;领取&lt;/p&gt;    
&lt;p style="float:left;margin-top:294px;margin-left:-240px; font-size:26px; color:#FFFFFF; font-family:'黑体';"&gt;50元优惠券&lt;/p&gt;
&lt;p style="float:left;margin-top:322px;margin-left:-190px; font-size:12px; color:#FFFFFF; font-family:'黑体';"&gt;满470元减50元&lt;/p&gt;
&lt;p style="float:left;margin-top:298px;margin-left:-96px; font-size:12px;font-family:'微软雅黑';"&gt;点击&lt;/p&gt;
&lt;p style="float:left;margin-top:312px;margin-left:-96px; font-size:12px;font-family:'微软雅黑';"&gt;领取&lt;/p&gt;   
&lt;p style="float:left;margin-top:343px;margin-left:-320px; font-size:14px; font-family:'微软雅黑';"&gt;活动时间：12月31日&lt;/p&gt;   
&lt;p style="float:left;margin-top:480px;margin-left:-235px; font-size:12px; font-family:'微软雅黑';"&gt;国産〇〇柒微&lt;/p&gt;
&lt;p style="float:left;margin-top:480px;margin-left:-112px; font-size:12px; font-family:'微软雅黑';"&gt;国産〇〇柒公众号&lt;/p&gt;
&lt;/div&gt;

总结：阿里详情页实际制作的时候可以先在自己电脑上用我演示的方法把代码制作完成，然后复制到阿里产品详情页html中即可。需要记住的重点是切忌图片连接地址一定要换成阿里图片银行里面的连接地址，其余的本地代码基本不需要修改，添加到阿里后台后如有错位可以进行位置的微调。大家制作过程中如遇到问题可联系“国産〇〇柒”，大家共同学习进步。

这个代码语言阿里发产品同样适用吗

多谢分享

cn1512156746：这个代码语言阿里发产品同样适用吗回到原帖

适用于阿里，这里之所以发帖就是因为可以在阿里中使用，代码可以在自己电脑里做好之后复制到阿里上

cn1512156746：这个代码语言阿里发产品同样适用吗回到原帖

@cn1511425066：你可以把之前图片上介绍产品及与关键词有关的这些文字分离出来，与关键词与产品无关的文字可以不用分离

cn1000743222：多谢分享回到原帖

共同学习

亲，给你个好评哦！

赞一个！

不错，来学习了

感谢精彩分享！

看过楼主的很多文章，赞一个

亲，给你个好评哦！

不错

cn1111926082kyzy：看过楼主的很多文章，赞一个回到原帖

大家一起分享共同进步哈

自己学着操作了一下，结果不错！赞一个！

这个代码语言阿里发产品同样适用吗

cn1516835777fbgm：自己学着操作了一下，结果不错！赞一个！回到原帖

以后大家多多交流共同分享哈

cn1515564006szec：这个代码语言阿里发产品同样适用吗回到原帖

适合阿里，所以才分享给大家的，可以试试

虽然看不太懂，但是看起来好厉害的样子

國産〇〇柒

零基础玩儿代码之详情页图文分离

国産〇〇柒

注释：2016-11-29编辑添加，第二种图文分离方法：点击这里查看分享
很多入门的童鞋看到标题后也许不太理解是什么意思，这里我就从基础着手。图文分离其实就是把咱们平时用PS等制图软件制作的图片上的文字用代码的方法去实现，而不是直接把文字与图片做成一体的形式。也许有很多童鞋不理解为什么要这样做。其实原因很简单啦，你直接用制图软件生成的带文字的图片，但图片上面的文字是不能被阿里搜索系统检测出来的（并不是说没有这方面的技术），但是如果你把图片与文字分开来处理，用代码的方式去实现图片上的文字，达到的视觉效果是一样的，而且阿里搜索能够识别这些文字，对搜索排序是有益的(由于阿里详情描述有字数上限，所以我们实际制作的时候也必须要考虑实际情况，不要超过阿里上限范围)。
现在我就用“本地实例”来給大家讲解一下代码的使用方法。这里我就随便用一张图片来进行演示，大家制作的时候可以先把代码在“本地电脑”上做好，然后复制到阿里详情描述的html代码区域即可，接下来首先先看一下制作的成品，如图：

图片：完成品.jpg

为了给大家充分讲解图片文字代码控制效果，上图中所有文字都是使用代码浮动在图片上部的。无文字实际图片如下：

图片：kong.jpg

在制图软件中，大家只需要把图片做成上图这样既可，里面的文字可以全部用代码的形式去实现。当然，我这里是为了給大家演示，在实际操作过程中，有一些没必要用代码实现的文字可以直接用图片制作出来。比如：优惠券上面的文字、点击领取这类的跟关键词和产品无关的文字便没有必要用代码形式实现。但是在这里我会全部用代码形式来給大家实现。
制作步骤：
1，桌面创建一文件夹，起名为“文字浮动”，然后把用PS制作好的没有文字的图片复制到这个文件夹内（实际阿里操作的时候需要先把这个图片上传到阿里图片银行中，并取出图片连接地址以备后用）。
2，在“文字浮动”文件夹里点击鼠标右键，依次选择“新建”，然后点击新建里的“文本文档”。然后把文本文字名称修改成float，后缀名由.txt修改成.html。修改前后如图：

图片：修改前.jpg

（关于打开文件的“后缀名”，这块也是很简单的，文件夹上面有一排工具，大家选取查看，然后在下面就可以看到“文件扩展名”这个选项，把它前面的复选框打上“对号”即可）

图片：修改后.jpg

3，完成以上步骤后，在float.html这个文件上点击右键，然后选择“打开方式”在里面选择用“记事本”方式打开。然后把下面代码复制到打开的记事本中（关于代码的编辑工具有很多种，这里我们就不去介绍，也不用去下载，这里咱们就用最简单的“记事本”工具）。
代码：

&lt;div&gt;&lt;img src="#" style="float:left;width:0px;height:0px;"/&gt;&lt;/div&gt;
&lt;div&gt;
&lt;p style="float:left; margin-top:0px; margin-left:0px; font-size:0px;  font-family:'#' color:#ffffff"&gt;这里是需要浮动的文字&lt;/p&gt;
&lt;/div&gt;    
&lt;!-- 这里是代码注释，使用时无需复制，本代码中#号，除color后#号外，其余均是需要替换成相应值，所有0px均需要填写相应数值   --&gt;

以上代码含义：<div>我们可以忽略不去考虑，<p>标签我们也不要过分在意，我们只要注意:
<1>. <img/>里面的一些信息，img标签里面的 src=”#”这个表示链接图片，其中#号是需要我们换成我们需要使用的图片的地址，在阿里实际操作的时候，我们需要先把没有带文字的图片上传到后台图片空间里，然后复制出这个图片的实际地址，这个地址必须是以“http://”开头的，由于我们这里的演示是在本机进行，所以这个地址跟实际上传后的地址有区别，这一点大家需要注意。
<2>.然后需要注意的是width:0px 和 height:0px，这两个代码是控制图片显示的宽高。里面的0px是需要换成我们实际想让图片展示的宽高数据的。在这里，高度height是没有什么特殊要求的，宽度width这个建议不要超越750px，因为阿里产品页面的宽度是有限的超越这个宽度后会显示不全图片，这一点大家在PS里面制图的时候要考虑进去的。
<3>.接下来我们要注意的是margin-top和margin-left这两个值，他们两个是控制浮动文字的位置的，是非常非常的重要的参数，后面的数值是需要我们自行调整。
<4>.接下来是font-size:0px; font-family:'#'这两个一个是控制浮动文字的大小，后面需要填写字号，一个是控制浮动文字的字体类型，关于这个字体类型，我们必须使用阿里系统提供给我们的字体，不然的话是没办法实现效果的，实际阿里操作中全部为英文字体，没有中文，这里我使用的有中文字体。
<5>.最后一项是color:#ffffff 这是控制字体颜色的，字体颜色可以用英文来表示，比如red 、blue、black等，也可以用十六进制来表示，这里我们用十六进制来表示字体颜色。
4，上面的基础工作完成之后，接下来就是制作阶段了，我们用记事本打开刚从复制到float.html 里面的代码。如图：

图片：记事本代码01.jpg

打开之后我们需要做的第一件事就是先把img里面的图片地址链接添加进去，因为只有这样我们才可以依据这个图片来进行添加浮动文字。在阿里实际操作过程中，这里是需要先把没有文字的图片上传到阿里图片空间中，然后复制上传图片的地址，替换掉代码src 后面的#号。（引号千万不能丢失。实际操作中图片地址应该是以http://开头的），由于我这里是在本地电脑演示操作，所以直接把#号换成图片名称即可。代码即是src="无文字图片.jpg"。这时我们可以用浏览器打开float.html来预览一下，效果如图：（切忌。记事本“保存”后才可以预览出修改效果，每次增加修改都需要保存后才可预览效果）

图片：浏览器打开效果02.jpg

（在浏览器中打开之后预览效果如上图，由于需要添加图片，所以代码我进行了修改，图片的宽高修改成500px，字体的颜色修改成黑色，字体设置成了’微软雅黑’）
5，接下来我们开始进行浮动文字的制作，首先把<p>标签中默认的文字”这里是需要浮动的文字”修改成为咱们的第一个文字内容“2014带上梦和幸福前行”，接下来是修改margin-top和margin-left的值来控制这段文字在图片上的位置，代码修改如下：

&lt;p style="float:left;margin-top:95px;margin-left:-372px; font-size:15px; font-family:'微软雅黑';"&gt;2014带上梦和幸福前行&lt;/p&gt;

打开浏览器预览效果如下图：

图片：第一个文字效果03.jpg

（由上图可以看到，我们想要的文字效果及位置已经做好）

6，接下来依次在代码里添加我们需要定位的文字，其实就是添加<p>标签，并且添加里面所需的内容。浮动字体全部代码如下：（由于是阿里环境，这里咱们全部使用<p>来进行设置）

&lt;div&gt;
&lt;p style="float:left;margin-top:95px;margin-left:-372px; font-size:15px; font-family:'微软雅黑';"&gt;2014带上梦和幸福前行&lt;/p&gt;
&lt;p style="float:left;margin-top:95px;margin-left:-202px; color:#FFFFFF;font-family:'微软雅黑';"&gt;全场包邮&lt;/p&gt;
&lt;p style="float:left;margin-top:116px;margin-left:-390px;font-size:72px; font-family:'方正大标宋简体';"&gt;幸福前行&lt;/p&gt;
&lt;p style="float:left;margin-top:185px;margin-left:-378px;font-size:38px; font-family:Georgia, 'Times New Roman', Times, serif"&gt;HAPPY GO ON&lt;/p&gt;
&lt;p style="float:left;margin-top:230px;margin-left:-347px;font-size:10px; font-family:Georgia, 'Times New Roman', Times, serif"&gt;MAY THE SEASONS JOY FILL YOU &lt;/p&gt;
&lt;p style="float:left;margin-top:245px;margin-left:-316px;font-size:10px; font-family:Georgia, 'Times New Roman', Times, serif"&gt; ALL THE YEAR ROUND&lt;/p&gt;
&lt;p style="float:left;margin-top:294px;margin-left:-430px; font-size:26px; color:#FFFFFF; font-family:'黑体';"&gt;20元优惠券&lt;/p&gt;
&lt;p style="float:left;margin-top:322px;margin-left:-382px; font-size:12px; color:#FFFFFF; font-family:'黑体';"&gt;满370元减20元&lt;/p&gt;
&lt;p style="float:left;margin-top:298px;margin-left:-290px; font-size:12px;font-family:'微软雅黑';"&gt;点击&lt;/p&gt;
&lt;p style="float:left;margin-top:312px;margin-left:-290px; font-size:12px;font-family:'微软雅黑';"&gt;领取&lt;/p&gt;   
&lt;p style="float:left;margin-top:294px;margin-left:-240px; font-size:26px; color:#FFFFFF; font-family:'黑体';"&gt;50元优惠券&lt;/p&gt;
&lt;p style="float:left;margin-top:322px;margin-left:-190px; font-size:12px; color:#FFFFFF; font-family:'黑体';"&gt;满470元减50元&lt;/p&gt;
&lt;p style="float:left;margin-top:298px;margin-left:-96px; font-size:12px;font-family:'微软雅黑';"&gt;点击&lt;/p&gt;
&lt;p style="float:left;margin-top:312px;margin-left:-96px; font-size:12px;font-family:'微软雅黑';"&gt;领取&lt;/p&gt;    
&lt;p style="float:left;margin-top:343px;margin-left:-320px; font-size:14px; font-family:'微软雅黑';"&gt;活动时间：12月31日&lt;/p&gt;    
&lt;p style="float:left;margin-top:480px;margin-left:-235px; font-size:12px; font-family:'微软雅黑';"&gt;国産〇〇柒微&lt;/p&gt;
&lt;p style="float:left;margin-top:480px;margin-left:-112px; font-size:12px; font-family:'微软雅黑';"&gt;国産〇〇柒公众号&lt;/p&gt;
&lt;/div&gt;

上面是浮动文字所需要的全部代码，看上去很多很难的样子，其实大多是一样的代码，重复使用，所需要调整的就是定位代码，字体颜色，字体，字体大小，其余的基本都不需要修改的。最终效果如图：

图片：最终.jpg

7，本案例全部完整代码如下：

&lt;div&gt;&lt;img src="无文字图片.jpg"style="float:left;width:500px;height:500px;"/&gt;&lt;/div&gt;
&lt;div&gt;&lt;p style="float:left;margin-top:95px;margin-left:-372px; font-size:15px; font-family:'微软雅黑';"&gt;2014带上梦和幸福前行&lt;/p&gt;
&lt;p style="float:left;margin-top:95px;margin-left:-202px; color:#FFFFFF;font-family:'微软雅黑';"&gt;全场包邮&lt;/p&gt;
&lt;p style="float:left;margin-top:116px;margin-left:-390px;font-size:72px; font-family:'方正大标宋简体';"&gt;幸福前行&lt;/p&gt;
&lt;p style="float:left;margin-top:185px;margin-left:-378px;font-size:38px; font-family:Georgia, 'Times New Roman', Times, serif"&gt;HAPPY GO ON&lt;/p&gt;
&lt;p style="float:left;margin-top:230px;margin-left:-347px;font-size:10px; font-family:Georgia, 'Times New Roman', Times, serif"&gt;MAYTHE SEASONS JOY FILL YOU &lt;/p&gt;
&lt;p style="float:left;margin-top:245px;margin-left:-316px;font-size:10px; font-family:Georgia, 'Times New Roman', Times, serif"&gt;   ALL THE YEAR ROUND&lt;/p&gt;
&lt;p style="float:left;margin-top:294px;margin-left:-430px; font-size:26px; color:#FFFFFF; font-family:'黑体';"&gt;20元优惠券&lt;/p&gt;
&lt;p style="float:left;margin-top:322px;margin-left:-382px; font-size:12px; color:#FFFFFF; font-family:'黑体';"&gt;满370元减20元&lt;/p&gt;
&lt;p style="float:left;margin-top:298px;margin-left:-290px; font-size:12px;font-family:'微软雅黑';"&gt;点击&lt;/p&gt;
&lt;p style="float:left;margin-top:312px;margin-left:-290px; font-size:12px;font-family:'微软雅黑';"&gt;领取&lt;/p&gt;    
&lt;p style="float:left;margin-top:294px;margin-left:-240px; font-size:26px; color:#FFFFFF; font-family:'黑体';"&gt;50元优惠券&lt;/p&gt;
&lt;p style="float:left;margin-top:322px;margin-left:-190px; font-size:12px; color:#FFFFFF; font-family:'黑体';"&gt;满470元减50元&lt;/p&gt;
&lt;p style="float:left;margin-top:298px;margin-left:-96px; font-size:12px;font-family:'微软雅黑';"&gt;点击&lt;/p&gt;
&lt;p style="float:left;margin-top:312px;margin-left:-96px; font-size:12px;font-family:'微软雅黑';"&gt;领取&lt;/p&gt;   
&lt;p style="float:left;margin-top:343px;margin-left:-320px; font-size:14px; font-family:'微软雅黑';"&gt;活动时间：12月31日&lt;/p&gt;   
&lt;p style="float:left;margin-top:480px;margin-left:-235px; font-size:12px; font-family:'微软雅黑';"&gt;国産〇〇柒微&lt;/p&gt;
&lt;p style="float:left;margin-top:480px;margin-left:-112px; font-size:12px; font-family:'微软雅黑';"&gt;国産〇〇柒公众号&lt;/p&gt;
&lt;/div&gt;

总结：阿里详情页实际制作的时候可以先在自己电脑上用我演示的方法把代码制作完成，然后复制到阿里产品详情页html中即可。需要记住的重点是切忌图片连接地址一定要换成阿里图片银行里面的连接地址，其余的本地代码基本不需要修改，添加到阿里后台后如有错位可以进行位置的微调。大家制作过程中如遇到问题可联系“国産〇〇柒”，大家共同学习进步。

长安

这个代码语言阿里发产品同样适用吗

⊙⊙⊙⊙⊙⊙⊙⊙⊙

睿智

多谢分享

國産〇〇柒

cn1512156746：这个代码语言阿里发产品同样适用吗回到原帖

适用于阿里，这里之所以发帖就是因为可以在阿里中使用，代码可以在自己电脑里做好之后复制到阿里上

國産〇〇柒

cn1512156746：这个代码语言阿里发产品同样适用吗回到原帖

@cn1511425066：你可以把之前图片上介绍产品及与关键词有关的这些文字分离出来，与关键词与产品无关的文字可以不用分离

國産〇〇柒

cn1000743222：多谢分享回到原帖

共同学习

名人堂de小二

亲，给你个好评哦！

winbotech

赞一个！

小苹果

不错，来学习了

cn1512429133

感谢精彩分享！

cn1111926082kyzy

看过楼主的很多文章，赞一个

贸小七-王

亲，给你个好评哦！

Q736399980

不错

國産〇〇柒

cn1111926082kyzy：看过楼主的很多文章，赞一个回到原帖

大家一起分享共同进步哈

cn1516835777fbgm

自己学着操作了一下，结果不错！赞一个！

一米月光

这个代码语言阿里发产品同样适用吗

國産〇〇柒

cn1516835777fbgm：自己学着操作了一下，结果不错！赞一个！回到原帖

以后大家多多交流共同分享哈

國産〇〇柒

cn1515564006szec：这个代码语言阿里发产品同样适用吗回到原帖

适合阿里，所以才分享给大家的，可以试试

hosechina

虽然看不太懂，但是看起来好厉害的样子

铜币：	+1 +5 +10 +20 +50 +100	剩余
	* 评分才能提交噢
理由：