书写代码步骤：

1. 拿到UI设计师设计的文件，文件一般包括：ps源文件/ai源文件、切图文件、封面图
   
2. 根据设计图书写代码（模板可按照内容一部分一部分写）
   
3. 写完一部分后，把html代码放到编辑器中，查看是否错位，是否和设计图类似
   注：放到编辑器内，需要把最外层的宽度和边框给去掉
   
4. 代码格式:
   • 每个单独的样式/模板的单独的部分格式
     • 
     • 每个单独的样式/模板的单独的部分最外层 添加class="xmyeditor";class='xmyeditor' 在编辑器网站是样式最外层虚线框
     • 根据样式内容添加对应的标识，参考规则
     • 每个单独的样式最外层不写任何style样式
     • 每个单独的样式/模板的单独的部分不要超出最外层虚线框class='xmyeditor'
     • 写每个样式时，可以先确定内部元素的布局，先写结构再调整细节
     • 
   • 模板有全局背景色/背景图，在背景层添加id="xmyBackground"
   • 
   • 文字固定格式：
     • 
     • class='wxqq-Color' 在编辑器可以改变文字颜色
     • class='xmybrush' 在编辑器可以秒刷文字，效果演示
     • p标签一般只写字号、加粗、斜体，其他样式都写在外层
   • 图片代码格式：-插图
     • 
     • class='xmybrush' 在编辑器可以秒刷图片，效果演示，第二部分
     • 大图一般不加固定宽度，使用margin/padding/width:80%;等确定位置
     • 样式一般写在img标签的外层，img标签一般只写width:100%继承外层宽度，或者border-radius:10px;
   • 图片代码格式：-小图/配图
     • 
     • img添加class='small_image'样式
     • 有小图的样式，最外层添加 data-type='lspecial04'
     • 编辑器、微信公众号 section高度默认25px, 图片高度可能小于25px 添加line-height:2px; 取消高度自动补充到25px
   • 编辑器通过【块背景】更换背景图代码格式：
     • 
     • 
     • 添加class='xmy-baimg' data-bastyle=""，其中data-bastyle的值与style中的内容完全一致
     • 一个虚线框class="xmyeditor"内部，通过【块背景】只能更换一层背景图
   • 更多格式参考请查看文件：固定格式
5. 如果一个样式的内部某一部分可以让用户单独使用/操作，在样式内部给这一部分包虚线框：
   • 
   • 
   • <section class="xmyeditor" data-type="lspecial01" data-id="58969" style="display: inline-block; vertical-align: middle;" powered-by='xmyeditor.com'></section>
   • 
   • 
   • <section class="xmyeditor buchai" data-id="106353" powered-by="xmyeditor.com"></section>
6. 编辑器文字/边框/背景色 颜色修改:演示效果
   • 
   • 添加一下class在写颜色的section
   • class="wxqq-Color" 文字
   • class='xmy-bacolor wxqq-bg' 背景
   • class="wxqq-borderTopColor"上边框
   • class="wxqq-borderRightColor"右边框
   • class="wxqq-borderBottomColor"下边框
   • class="wxqq-borderLeftColor"左边框
7. 标识 data-type:
   • data-type='lspecial01',表示这一块在样式内部可以重复加1
   • 
   • 编辑器样式工具条上有【+1】，点击可以增加一个虚线框包着的部分
   • data-type='lspecial02'，表示样式内容使用了边框
   • 
   • 编辑器样式工具条上有【边】，点击可以修改边框粗细、颜色
   • data-type='lspecial03'，表示样式通过svg弹窗修改内容/图片
   • 
   • 
   • 编辑器样式工具条上有【svg】，点击可以换图/修改
   • data-type='lspecial04'，表示样式内部有小图
   • data-type='lspecial06'，表示样式内部有编号，需要自动排序
   • 
   • 
   • 编辑器样式工具条上有【0-9】，点击可以数字自动排序
   • 代码中添加class="autosort"
   • <section class='xmyeditor' data-type='lspecial06' powered-by='xmyeditor.com'> <section class='wxqq-Color' style='color: #000;letter-spacing: 1px;line-height: 24px;text-align:justify;' powered-by='xmyeditor.com'> <p class='autosort' style='padding: 0px;margin: 0px;font-size: 14px;'>01</p> </section> </section> <section class='xmyeditor' data-type='lspecial06' powered-by='xmyeditor.com'> <section class='wxqq-Color' style='color: #000;letter-spacing: 1px;line-height: 24px;text-align:justify;' powered-by='xmyeditor.com'> <p style='padding: 0px;margin: 0px;font-size: 14px;'>PART.<span class='autosort'>01</span></p> </section> </section>
   • data-type='lspecial07'，表示这一块在样式内部可以重复加1个、删除1个
   • 
   • 编辑器样式工具条上有【+1】【1】，点击新增一个/删除一个
   • 一般使用在滑动样式
