关注电商
我们一直在努力

好玩:微信排版高级样式之隐藏文字图片代码

导读:前段时间在杜蕾斯微信公众号文章里看到一个好玩的微信样式,今天跟大家分享这样样式,教大家怎么把这个样式用到自己微信公众文章里,这个样式可以增加用户体验,让用户觉得好玩,能跟用户互动才能更好的留住用户,希望大家有什么好玩的微信样式和微信运营方法都可以和我分享交流,留言到我们微信公众号:ddianshang ,废话不多说进入主题。

dwdwd521515

 一、样式效果

首页让大家看看样式效果,样式可以隐藏文字和图片,用户点击后即可展现隐藏的文字和图片,如下:文字来源杜蕾斯

“你今天穿的真好看!”

 

点这里查看潜台词



你什么时候和我啪啪啪?

 

 

 

 二、样式代码

下面这个就是样式的代码,可以用鼠标框选

    <p>
 <br/>
</p>
<p style="white-space: normal; text-align: center;">
 <span style="color:#595959"><span style="font-size: 18px;">“你今天穿的真好看!”</span></span>
</p>
<p>
 <br/>
</p>
<details style="white-space: normal;">
 <summary style="margin: 0px; padding: 0px; text-align: center; max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;">
 <strong style="color: rgb(217, 150, 148); font-size: 14px;">点这里查看潜台词 </strong>
 </summary>
 <summary style="margin: 0px; padding: 0px; text-align: center; max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;">
 <strong style="color: rgb(217, 150, 148); font-size: 14px;"><br/></strong>
 </summary>
 <summary style="margin: 0px; padding: 0px; text-align: center; max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;">
 <strong style="color: rgb(217, 150, 148); font-size: 14px;"> </strong>
 </summary>
 <summary style="margin: 0px; padding: 0px; text-align: center; max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;">
 <strong style="color: rgb(217, 150, 148); font-size: 14px;"><br/></strong>
 </summary>
 <summary style="margin: 0px; padding: 0px; text-align: center; max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;">
 <strong style="color: rgb(217, 150, 148); font-size: 14px;">你什么时候和我啪啪啪?</strong>
 </summary>
</details>
<p>
 <br/>
</p>
<p style="margin-top: 0px; margin-bottom: 0px; padding: 0px; white-space: normal;">
 <br/>
</p>
<p style="text-align: center;">
 <span style="font-size: 18px; color: rgb(89, 89, 89);">“你一点也不胖!”</span>
</p>
<p>
 <br/>
</p>
<details style="white-space: normal;">
 <summary style="margin: 0px; padding: 0px; text-align: center; max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;">
 <strong style="color: rgb(217, 150, 148); font-size: 14px;">点这里查看潜台词 &nbsp;</strong>
 </summary>
 <summary style="margin: 0px; padding: 0px; text-align: center; max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;">
 <strong style="color: rgb(217, 150, 148); font-size: 14px;"><br/></strong>
 </summary>
 <summary style="margin: 0px; padding: 0px; text-align: center; max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;">
 <strong style="color: rgb(217, 150, 148); font-size: 14px;"><br/></strong>
 </summary>
 <summary style="margin: 0px; padding: 0px; text-align: center; max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;">
 <strong style="color: rgb(217, 150, 148); font-size: 14px;"><br/></strong>
 </summary>
 <summary style="margin: 0px; padding: 0px; text-align: center; max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;">
 <strong style="color: rgb(217, 150, 148); font-size: 14px;"> 你啥时候和我啪啪啪呀?</strong>
 </summary>
</details>
<p>
 <br/>
</p>
<p style="margin-top: 0px; margin-bottom: 0px; padding: 0px; white-space: normal;">
 <br/>
</p>
<p style="text-align: center;">
 <span style="color: rgb(89, 89, 89); font-size: 18px;">“你长得真漂亮!”<br/></span>
</p>
<p>
 <br/>
</p>
<details style="white-space: normal;">
 <summary style="margin: 0px; padding: 0px; text-align: center; max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;">
 <strong style="color: rgb(217, 150, 148); font-size: 14px;">点这里查看潜台词 </strong>
 </summary>
 <summary style="margin: 0px; padding: 0px; text-align: center; max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;">
 <strong style="color: rgb(217, 150, 148); font-size: 14px;"><br/></strong>
 </summary>
 <summary style="margin: 0px; padding: 0px; text-align: center; max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;">
 <strong style="color: rgb(217, 150, 148); font-size: 14px;"><br/></strong>
 </summary>
 <summary style="margin: 0px; padding: 0px; text-align: center; max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;">
 <strong style="color: rgb(217, 150, 148); font-size: 14px;"> 今晚去我家吧</strong>
 </summary>
</details>

 

三、操作步骤

1.准备好自己的微信公众号和文章

2.打开大电商微信编辑器:http://wx.ddianshang.com/

3.鼠标框选上面黑色区域代码,一直框选到黑色区域最底部,鼠标点击右键复制到大电商微信编辑器

0515215208

4.进入到大电商微信编辑器,点击编辑器第一个功能键《源代码》(图1),在把复制的代码粘贴到编辑器里面(图2),然后再点击《源代码》就可以看到隐藏的样式了(图3)

dsfbinji5.然后你就可以在编辑器里面改成你想要的文字内容
sdsddd

6.编辑好后点击编辑器右侧的《复制》按钮(一定要用这个),就可以吧编辑好的内容复制到微信公众平台里面了。

快点动手试试吧!

注意事项

1.鼠标框选代码时一定要框选完整

2.粘贴到编辑器修改时,一定要按照样式的排列方式修改自己的文字,否则容易失效

3.复制的时候一定要用编辑器的复制按钮进行复制粘贴

 

欢迎分享本文,转载保留出处:大电商 » 好玩:微信排版高级样式之隐藏文字图片代码
分享到: 更多 (0)

留言 抢沙发

评论前必须登录!