作为一个即将秃头的程序员,这么实用的功能这么能不去研究一下呢?
进入正题 ???
1.打开微信公众号,新建图文。
①右键 → 检查
②鼠标点击右边的代码区域,按Crtl+F,随便输入点图文内容,能够找到代码位置就行。
2.插入代码。
①随便找个标签,右键点击Edit as HTML
②在编辑框中加入如下代码......
<section style="height: 230px;overflow-x: hidden;overflow-y: auto;text-align: center;box-sizing: border-box;padding: 10px;border-width: 1px;border-style: solid;border-color: rgb(238, 238, 238);"> <mpchecktext contenteditable="false" id="1603559997900_0.2463386146901354">mpchecktext> <section style="border-width: 0px;border-style: none;border-color: initial;box-sizing: border-box;"> <mpchecktext contenteditable="false" id="1603559997901_0.7806160681602305">mpchecktext> <p style="text-align:center;margin-bottom: 10px;white-space: normal;"> <strong style="font-size: 14px;caret-color: red;"> <span style="font-size: 14px;"> <span style="line-height: 22.4px;"> <p>答案p> <img border="0" src="https://picsum.photos/100/50"> <mpchecktext contenteditable="false" id="1603559997902_0.2770796707640486">mpchecktext> span> span> strong> p> <strong style="font-size: 14px;caret-color: red;"> <mpchecktext contenteditable="false" id="1603559997903_0.5044436455277546">mpchecktext> strong> section><strong style="font-size: 14px;caret-color: red;">strong>section><center style="box-sizing: border-box;text-align: center;"> <strong style="font-size: 14px;caret-color: red;"> <svg width="100%" height="250" xmlns="http://www.w3.org/2000/svg" style="margin-top: -350px;box-sizing: border-box;transform: rotateZ(0deg);-webkit-transform: rotateZ(0deg);-moz-transform: rotateZ(0deg);-o-transform: rotateZ(0deg);"> <rect width="100%" height="250" style="fill: #fefefe;box-sizing: border-box;"> <animate attributeName="opacity" begin="click" dur="1s" style="box-sizing: border-box;" from="1" to="0" fill="freeze">animate> rect> <mpchecktext contenteditable="false" id="1603559997904_0.23689150596511355">mpchecktext> svg> strong>center>
emmmm.....代码有点小长,里面怎么设置有说明~
3.关于图片
想要使用图片必须使用已经上传到素材库的图片。
获取方式:去素材库中找到需要的图片,右键检查,找到对应的url复制下来,再粘贴到上述代码中的就行了~
4.实现效果
点击空白处查看答案
▽
CSDN有更详细的介绍~点击原文跳转