8. 代码完成后复制到速排小蚂蚁编辑器网站测试，并检查代码格式，具体查看检查步骤
9. 在速排小蚂蚁编辑器网站测试没问题，复制或同步到微信公众号文章，将文章链接发送给UI设计师检查样式
10. 拆分单素材：样式没问题后，若是模板需要将模板中可单独使用的部分拆分出来
    这里是设计图

    （图片因导出压缩颜色会与右侧有偏差,实际颜色从ps源文件/ai源文件获取）

    

    
    

    这里是代码效果

    
    

    

    

    

    

    开

    学

    通

    知

    

    SCHOOL’S STARTING

    选中文字，点击样式工具条【+1】可+1

    
    

    

    春季开学通知

    不知不觉,寒假已经接近尾声

    小蚂蚁小学将于2022年2月14日

    正式开学啦!相信大家对

    新的学期也充满了期待

    欢迎孩子们即将回到温馨的校园

    

    
    

    

    开

    学

    通

    知

    

    选中文字，点击样式工具条【+1】可+1

    
    

    

    不知不觉,寒假已经接近尾声。小蚂蚁小学将于2022年2月14日正式开学啦1相信大家对新的学期也充满了期待,欢迎孩子们即将回到温馨的校园，继续和老师一起快乐地学习和生活!

    

    
    

    

    

    

    我们开学啦

    

    

    

    
    

    不知不觉,寒假已经接近尾声。小蚂蚁小学将于2022年2月14日正式开学啦1相信大家对新的学期也充满了期待,欢迎孩子们即将回到温馨的校园，继续和老师一起快乐地学习和生活!

    

    
    

    

    

    开

    学

    规

    定

    

    选中文字，点击样式工具条【+1】可+1

    
    

    

    

    

    

    
    

    

    新学期开学后，义务教育学校要严格执行均衡编班的法律规定，不得以任何名义设置重点班。切实做到均衡配置师资。严格执行考试管理规定，不得违规组织考试，考试结果不排名、不公布并以适当方式告知家长和学生，不得按考试结果给学生调整分班、排座位、“贴标签”

    

    
    

    

    开

    学

    须

    知

    

    选中文字，点击样式工具条【+1】可+1

    
    

    

    

    学习用品准备

    提前准备好笔、作业本等学习用品，这些都是学习必备的，可一次性准备多点，做好充分的准备迎接新学期。

    

    
    

    

    

    

    

    
    

    

    调整生活规律

    提前调整生活作息，调好闹钟早睡早起，为新学期的学习生活养好精神，避免影响上学状态。同时减少玩乐时间，复习旧知识，预习新知识，提前进入学习状态，更好地开展新学期。

    

    ......
    拆分单素材四周不要留空隙，拆分单素材具体代码参考
11. 拆分简版：简版是为了编辑器网站-全文模板-智能排版的功能
    • 
    • 简版格式：
    • 
    • 简版格式具体代码参考
    • 简版演示效果代码参考
12. 给单素材/模板打标签（用于搜索），具体查看标签规则
13. 上面步骤完成后就可以将单素材/模板从小蚂蚁后台网站上传，具体查看上传步骤
14. 上传完成后，在编辑器网址测试样式模板使用是否正常，具体查看检查步骤