微信公众号图文编辑-怎么制作礼品丝带效果页面
1、代码准备：写好做测试的代码，在DW中打开，原始案例以以黑色字体，蓝色（rgb(95, 156, 239)）边框/丝带为例。现在，拷贝下一个步骤的代码到你的软件，呈现本步骤图片效果。
2、上半部分代码：<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><section class="ng-scope" style=""> <section tn-page-editable-type="border-color" ng-style="{'border-color' : (eo.borderColor ||theme.borderColor),} " class="tn-page-border-color ng-scope" style="max-width: 100%; word-wrap: break-word !important; box-sizing: border-box !important; height: 0px; margin: 0px 1em; border-top-width: 1.5em; border-top-style: solid; border-bottom-width: 1.5em; border-bottom-style: solid; border-top-color: rgb(255, 156, 239); border-bottom-color: rgb(95, 156, 239); border-left-width: 1.5em !important; border-left-style: solid !important; border-left-color: transparent !important; border-right-width: 1.5em !important; border-right-style: solid !important; border-right-color: transparent !important;"> <br/></section><section style="max-width: 100%; word-wrap: break-word !important; box-sizing: border-box !important; height: 0px; margin: -2.75em 1.65em; border-width: 1.3em; border-style: solid; border-color: rgb(255, 255, 255) transparent;"></section
3、下半部分代码：<section tn-page-editable-type="border-color" ng-style="{'border-color' : (eo.borderColor ||theme.borderColor),} " class="tn-page-border-color ng-scope" style="max-width: 100%; word-wrap: break-word !important; box-sizing: border-box !important; height: 0px; margin: 0.45em 2.1em; vertical-align: middle; border-top-width: 1.1em; border-top-style: solid; border-bottom-width: 1.1em; border-bottom-style: solid; border-top-color: rgb(95, 156, 239); border-bottom-color: rgb(95, 156, 239); border-left-width: 1.1em !important; border-left-style: solid !important; border-left-color: transparent !important; border-right-width: 1.1em !important; border-right-style: solid !important; border-right-color: transparent !important;"> <section ng-style=" { 'font-size' : eo.fontSize,'font-family' : eo.fontFamily, 'font-style' : eo.fontStyle,'color' : (eo.color || theme.majorColor),} " class="tn-page-ed-type-text ng-scope ng-valid tn-page-editable ng-dirty" style="max-width: 100%; word-wrap: break-word !important; box-sizing: border-box !important; max-height: 1em; padding: 0px; margin-top: -0.5em; color: rgb(255, 255, 255); font-size: 1.2em; line-height: 1em; overflow: hidden; font-family: inherit;"> <span style="font-size: 16px;"><strong style="max-width: 100%; word-wrap: break-word; box-sizing: border-box;text-align: center;">微信公众号图文编辑-怎么制作礼品丝带效果页面</strong></span> </section>
4、将代码运行在浏览器上的效果预览，如下图。
5、在浏览器预览下，直接拷贝效果到微信公众平台的图文编辑框内查看效果，如下图。
6、上个步骤已经显示测试成功了，我们可以尝试修改代码实现显示效果的不同：修改字体颜色，可以再微信图文编辑框内直接修改；修改边框颜色可以修改代码中的“border-top-color: rgb(95, 156, 239); border-bottom-color: rgb(95, 156, 239)”实现。
7、以下为修改为红色丝带样式的效果呈现：将“border-top-color: rgb(95, 156, 239)”修改为“border-top-color: rgb(255, 0, 20)”。
