设为首页收藏本站王洪林官方网站旧版9TOM数据9TOM淘宝商城广安商城批发网
开启辅助访问

王洪林个人官网

 找回密码
 立即注册

QQ登录

只需一步，快速开始

捐赠和赞助
搜索
王洪林个人官网»社区 › 人在旅途 › 授艺学习 › [PintuerCSS前端开发学习]代码应用开发学习记录
1234
返回列表 发新帖
楼主: admin
打印 上一主题 下一主题

[PintuerCSS前端开发学习]代码应用开发学习记录

  [复制链接]
admin

升级   100%

31#
 楼主| 发表于 2023-7-7 08:48:05 | 只看该作者 来自 浙江
在贴子内可直接引用的样式和代码：
分
割
线
  1. <section style="margin: 10px auto; display: flex; justify-content: center;">
  2. <section style="width: 50%; display: flex; align-items: center; box-sizing: border-box; max-width: 50% !important;" data-width="50%">
  3. <section style="width: 100%; border-top: 1px solid #f0806e; max-width: 100% !important; box-sizing: border-box;" data-width="100%"></section>
  4. </section>
  6. <section style="display: flex; justify-content: center; align-items: center; padding: 0 7px; box-sizing: border-box;">
  7. <section class="assistant" style="width: 15px; margin: 0 5px; box-sizing: border-box;">分</section>
  8. <section class="assistant" style="width: 20px; margin: 0 5px; box-sizing: border-box;">割</section>
  9. <section class="assistant" style="width: 15px; margin: 0 5px; box-sizing: border-box;">线</section>
  10. </section>
  12. <section style="width: 50%; display: flex; align-items: center; box-sizing: border-box; max-width: 50% !important;" data-width="50%">
  13. <section style="width: 100%; border-top: 1px solid #f0806e; max-width: 100% !important; box-sizing: border-box;" data-width="100%"></section>
  14. </section>
  15. </section>
复制代码
回复 支持 反对

使用道具 举报

admin

升级   100%

32#
 楼主| 发表于 2023-7-7 09:01:24 | 只看该作者 来自 浙江
可直接在帖子中引用的样式和代码：
  1. <section style="margin: 10px auto; display: flex; align-items: center;">
  2. <section style="width: 50%;box-sizing:border-box;max-width: 50% !important;" data-width="50%">
  3. <section style="max-width: 100% !important;width: 100%;height: 3px;border-top: 1px solid #296cd4;border-bottom: 1px solid #ffc149;box-sizing:border-box;" data-width="100%"></section>
  4. </section>
  5. <section style="flex-shrink: 0;padding: 0 5px;box-sizing:border-box;">
  6. <section class="assistant" style="width: 25px;box-sizing:border-box;">
  7. <img class="assistant" style="vertical-align:inherit;width: 100%; display: block;box-sizing:border-box;max-width: 100% !important;" src="/upimages/ab42.gif" data-width="100%" draggable="false" data-ratio="1.1626984126984128" data-w="252"/>
  8. </section>
  9. </section>
  10. <section style="width: 50%;box-sizing:border-box;max-width: 50% !important;" data-width="50%">
  11. <section style="max-width: 100% !important;width: 100%;height: 3px;border-top: 1px solid #296cd4;border-bottom: 1px solid #ffc149;box-sizing:border-box;" data-width="100%"></section>
  12. </section>
  13. </section>
复制代码
分割线样式2：
  1. <section style="margin: 20px auto;">
  2. <section style="width: 100%;box-sizing:border-box;max-width: 100% !important;" data-width="100%">
  3. <svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="0 0 560 30" style="enable-background:new 0 0 560 30;display:inline-block" xml:space="default">
  4. <g>
  5. <polygon style="fill:#b69a82;" points="0,29.3 0.7,30 29,0.7 28.3,0 "></polygon>
  6. <polygon style="fill:#b69a82;" points="14.4,29.3 15.1,30 43.3,0.7 42.6,0 "></polygon>
  7. <polygon style="fill:#b69a82;" points="28.7,29.3 29.4,30 57.7,0.7 57,0 "></polygon>
  8. <polygon style="fill:#b69a82;" points="43.1,29.3 43.8,30 72,0.7 71.3,0 "></polygon>
  9. <polygon style="fill:#b69a82;" points="57.4,29.3 58.1,30 86.4,0.7 85.7,0 "></polygon>
  10. <polygon style="fill:#b69a82;" points="71.8,29.3 72.5,30 100.7,0.7 100,0 "></polygon>
  11. <polygon style="fill:#b69a82;" points="86.1,29.3 86.8,30 115.1,0.7 114.4,0 "></polygon>
  12. <polygon style="fill:#b69a82;" points="100.5,29.3 101.2,30 129.5,0.7 128.7,0 "></polygon>
  13. <polygon style="fill:#b69a82;" points="114.8,29.3 115.5,30 143.8,0.7 143.1,0 "></polygon>
  14. <polygon style="fill:#b69a82;" points="129.2,29.3 129.9,30 158.2,0.7 157.4,0 "></polygon>
  15. <polygon style="fill:#b69a82;" points="143.5,29.3 144.2,30 172.5,0.7 171.8,0 "></polygon>
  16. <polygon style="fill:#b69a82;" points="157.9,29.3 158.6,30 186.9,0.7 186.2,0 "></polygon>
  17. <polygon style="fill:#b69a82;" points="172.2,29.3 172.9,30 201.2,0.7 200.5,0 "></polygon>
  18. <polygon style="fill:#b69a82;" points="186.6,29.3 187.3,30 215.6,0.7 214.9,0 "></polygon>
  19. <polygon style="fill:#b69a82;" points="200.9,29.3 201.6,30 229.9,0.7 229.2,0 "></polygon>
  20. <polygon style="fill:#b69a82;" points="215.3,29.3 216,30 244.3,0.7 243.6,0 "></polygon>
  21. <polygon style="fill:#b69a82;" points="229.6,29.3 230.3,30 258.6,0.7 257.9,0 "></polygon>
  22. <polygon style="fill:#b69a82;" points="244,29.3 244.7,30 273,0.7 272.3,0 "></polygon>
  23. <polygon style="fill:#b69a82;" points="258.3,29.3 259,30 287.3,0.7 286.6,0 "></polygon>
  24. <polygon style="fill:#b69a82;" points="272.7,29.3 273.4,30 301.7,0.7 301,0 "></polygon>
  25. <polygon style="fill:#b69a82;" points="287,29.3 287.7,30 316,0.7 315.3,0 "></polygon>
  26. <polygon style="fill:#b69a82;" points="301.4,29.3 302.1,30 330.4,0.7 329.7,0 "></polygon>
  27. <polygon style="fill:#b69a82;" points="315.7,29.3 316.4,30 344.7,0.7 344,0 "></polygon>
  28. <polygon style="fill:#b69a82;" points="330.1,29.3 330.8,30 359.1,0.7 358.4,0 "></polygon>
  29. <polygon style="fill:#b69a82;" points="344.4,29.3 345.1,30 373.4,0.7 372.7,0 "></polygon>
  30. <polygon style="fill:#b69a82;" points="358.8,29.3 359.5,30 387.8,0.7 387.1,0 "></polygon>
  31. <polygon style="fill:#b69a82;" points="373.1,29.3 373.8,30 402.1,0.7 401.4,0 "></polygon>
  32. <polygon style="fill:#b69a82;" points="387.5,29.3 388.2,30 416.5,0.7 415.8,0 "></polygon>
  33. <polygon style="fill:#b69a82;" points="401.8,29.3 402.6,30 430.8,0.7 430.1,0 "></polygon>
  34. <polygon style="fill:#b69a82;" points="416.2,29.3 416.9,30 445.2,0.7 444.5,0 "></polygon>
  35. <polygon style="fill:#b69a82;" points="430.5,29.3 431.3,30 459.5,0.7 458.8,0 "></polygon>
  36. <polygon style="fill:#b69a82;" points="444.9,29.3 445.6,30 473.9,0.7 473.2,0 "></polygon>
  37. <polygon style="fill:#b69a82;" points="459.3,29.3 460,30 488.2,0.7 487.5,0 "></polygon>
  38. <polygon style="fill:#b69a82;" points="473.6,29.3 474.3,30 502.6,0.7 501.9,0 "></polygon>
  39. <polygon style="fill:#b69a82;" points="488,29.3 488.7,30 516.9,0.7 516.2,0 "></polygon>
  40. <polygon style="fill:#b69a82;" points="502.3,29.3 503,30 531.3,0.7 530.6,0 "></polygon>
  41. <polygon style="fill:#b69a82;" points="516.7,29.3 517.4,30 545.6,0.7 544.9,0 "></polygon>
  42. <polygon style="fill:#b69a82;" points="531,29.3 531.7,30 560,0.7 559.3,0 "></polygon>
  43. </g>
  44. </svg>
  45. </section>
  46. </section>
复制代码
分割线样式3：
  1. <section style="text-align: center; margin: 10px auto;">
  2. <section style="display: flex;align-items: center;">
  3. <section class="assistant" style="width: 100%;height: 1px;border-top: 1px dashed #ffbec2; flex: 1;box-sizing:border-box;max-width: 100% !important;" data-width="100%"></section>
  4. <section class="assistant" style="width: 30px;margin: 0 5px;box-sizing:border-box;">
  5. <img class="assistant" style="vertical-align:inherit;width: 100%; display: block;box-sizing:border-box;max-width: 100% !important;" src="/upimages/WdpZg.gif" data-width="100%" draggable="false" data-ratio="0.9973544973544973" data-w="378"/>
  6. </section>
  7. <section class="assistant" style="width: 100%;height: 1px;border-top: 1px dashed #ffbec2; flex: 1;box-sizing:border-box;max-width: 100% !important;" data-width="100%"></section>
  8. </section>
  9. </section>
复制代码
备注说明：
中间图标可换为：
http://gamart.net/upimages/WdpZg.gif ；http://gamart.net/upimages/a4069.png； http://gamart.net/upimages/9569.png； http://gamart.net/upimages/a4069.png;http://gamart.net/upimages/10cd.png; http://gamart.net/upimages/d82f8.gif ; http://gamart.net/upimages/a2ddf.gif 等等图标，也可从外部引入小图片文件。
分割样式4：
NO.1
  1. <section style="margin: 10px auto; transform-style: preserve-3d; padding: 0px 0px 13px; box-sizing: border-box;">
  2. <section style="display: flex; justify-content: center; transform: translateZ(10px); -webkit-transform: translateZ(10px); -moz-transform: translateZ(10px); -o-transform: translateZ(10px);">
  3. <section style="background-color: #5c92ec; display: flex;">
  4. <section style="flex-shrink: 0;">
  5. <section style="width: 0; height: 1px; border-top: 10px solid #ffffff; border-right: 10px solid transparent; box-sizing: border-box;"></section>
  6. <section style="width: 0; height: 1px; border-bottom: 10px solid #f4d79d; border-left: 10px solid transparent; margin: -10px 0 0; box-sizing: border-box;"></section>
  7. </section>
  8. <section style="font-size: 16px; color: #ffffff; text-align: center; padding: 4px 5px; box-sizing: border-box;">
  9. <strong>NO.</strong><strong class="autonum" data-original-title="" title="">1</strong>
  10. </section>
  11. </section>
  12. </section>
  13. <section style="max-width: 100% !important; width: 100%; border-top: 1px solid #5c92ec; margin: -15px 0 0; box-sizing: border-box; transform: translateZ(5px); -webkit-transform: translateZ(5px); -moz-transform: translateZ(5px); -o-transform: translateZ(5px);" data-width="100%"></section>
  14. </section>
复制代码
分割样式5：
  1. <section style="margin: 10px auto;text-align: center;">
  2. <section style="display: flex;justify-content: center;align-items: center;">
  3. <section class="assistant" style="height: 1px;background: #697af1;flex: 1;"></section>
  4. <section style="font-size: 14px;letter-spacing: 1.5px;padding: 0px 4px;color: #697af1;padding: 0px 7px;box-sizing:border-box;"></section>
  5. <section class="assistant" style="height: 1px;background: #697af1;flex: 1;"></section>
  6. </section>
  7. <section style="margin-top: -5px;">
  8. <section style="width: 10px; height: 10px; border-right: 1px solid #697af1; border-bottom: 1px solid #697af1; margin: 0px auto;box-sizing:border-box;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-o-transform: rotate(45deg);"></section>
  9. </section>
  10. <section style="width: 100%;height: 12px;background: #f4f6fe;margin-top: -11px;box-sizing:border-box;max-width: 100% !important;" data-width="100%"></section>
  11. </section>
复制代码
回复 支持 反对

使用道具 举报

admin

升级   100%

33#
 楼主| 发表于 2023-7-7 17:08:14 | 只看该作者 来自 浙江
帖子内可直接引用的样式和代码：
会议 · 热点解读
  1. <section style="margin: 10px auto;">
  2. <section style="background: linear-gradient(to right,#b0100f,#df0e0d);">
  3. <section style="background: url(/upimages/fa8.png) no-repeat right center;background-size:23% ;">
  4. <section style="color: #fff;font-size: 16px;padding: 15px 20px;text-align: left;box-sizing:border-box;">
  5. <strong class="135brush" data-brushtype="text">会议 · 热点解读</strong>
  6. </section>
  7. </section>
  8. </section>
  9. </section>
复制代码
标题样式2：
亲爱的少先队员
  1. <section style="text-align: center;margin: 10px auto;">
  2. <section style="display: flex;justify-content: flex-start;align-items: flex-start;">
  3. <section style="width: 32px;height: 32px;background-color: #fff7f5;border-radius: 50%;flex-shrink: 0;box-sizing:border-box;">
  4. <section style="display: flex;justify-content: flex-start;align-items: flex-end;margin: 3px 0 0 10px;transform: skew(-30deg);-webkit-transform: skew(-30deg);-moz-transform: skew(-30deg);-o-transform: skew(-30deg);">
  5. <section class="assistant" style="width: 4px;height: 15px;background-color: #f24a5b;box-sizing:border-box;"></section>
  6. <section class="assistant" style="width: 4px;height: 10px;background-color: #6474ce;margin-left: 3px;box-sizing:border-box;"></section>
  7. </section>
  8. </section>
  9. <section class="135brush" data-brushtype="text" style="font-size: 16px;letter-spacing: 1.5px;color: #f24a5b;margin-top: 0px;">
  10. 亲爱的少先队员
  11. </section>
  12. </section>
  13. <section class="assistant" style="display: flex;justify-content: flex-end;">
  14. <section class="assistant" style="width: 96%;height: 1px;background-color: #6b7ace;margin-top: -5px;box-sizing:border-box;max-width: 96% !important;transform: rotate(0deg);-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);" data-width="96%"></section>
  15. </section>
复制代码
标题样式3：
01
国内新闻排行
  1. <section style="text-align: center;margin: 10px auto;">
  2. <section style="display: flex;justify-content: flex-start;align-items: center;margin-left: 4px;">
  3. <section style="font-size: 24px;letter-spacing: 1.5px;color: #fe7a09;text-align: center;font-style: italic;">
  4. <strong>0</strong><strong class="autonum" data-original-title="" title="" data-num="1">1</strong>
  5. </section>
  6. <section class="135brush" data-brushtype="text" style="font-size: 16px;letter-spacing: 1.5px;color: #000;margin-left: 10px;">
  7. 国内新闻排行
  8. </section>
  9. </section>
  10. <section class="assistant" style="max-width: 100% !important;width: 100%;height: 1px;background-color: #222222;box-sizing:border-box;" data-width="100%"></section>
  11. </section>
复制代码
标题样式4：
春招校园招聘
-乞行中国-
记录不一样的世界

　　这里是正文

  1. <section style="margin: 10px auto;text-align: left;padding-top: 4px;box-sizing:border-box;">
  2. <section style="background: #ffc756;">
  3. <section class="135brush" data-brushtype="text" style="font-size: 16px;letter-spacing: 1.5px;padding: 8px 1em;color: #fff;background: #3b5cf4;width: 80%;border-top-right-radius: 30px;box-sizing:border-box;max-width: 80% !important;" data-width="80%">
  4. 春招校园招聘
  5. </section>
  6. </section>
  7. </section>
复制代码
  1. <section style="margin: 10px auto;text-align: center;">
  2. <section style="background: linear-gradient(to right,#b0100f 0%,#df0e0d 25%,#ffcf47 25%,#ffcf47 100%);border-radius:0 20px 0 0 ;padding: 9px 0;margin-top: -3px;box-sizing:border-box;">
  3. <section style="display: flex;">
  4. <section style="width: 25%;box-sizing:border-box;max-width: 25% !important;" data-width="25%">
  5. <section style="font-size: 16px;letter-spacing: 1.5px;color: #fff;">
  6. <strong class="135brush" data-brushtype="text">-乞行中国-</strong>
  7. </section>
  8. </section>
  9. <section style="width: 75%;box-sizing:border-box;max-width: 75% !important;" data-width="75%">
  10. <section style="font-size: 16px;letter-spacing: 1.5px;color: #e00e0d;text-align: left;margin-left: 20px;" class="135brush" data-brushtype="text">
  11. 记录不一样的世界
  12. </section>
  13. </section>
  14. </section>
  15. </section>
  16. </section>
  17. <section class="_135editor" data-role="paragraph">
  18. <p style="vertical-align:inherit;">
  19. 　　这里是正文
  20. </p>
  21. </section>
复制代码
标题样式代码5：

请输入标题

  2. <section style="margin: 10px 0px; border-width: 1px 1px 1px 5px; border-style: solid; border-color: #002060 #002060 #002060 #ff0000; width: 100%; border-radius: 4px;box-sizing:border-box;max-width: 100% !important;" class="layout" data-width="100%">
  3. <section style="margin: 5px; padding:0 10px;box-sizing:border-box;">
  4. <p class="135brush" data-brushtype="text" style="line-height: 36px; text-align: left;" align="left">
  5. <span style="color: #548dd4;"><strong>请输入标题</strong></span>
  6. </p>
  7. </section>
  8. </section>
复制代码
标题样式代码6：

输入标题

输入标题

  1. <section style="margin:1em 0;">
  2. <section style="padding: 2px 0px; text-align: center; color: #fefefe; background-color: #ef7060;box-sizing:border-box;">
  3. <section style="border: 1px solid #ffffff;padding:0.5em 1.5em;box-sizing:border-box;">
  4. <p style="font-size:20px;color: #ffffff;line-height: 20px;" class="135brush" data-brushtype="text">
  5. 输入标题
  6. </p>
  7. </section>
  8. </section>
  9. </section>
复制代码
  1. <section style="margin:1em 0;">
  2. <section style="padding: 2px 0px; text-align: center; color: #fefefe; background-color: #ef7060;box-sizing:border-box;">
  3. <section style="border: 1px solid #ffffff;padding:0.5em 1.5em;box-sizing:border-box;">
  4. <p style="font-size: 20px; color: #ffffff; line-height: 20px; text-align: left;" class="135brush" data-brushtype="text" align="left">
  5. 输入标题
  6. </p>
  7. </section>
  8. </section>
  9. </section>
复制代码
标题样式7：

请输入内容

请输入内容

  1. <section style="border:none;margin: 10px;box-sizing:border-box;">
  2. <section style="color: #ff0000; text-align: center; margin: 0px auto -2px; border-bottom-width: 2px; border-bottom-style: solid; border-color: #ff0000; padding: 5px 5px 10px;box-sizing:border-box; border-top-width: 2px; border-top-style: solid;">
  3. <p style="border-color: #ff0000; color: inherit;text-align:center;" align="center">
  4. <span style="border-color: #ff0000; color: inherit; font-size: 18px;" class="135brush" data-brushtype="text">请输入内容</span>
  5. </p>
  6. </section>
  7. <section class="assistant" style="width: 0px; margin-right: auto; margin-left: auto; border-top-width: 0.6em; border-top-style: solid; border-bottom-color: #ff0000; border-top-color: #ff0000; height: 10px; color: inherit; border-left-width: 0.7em !important; border-left-style: solid !important; border-left-color: transparent !important; border-right-width: 0.7em !important; border-right-style: solid !important; border-right-color: transparent !important;box-sizing:border-box;"></section>
  8. <section class="assistant" style="width: 0px; margin-right: auto; margin-left: auto; border-top-width: 0.6em; border-top-style: solid; border-bottom-color: #fefefe; border-top-color: #fefefe; height: 10px; margin-top: -12px; color: inherit; border-left-width: 0.7em !important; border-left-style: solid !important; border-left-color: transparent !important; border-right-width: 0.7em !important; border-right-style: solid !important; border-right-color: transparent !important;box-sizing:border-box;"></section>
  9. </section>
复制代码
  1. <section style="border:none;margin: 10px;box-sizing:border-box;">
  2. <section style="color: #77aaa9; text-align: center; margin: 0px auto -2px; border-bottom-width: 2px; border-bottom-style: solid; border-color: #77aaa9; padding: 5px 5px 10px;box-sizing:border-box; border-top-width: 2px; border-top-style: solid;">
  3. <p style="border-color: #77aaa9; color: inherit;text-align:center;" align="center">
  4. <span style="border-color: #77aaa9; color: inherit; font-size: 18px;" class="135brush" data-brushtype="text">请输入内容</span>
  5. </p>
  6. </section>
  7. <section class="assistant" style="width: 0px; margin-right: auto; margin-left: auto; border-top-width: 0.6em; border-top-style: solid; border-bottom-color: #77aaa9; border-top-color: #77aaa9; height: 10px; color: inherit; border-left-width: 0.7em !important; border-left-style: solid !important; border-left-color: transparent !important; border-right-width: 0.7em !important; border-right-style: solid !important; border-right-color: transparent !important;box-sizing:border-box;"></section>
  8. <section class="assistant" style="width: 0px; margin-right: auto; margin-left: auto; border-top-width: 0.6em; border-top-style: solid; border-bottom-color: #fefefe; border-top-color: #fefefe; height: 10px; margin-top: -12px; color: inherit; border-left-width: 0.7em !important; border-left-style: solid !important; border-left-color: transparent !important; border-right-width: 0.7em !important; border-right-style: solid !important; border-right-color: transparent !important;box-sizing:border-box;"></section>
  9. </section>
复制代码
标题样式8：
请输入标题
请输入标题
请输入标题
  1. <section class="layout" style="border: none; margin: 0.8em auto 0.3em;box-sizing:border-box;">
  2. <section style="font-size: 1em; text-align: center; text-decoration: inherit; color: #fefefe; border-color: #ada769; display: inline-block; width: 100%;box-sizing:border-box;max-width: 100% !important;" data-width="100%">
  3. <section class="135brush" data-brushtype="text" style="padding: 0.5em; line-height: 1.2em; font-size: 1em; color: #fefefe; background-color: #ada769;box-sizing:border-box;">
  4. <strong>请输入标题</strong>
  5. </section>
  6. <section style="width: 0px; margin-right: auto; margin-left: auto; border-top-width: 0.6em; border-top-style: solid; border-bottom-color: #ada769; border-top-color: #ada769; height: 10px; border-left-width: 1em !important; border-left-style: solid !important; border-left-color: transparent !important; border-right-width: 1em !important; border-right-style: solid !important; border-right-color: transparent !important;box-sizing:border-box;"></section>
  7. </section>
  8. </section>
复制代码
  1. <section class="layout" style="border: none; margin: 0.8em auto 0.3em;box-sizing:border-box;">
  2. <section style="font-size: 1em; text-align: center; text-decoration: inherit; color: #fefefe; border-color: #31859b; display: inline-block; width: 100%;box-sizing:border-box;max-width: 100% !important;" data-width="100%">
  3. <section class="135brush" data-brushtype="text" style="padding: 0.5em; line-height: 1.2em; font-size: 1em; color: #fefefe; background-color: #31859b;box-sizing:border-box;">
  4. <strong>请输入标题</strong>
  5. </section>
  6. <section style="width: 0px; margin-right: auto; margin-left: auto; border-top-width: 0.6em; border-top-style: solid; border-bottom-color: #31859b; border-top-color: #31859b; height: 10px; border-left-width: 1em !important; border-left-style: solid !important; border-left-color: transparent !important; border-right-width: 1em !important; border-right-style: solid !important; border-right-color: transparent !important;box-sizing:border-box;"></section>
  7. </section>
  8. </section>
复制代码
  1. <section class="layout" style="border: none; margin: 0.8em auto 0.3em;box-sizing:border-box;">
  2. <section style="font-size: 1em; text-align: center; text-decoration: inherit; color: #fefefe; border-color: #ff0000; display: inline-block; width: 100%;box-sizing:border-box;max-width: 100% !important;" data-width="100%">
  3. <section class="135brush" data-brushtype="text" style="padding: 0.5em; line-height: 1.2em; font-size: 1em; color: #fefefe; background-color: #ff0000;box-sizing:border-box;">
  4. <strong>请输入标题</strong>
  5. </section>
  6. <section style="width: 0px; margin-right: auto; margin-left: auto; border-top-width: 0.6em; border-top-style: solid; border-bottom-color: #ff0000; border-top-color: #ff0000; height: 10px; border-left-width: 1em !important; border-left-style: solid !important; border-left-color: transparent !important; border-right-width: 1em !important; border-right-style: solid !important; border-right-color: transparent !important;box-sizing:border-box;"></section>
  7. </section>
  8. </section>
复制代码
标题样式8修改版：
请输入标题
  1. <section data-role="paragraph" class="_135editor">
  2. <section class="layout" style="border: none; margin: 0.8em auto 0.3em;box-sizing:border-box;">
  3. <section style="font-size: 1em; text-align: center; text-decoration: inherit; color: #fefefe; border-color: #31859b; display: inline-block; width: 100%;max-width: 100% !important;box-sizing:border-box;" data-width="100%">
  4. <section class="135brush" data-brushtype="text" style="padding: 0.5em; line-height: 1.2em; font-size: 1.5em; color: #fefefe; background-color: #31859b;box-sizing:border-box;">
  5. <strong>请输入标题</strong>
  6. </section>
  7. <section style="width: 0px; margin-right: auto; margin-left: auto; border-top-width: 0.6em; border-top-style: solid; border-bottom-color: #31859b; border-top-color: #31859b; height: 10px; border-left-width: 1em !important; border-left-style: solid !important; border-left-color: transparent !important; border-right-width: 1em !important; border-right-style: solid !important; border-right-color: transparent !important;box-sizing:border-box;"></section>
  8. </section>
  9. </section>
  10. </section>
复制代码
标题样式9：
请输入标题   /  关于我们
-乞行中国-   /  地理介绍
  1. <section style="border: 0px none;margin:10px auto;box-sizing:border-box;">
  2. <section class="135brush" data-brushtype="text" style="color: #0573af; padding: 0.45em 0.6em 0.45em 0.9em; border-left: 10px solid #53bffa; border-top-color: #53bffa; border-right-color: #53bffa; border-bottom-color: #53bffa; background: #b6e4fd;box-sizing:border-box;">
  3. 请输入标题 &nbsp; / &nbsp;关于我们
  4. </section>
  5. </section>
复制代码
  1. <section style="border: 0px none;margin:10px auto;box-sizing:border-box;">
  2. <section class="135brush" data-brushtype="text" style="color: #0573af; padding: 0.45em 0.6em 0.45em 0.9em; border-left: 10px solid #002060; border-top-color: #002060; border-right-color: #002060; border-bottom-color: #002060; background: #b6e4fd;box-sizing:border-box;">
  3. -乞行中国-&nbsp; &nbsp;/&nbsp; 地理介绍
  4. </section>
  5. </section>
复制代码
标题样式10：
01
春节营业通知
  1. <section style="text-align: center;margin: 10px auto;">
  2. <section style="display: flex;align-items: flex-end;" class="">
  3. <section class="assistant" style="width: 50px;flex-shrink: 0;margin-right: -20px;box-sizing:border-box;transform: rotate(0deg);-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);">
  4. <img class="assistant" style="vertical-align:inherit;width: 100%; display: block;box-sizing:border-box;max-width: 100% !important;" src="https://i.postimg.cc/7ZGHRbf8/image.png" data-width="100%" draggable="false"/>
  5. </section>
  6. <section style="background: linear-gradient(to right,#ffe6b7 0%,#ffe6b7 25%,#fff2da 25%,#fff2da 100%);flex: 1;padding: 3px 0;margin-bottom: 4px;box-sizing:border-box;">
  7. <section style="display: flex;align-items: center;">
  8. <section style="width: 25%;box-sizing:border-box;max-width: 25% !important;" data-width="25%">
  9. <section style="font-size: 18px;letter-spacing: 1px;color: #ff9429;text-align: right;margin-right: 8px;">
  10. <strong>0</strong><strong class="autonum" data-original-title="" title="">1</strong>
  11. </section>
  12. </section>
  13. <section style="width: 75%;box-sizing:border-box;max-width: 75% !important;" data-width="75%">
  14. <section style="font-size: 16px;letter-spacing: 1.5px;color: #e11b00;text-align: left;margin-left: 8px;" class="">
  15. <strong class="135brush" data-brushtype="text">春节营业通知</strong>
  16. </section>
  17. </section>
  18. </section>
  19. </section>
  20. </section>
  21. </section>
复制代码
标题代码11：
乞
行
中
国
在青春的岁月里遇见你
  1. <section style="margin: 10px auto;text-align: center;">
  2. <section style="display: flex;justify-content: center;">
  3. <section style="width: 30px;height: 30px;border: 1px solid #f7563c;border-radius: 50%;box-sizing:border-box;">
  4. <section class="135brush" data-brushtype="text" style="font-size: 17px;letter-spacing: 1.5px;color: #f7563c;line-height: 29px;margin-left: 2px;flex-shrink: 0;">
  5. 乞
  6. </section>
  7. </section>
  8. <section class="box-edit">
  9. <section style="width: 30px;height: 30px;border: 1px solid #f7563c;border-radius: 50%;margin-left: 8px;box-sizing:border-box;">
  10. <section class="135brush" data-brushtype="text" style="font-size: 17px;letter-spacing: 1.5px;color: #f7563c;line-height: 29px;margin-left: 2px;flex-shrink: 0;">
  11. 行
  12. </section>
  13. </section>
  14. </section>
  15. <section class="box-edit">
  16. <section style="width: 30px;height: 30px;border: 1px solid #f7563c;border-radius: 50%;margin-left: 8px;box-sizing:border-box;">
  17. <section class="135brush" data-brushtype="text" style="font-size: 17px;letter-spacing: 1.5px;color: #f7563c;line-height: 29px;margin-left: 2px;flex-shrink: 0;">
  18. 中
  19. </section>
  20. </section>
  21. </section>
  22. <section class="box-edit">
  23. <section style="width: 30px;height: 30px;border: 1px solid #f7563c;border-radius: 50%;margin-left: 8px;box-sizing:border-box;">
  24. <section class="135brush" data-brushtype="text" style="font-size: 17px;letter-spacing: 1.5px;color: #f7563c;line-height: 29px;margin-left: 2px;flex-shrink: 0;">
  25. 国
  26. </section>
  27. </section>
  28. </section>
  29. </section>
  30. <section style="display: flex;justify-content:center;align-items: center;margin-top: 14px;">
  31. <section class="assistant" style="flex:1;background-image: linear-gradient(to right, #f7563c 100%, #f7563c 100%); height: 1px;margin-bottom:-5px ;"></section>
  32. <section class="135brush" data-brushtype="text" style="font-size: 25px;letter-spacing: 1.5px;padding: 2px 25px;color: #fff;background: #f7563c;box-sizing:border-box;">
  33. 在青春的岁月里遇见你
  34. </section>
  35. <section class="assistant" style="flex:1;background-image: linear-gradient(to left, #f7563c 100%, #f7563c 100%); height: 1px;"></section>
  36. </section>
  37. </section>
复制代码
回复 支持 反对

使用道具 举报

admin

升级   100%

34#
 楼主| 发表于 2023-7-8 02:52:22 | 只看该作者 来自 浙江
可在帖子中直接引用的样式和代码：

狗狗大都是很聪明的哟，稍加训练，它就能跟随主人的口令握手、转圈、站立、起跑、趴下、坐下、打滚等。训练出来的这些技能的帮手就是——零食。准备一些狗狗零食，就是那些狗狗很喜欢吃的但是不经常给它吃的食物。

  1. <section style="margin: 1px auto;" class="">
  2. <section style="display: flex;justify-content: center;align-items: flex-end;">
  3. <section style="width: 50%;box-sizing:border-box;max-width: 50% !important;" data-width="50%"></section>
  4. </section>
  5. <section style="background-color: #fffae8;padding: 10px;margin:0px 0 0;box-sizing:border-box;" class="">
  6. <section style="display: flex;justify-content: space-between;" class="">
  7. <section style="width: 10px;height: 10px;background-color: #ffffff;box-sizing:border-box;"></section>
  8. <section style="width: 10px;height: 10px;background-color: #ffffff;box-sizing:border-box;"></section>
  9. <section style="width: 10px;height: 10px;background-color: #ffffff;box-sizing:border-box;"></section>
  10. <section style="width: 10px;height: 10px;background-color: #ffffff;box-sizing:border-box;"></section>
  11. <section style="width: 10px;height: 10px;background-color: #ffffff;box-sizing:border-box;"></section>
  12. <section style="width: 10px;height: 10px;background-color: #ffffff;box-sizing:border-box;"></section>
  13. <section style="width: 10px;height: 10px;background-color: #ffffff;box-sizing:border-box;"></section>
  14. <section style="width: 10px;height: 10px;background-color: #ffffff;box-sizing:border-box;"></section>
  15. <section style="width: 10px;height: 10px;background-color: #ffffff;box-sizing:border-box;"></section>
  16. <section style="width: 10px;height: 10px;background-color: #ffffff;box-sizing:border-box;"></section>
  17. <section style="width: 10px;height: 10px;background-color: #ffffff;box-sizing:border-box;"></section>
  18. <section style="width: 10px;height: 10px;background-color: #ffffff;box-sizing:border-box;"></section>
  19. <section style="width: 10px;height: 10px;background-color: #ffffff;box-sizing:border-box;"></section>
  20. <section style="width: 10px;height: 10px;background-color: #ffffff;box-sizing:border-box;"></section>
  21. <section style="width: 10px;height: 10px;background-color: #ffffff;box-sizing:border-box;"></section>
  22. <section style="width: 10px;height: 10px;background-color: #ffffff;box-sizing:border-box;"></section>
  23. </section>
  24. <section data-autoskip="1" class="135brush" style="text-align: justify;line-height:1.75em;letter-spacing: 1.5px;font-size:14px;color:#333333;background-color: transparent;padding: 1px 15 5 15;box-sizing:border-box;">
  25. <p>
  26. 狗狗大都是很聪明的哟，稍加训练，它就能跟随主人的口令握手、转圈、站立、起跑、趴下、坐下、打滚等。训练出来的这些技能的帮手就是——零食。准备一些狗狗零食，就是那些狗狗很喜欢吃的但是不经常给它吃的食物。
  27. </p>
  28. </section>
  29. </section>
  30. </section>
复制代码
可直接在贴子中引用的样式和代码：
--乞行中国-- 带您看不一样的中国
Show You a Different China

每一滴汗水都折射太阳的光芒，每一份付出都照亮梦想的天空。尊重每一份职业，也感谢每一次坚守。今天是五一劳动节，向每一个努力生活的人致敬！

  1. <section style="text-align: center; margin: 10px auto;">
  2. <section style="background-color: #fff9f7;padding: 35px 25px;margin-top: -20px;box-sizing: border-box;">
  3. <section style="display: flex;align-items: center;">
  4. <section style="flex: 1;">
  5. <section class="assistant" style="width: 100%; height: 1px; background-color: #ff6248; max-width: 100% !important; overflow: hidden;box-sizing:border-box;" data-width="100%"></section>
  6. <section class="assistant" style="width: 100%; height: 1px; background-color: #ff6248; margin: 5px 0px; max-width: 100% !important; overflow: hidden;box-sizing:border-box;" data-width="100%"></section>
  7. <section class="assistant" style="width: 100%; height: 1px; background-color: #ff6248; max-width: 100% !important; overflow: hidden;box-sizing:border-box;" data-width="100%"></section>
  8. </section>
  9. <section style="font-size: 16px;letter-spacing: 1.5px;color: #e4432d;text-align: center;margin: 0 16px;">
  10. <strong class="135brush" data-brushtype="text">--乞行中国-- 带您看不一样的中国</strong>
  11. </section>
  12. <section style="flex: 1;">
  13. <section class="assistant" style="width: 100%; height: 1px; background-color: #ff6248; max-width: 100% !important; overflow: hidden;box-sizing:border-box;" data-width="100%"></section>
  14. <section class="assistant" style="width: 100%; height: 1px; background-color: #ff6248; margin: 5px 0px; max-width: 100% !important; overflow: hidden;box-sizing:border-box;" data-width="100%"></section>
  15. <section class="assistant" style="width: 100%; height: 1px; background-color: #ff6248; max-width: 100% !important; overflow: hidden;box-sizing:border-box;" data-width="100%"></section>
  16. </section>
  17. </section>
  18. <section class="135brush" style="font-size: 12px;letter-spacing: 1px;color: #e4432d;margin: 7px 0 15px 0;" data-brushtype="text">
  19. Show You a Different China
  20. </section>
  21. <section style="max-width: 100% !important;width: 100%;box-sizing:border-box;" data-width="100%">
  22. <img style="width: 100%; display: block;vertical-align:inherit;box-sizing:border-box;max-width: 100% !important;" src="https://bcn.135editor.com/files/images/editor_styles/4aec00a5faed3ba654b5f644db0827a1.png" data-width="100%" draggable="false" data-ratio="0.6" data-w="560"/>
  23. </section>
  24. <section style="margin-top: 20px;text-align: justify;line-height: 1.75em;letter-spacing: 1.5px;font-size: 14px;color: #504445;background: transparent;">
  25. <section class="135brush" data-autoskip="1">
  26. <p>
  27. 每一滴汗水都折射太阳的光芒，每一份付出都照亮梦想的天空。尊重每一份职业，也感谢每一次坚守。今天是五一劳动节，向每一个努力生活的人致敬！
  28. </p>
  29. </section>
  30. </section>
  31. </section>
  32. </section>
复制代码
回复 支持 反对

使用道具 举报

admin

升级   100%

35#
 楼主| 发表于 2023-7-8 21:31:08 | 只看该作者 来自 浙江
可直接在帖子中引用的样式和代码：
-乞行中国-动听音乐
  1. <section style="margin:10px auto;">
  2. <section style="display: flex;justify-content: center;align-items:center;">
  3. <section class="assistant" style="width: 2px;background-image: linear-gradient(#fd97ac,#e993d8);height:25px;margin-right: 1.7px;box-sizing:border-box;"></section>
  4. <section class="assistant" style="width: 5px;background-image: linear-gradient(#fd97ac,#e993d8);height:25px;box-sizing:border-box;"></section>
  5. <section class="assistant" style="flex:1;">
  6. <section class="assistant" style="height: 1px; background-color: #f9daef; overflow: hidden;flex:1;"></section>
  7. <section class="assistant" style="height: 1px; background-color: #f9daef; margin-top:2px; overflow: hidden;flex:1;"></section>
  8. <section class="assistant" style="height: 1px; background-color: #f9daef; margin-top:2px; overflow: hidden;flex:1;"></section>
  9. <section class="assistant" style="height: 1px; background-color: #f9daef; margin-top:2px; overflow: hidden;flex:1;"></section>
  10. </section>
  11. <section style="width:30px;box-sizing:border-box;">
  12. <section class="assistant" style="width:30px;box-sizing:border-box;">
  13. <img class="assistant" style="vertical-align:inherit;width:100%; display:block;box-sizing:border-box;max-width:100% !important;" src="http://gamart.net/upimages/upimg/updir/20230708195148_64a94dd499476.jpg" draggable="false"/>
  14. </section>
  15. </section>
  16. </section>
  17. <section class="135brush" data-brushtype="text" style="text-align: left;margin-left:20px;font-size: 16px;color: #e45a84;letter-spacing: 1.5px;box-sizing: border-box;margin-top:-25px;">
  18. <strong >-乞行中国-动听音乐</strong>
  19. </section>
  20. </section>
复制代码
代码样式2：

当梦想照进现实的时候，每一天早晨闹钟想起的时候，你是起身一跃还是翻身盖被，才是证明自己的最好答案。焰火下的孤独，是每一个梦想必须经过的地方，每一个人都一样。五月，早安!

  1. <section style="margin: 10px 10px 10px 0px">
  2. <section style="display: flex;" >
  3. <section class="assistant" style="width: 2px;background-image: linear-gradient(#fd97ac,#e993d8);height: auto;margin-right: 1.7px;flex-shrink: 0;box-sizing:border-box;"></section>
  4. <section class="assistant" style="width: 4px;background-image: linear-gradient(#fd97ac,#e993d8);height: auto;flex-shrink: 0;box-sizing:border-box;"></section>
  5. <section>
  6. <section style="padding: 10px 15px;text-align: justify;font-size: 14px;letter-spacing: 1.5px;line-height: 1.75em;color: #e45a84;box-sizing:border-box;" data-autoskip="1" class="135brush">
  7. <p style="margin: 0;">
  8. 当梦想照进现实的时候，每一天早晨闹钟想起的时候，你是起身一跃还是翻身盖被，才是证明自己的最好答案。焰火下的孤独，是每一个梦想必须经过的地方，每一个人都一样。五月，早安!
  9. </p>
  10. </section>
  11. <section class="assistant" style="margin-top:5px;padding-bottom: 4px;box-sizing:border-box;">
  12. <section class="assistant" style="height: 1px;background: #f9daef;margin-bottom: 4px;width: 100%;max-width: 100% !important;box-sizing:border-box;" data-width="100%"></section>
  13. <section class="assistant" style="height: 1px;background: #f9daef;margin-bottom: 4px;width: 100%;max-width: 100% !important;box-sizing:border-box;" data-width="100%"></section>
  14. <section class="assistant" style="height: 1px;background: #f9daef;margin-bottom: 4px;margin-left: 4px;width: 100%;max-width: 100% !important;box-sizing:border-box;" data-width="100%"></section>
  15. <section class="assistant" style="height: 1px;background: #f9daef;width: 100%;max-width: 100% !important;box-sizing:border-box;" data-width="100%"></section>
  16. </section>
  17. <section style="display: flex;justify-content: flex-end;height: auto;">
  18. <section class="" style="width:24px;margin-top: -65px;margin-right: -6.5px;z-index: 1;box-sizing:border-box;">
  19. <img class="assistant" style="width:100%; display:block;vertical-align:inherit;box-sizing:border-box;max-width:100% !important;" src="http://gamart.net/upimages/upimg/updir/20230708200431_64a950cfdca46.jpg" data-width="100%" draggable="false"/>
  20. </section>
  21. </section>
  22. </section>
  23. </section>
  24. </section>
复制代码
回复 支持 反对

使用道具 举报

admin

升级   100%

36#
 楼主| 发表于 2023-7-9 19:44:17 | 只看该作者 来自 浙江
可直接在帖子引用的样式和代码：

非常感谢您的捐赠，从上面扫码购买赠送的物资，相关配送员会送达我们的取货点；以下面付款的方式捐赠的，我们也会及时收到；捐赠为自愿行为，且不会退款，请知悉。人间有您，大爱无疆，再次感谢您的捐赠！

  1. <section style="margin: 10px auto; text-align: center;">
  2. <section style="background-color: #160b03;">
  3. <section style="background-size: 39%;background-repeat: no-repeat;background-position: bottom left; radius: 10px;">
  4. <section style="background-size: 25%;background-repeat: no-repeat;background-position: bottom right;">
  5. <section data-autoskip="1" class="135brush" style="text-align: justify;line-height:1.75em;letter-spacing: 1.5px;font-size:14px;color:#f9cd9d;background: transparent;padding: 20px;box-sizing:border-box;">
  6. <p>
  7. 非常感谢您的捐赠，从上面扫码购买赠送的物资，相关配送员会送达我们的取货点；以下面付款的方式捐赠的，我们也会及时收到；捐赠为自愿行为，且不会退款，请知悉。人间有您，大爱无疆，再次感谢您的捐赠！
  8. </p>
  9. </section>
  10. </section>
  11. </section>
  12. </section>
  13. </section>
复制代码
引用样式：

引用样式，引用样式不止有单竖线的，也有引号的。通常适用于引用某句名言，引用某本书中的段落。135编辑器里还有更多引用样式可供选择。在样式中心搜索“引用”，即可选择使用。

  1. <div><section style="padding-left: 10px; max-width: 100%; border-left: 5px solid #548dd4; margin: 10px auto; box-sizing: border-box;" class="">
  2. <section style="font-size: 13px; text-align: justify; letter-spacing: 1px; line-height: 1.75em; color: #e36c09;" >
  3. <p class="135brush" data-autoskip="1" style="color: #000; font-size: 14px; letter-spacing: 1.5px; caret-color: red;">
  4. 引用样式，引用样式不止有单竖线的，也有引号的。通常适用于引用某句名言，引用某本书中的段落。135编辑器里还有更多引用样式可供选择。在样式中心搜索“引用”，即可选择使用。
  5. </p>
  6. </section>
  7. </section></div>
复制代码
文字块样式：

生命中任何一天的结束，便永不重来。 from 《诱僧》

  1. <section class="135brush layout" style="background-color:#fcf8e3;border-color:#faebcc;color:#8a6d3b;border-radius: 4px;font-size: 14px;text-align: justify;letter-spacing: 1.5px;line-height: 1.75em;padding: 1em 0.8em;margin:10px auto;box-sizing:border-box;">
  2. <p>
  3. 生命中任何一天的结束，便永不重来。 from 《诱僧》
  4. </p>
  5. </section>
复制代码
引用样式：
科技创新

我国科技创新正在步入以跟踪为主转向跟踪和并跑、领跑并存的新阶段，正处于从量的积累向质的飞跃、从点的突破向系统能力提升的重要时期，已成为具有重要影响力的科技大国。

  1. <section style="margin: 10px auto;">
  2. <section style="margin: 20px 0 0;">
  3. <section style="display: flex;justify-content: flex-start;">
  4. <section style="flex-shrink: 0;">
  5. <section style="width: 7px;height: 100%;background-color: #2b8bcf;box-sizing:border-box;"></section>
  6. </section>
  7. <section style="font-size: 16px;color: #2b8bcf;padding: 0 5px;letter-spacing: 1.5px;box-sizing:border-box;">
  8. <strong class="135brush" data-brushtype="text">科技创新</strong>
  9. </section>
  10. <section style="padding: 0 5px;display: flex;align-items: center;box-sizing:border-box;">
  11. <section style="width: 7px;height: 14px;border-left: 1px solid #4197d4;border-right: 1px solid #4197d4;box-sizing:border-box;transform: skew(-30deg);-webkit-transform: skew(-30deg);-moz-transform: skew(-30deg);-o-transform: skew(-30deg);"></section>
  12. </section>
  13. </section>
  14. <section style="padding: 10px;background-color: #e5f8fc;margin: 10px 0 0;box-sizing:border-box;">
  15. <section data-autoskip="1" class="135brush" style="text-align: justify;line-height:1.75em;letter-spacing: 1.5px;font-size:14px;color:#445b6a;background: transparent;">
  16. <p>
  17. 我国科技创新正在步入以跟踪为主转向跟踪和并跑、领跑并存的新阶段，正处于从量的积累向质的飞跃、从点的突破向系统能力提升的重要时期，已成为具有重要影响力的科技大国。
  18. </p>
  19. </section>
  20. </section>
  21. </section>
  22. </section>
复制代码
文字块样式：

八月十五月儿圆，中秋月饼味香甜。

中秋节以月之圆兆人之团圆，为寄托思念故乡，思念亲人之情，祈盼丰收、幸福，成为丰富多彩、弥足珍贵的文化遗产

  1. <section style="margin: 20px auto;">
  2. <section style="background-color: #d04646;border-radius: 9px;box-sizing:border-box;">
  3. <section style="width: 96%;height: 15px;background-color: #d04646;border-radius: 15px;margin: 0 auto;box-sizing:border-box;max-width: 96% !important;transform: translateY(-8px);-webkit-transform: translateY(-8px);-moz-transform: translateY(-8px);-o-transform: translateY(-8px);" data-width="96%"></section>
  4. <section style="padding: 5px 25px;box-sizing:border-box;">
  5. <section data-autoskip="1" class="135brush" style="text-align: justify;line-height:1.75em;letter-spacing: 1.5px;font-size:14px;color:#ffffff;background: transparent;">
  6. <p>
  7. 八月十五月儿圆，中秋月饼味香甜。
  8. </p>
  9. </section>
  10. <section data-autoskip="1" class="135brush" style="text-align: justify;line-height:1.75em;letter-spacing: 1.5px;font-size:14px;color:#ffffff;background: transparent;">
  11. <p>
  12. 中秋节以月之圆兆人之团圆，为寄托思念故乡，思念亲人之情，祈盼丰收、幸福，成为丰富多彩、弥足珍贵的文化遗产
  13. </p>
  14. </section>
  15. </section>
  16. <section style="width: 96%;height: 15px;background-color: #d04646;border-radius: 15px;margin: 0 auto;box-sizing:border-box;max-width: 96% !important;transform: translateY(8px);-webkit-transform: translateY(8px);-moz-transform: translateY(8px);-o-transform: translateY(8px);" data-width="96%"></section>
  17. </section>
  18. </section>
复制代码
文字块样式：

茶道源于中国，盛于中国南方以及日本，日本的煎茶道、中国台湾地区的泡茶道都来源于中国广东潮汕地区的工夫茶。

  1. <section style="margin: 10px auto;">
  2. <section style="border-top: 1px solid #78944b;border-bottom: 1px solid #78944b;padding: 5px 0;box-sizing:border-box;">
  3. <section style="display: flex;justify-content: space-between;margin: 0 0 -10px 0;">
  4. <section style="width: 10px;height: 10px;border-width: 0 0 0 0;border-radius: 0 0 100% 0;border-style: solid;border-color: #f3ddbc;background-color: #ffffff;box-sizing:border-box;"></section>
  5. <section style="width: 10px;height: 10px;border-width: 0 0 0 0;border-radius: 0 0 0 100%;border-style: solid;border-color: #f3ddbc;background-color: #ffffff;box-sizing:border-box;"></section>
  6. </section>
  7. <section style="border: 0 solid #f5e3c7;padding: 15px 20px;background-color: #fefbf5;box-sizing:border-box;">
  8. <section data-autoskip="1" class="135brush" style="text-align: justify;line-height:1.75em;letter-spacing: 1.5px;font-size:14px;color:#333333;background: transparent;">
  9. <p>
  10. 茶道源于中国，盛于中国南方以及日本，日本的煎茶道、中国台湾地区的泡茶道都来源于中国广东潮汕地区的工夫茶。
  11. </p>
  12. </section>
  13. </section>
  14. <section style="display: flex;justify-content: space-between;margin: -10px 0 0 0;">
  15. <section style="width: 10px;height: 10px;border-width: 0 0 0 0;border-radius: 0 100% 0 0;border-style: solid;border-color: #f3ddbc;background-color: #ffffff;box-sizing:border-box;"></section>
  16. <section style="width: 10px;height: 10px;border-width: 0 0 0 0;border-radius: 100% 0 0 0;border-style: solid;border-color: #f3ddbc;background-color: #ffffff;box-sizing:border-box;"></section>
  17. </section>
  18. </section>
  19. </section>
复制代码
文字块样式：

简约起源于现代派的极简主义。 有人说起源于现代派大师，德国包豪斯学校的第三任校长米斯.凡德罗。他提倡LESS IS MORE.在满足功能的基础上作到最大程度的简洁。

  1. <section style="margin: 20px auto;">
  2. <section>
  3. <section style="display: flex;justify-content: center;align-items: center;">
  4. <section style="max-width: 100% !important;width: 100%;box-sizing:border-box;" data-width="100%">
  5. <section style="max-width: 100% !important;width: 100%;height: 1px;background-color: #333;box-sizing:border-box;" data-width="100%"></section>
  6. </section>
  7. <section style="display: flex;align-items: center;padding-left: 5px;box-sizing:border-box;">
  8. <section style="flex-shrink: 0;">
  9. <section style="width: 10px;height: 10px;background-color: #ff0000;border-radius: 100%;box-sizing:border-box;"></section>
  10. </section>
  11. <section style="flex-shrink: 0;margin-left: 5px;">
  12. <section style="width: 10px;height: 10px;background-color: #ff0000;border-radius: 100%;box-sizing:border-box;"></section>
  13. </section>
  14. </section>
  15. </section>
  16. <section style="padding: 25px 15px;box-sizing:border-box;">
  17. <section data-autoskip="1" class="135brush" style="text-align: justify;line-height:1.75em;letter-spacing: 1.5px;font-size:14px;color:#333;background: transparent;">
  18. <p>
  19. 简约起源于现代派的极简主义。 有人说起源于现代派大师，德国包豪斯学校的第三任校长米斯.凡德罗。他提倡LESS IS MORE.在满足功能的基础上作到最大程度的简洁。
  20. </p>
  21. </section>
  22. </section>
  23. <section style="display: flex;justify-content: center;align-items: center;">
  24. <section style="display: flex;align-items: center;padding-right: 5px;box-sizing:border-box;">
  25. <section style="flex-shrink: 0;">
  26. <section style="width: 10px;height: 10px;background-color: #ff0000;border-radius: 100%;box-sizing:border-box;"></section>
  27. </section>
  28. <section style="flex-shrink: 0;margin-left: 5px;">
  29. <section style="width: 10px;height: 10px;background-color: #ff0000;border-radius: 100%;box-sizing:border-box;"></section>
  30. </section>
  31. </section>
  32. <section style="max-width: 100% !important;width: 100%;box-sizing:border-box;" data-width="100%">
  33. <section style="max-width: 100% !important;width: 100%;height: 1px;background-color: #333;box-sizing:border-box;" data-width="100%"></section>
  34. </section>
  35. </section>
  36. </section>
  37. </section>
复制代码
文字块样式：

从革命英魂到解放先锋，以及千千万万为国奉献的烈士，再到如今挺身于危难之前的人民军队，他们从来都是最可爱的人，是最值得尊敬的人，也是最该怀念的人！

  1. <section style="margin: 20px auto;">
  2. <section style="transform-style: preserve-3d">
  3. <section style="margin-top: -20px;background-color: #c82516;padding: 5px;box-sizing:border-box;transform: translateZ(10px);-webkit-transform: translateZ(10px);-moz-transform: translateZ(10px);-o-transform: translateZ(10px);">
  4. <section style="padding: 15px ;background-color: #c82516;border: 1px solid #f7dca0;box-sizing:border-box;">
  5. <section data-autoskip="1" class="135brush" style="text-align: justify;line-height:1.75em;letter-spacing: 1.5px;font-size:14px;color:#f7dca0;background: transparent;">
  6. <p style="vertical-align:inherit;">
  7. 从革命英魂到解放先锋，以及千千万万为国奉献的烈士，再到如今挺身于危难之前的人民军队，他们从来都是最可爱的人，是最值得尊敬的人，也是最该怀念的人！
  8. </p>
  9. </section>
  10. </section>
  11. </section>
  12. </section>
  13. </section>
复制代码
回复 支持 反对

使用道具 举报

admin

升级   100%

37#
 楼主| 发表于 2023-8-24 07:58:27 | 只看该作者 来自 浙江
内容块样式：
信
息
内
容
记录时间

2023年02月16日

记录地点

四川省自贡市大安区牛佛镇

记录简述

流浪到此

1：简介内容

　　由于的是傍晚到的古镇，不好找停车位，就把车开到了古镇的河坝，这有两个好处，一是清静，二是水源方便；早上起来洗漱都是很方便的；不是夏天，也不用担心河水涨水的问题。

代码如下：
  1. <div>
  2. <section style="margin: 10px auto;">
  3. <section style="display: flex;justify-content: center;margin: 0 0 -15px;" class="">
  4. <section style="display: flex;justify-content: center;padding: 0 2px;background-color: #ffffff;box-sizing:border-box;">
  5. <section class="box-edit" style="font-size: 16px;color: #ffffff;width: 30px;height: 30px;text-align: center;background-color: #fdd227; margin: 0 2px;display: flex;justify-content: center;align-items: center;box-sizing:border-box;">
  6. <strong class="135brush" data-brushtype="text">信</strong>
  7. </section>
  8. <section class="box-edit" style="font-size: 16px;color: #ffffff;width: 30px;height: 30px;text-align: center;background-color: #b6d315; margin: 0 2px;display: flex;justify-content: center;align-items: center;box-sizing:border-box;">
  9. <strong class="135brush" data-brushtype="text">息</strong>
  10. </section>
  11. <section class="box-edit" style="font-size: 16px;color: #ffffff;width: 30px;height: 30px;text-align: center;background-color: #fdd227; margin: 0 2px;display: flex;justify-content: center;align-items: center;box-sizing:border-box;">
  12. <strong class="135brush" data-brushtype="text">内</strong>
  13. </section>
  14. <section class="box-edit" style="font-size: 16px;color: #ffffff;width: 30px;height: 30px;text-align: center;background-color: #b6d315; margin: 0 2px;display: flex;justify-content: center;align-items: center;box-sizing:border-box;">
  15. <strong class="135brush" data-brushtype="text">容</strong>
  16. </section>
  17. </section>
  18. </section>
  19. <section style="border-top: 1px solid #77ae4c;background-color: #fdfcf3;box-sizing:border-box;">
  20. <section class="box-edit" style="display: flex;justify-content: flex-start;align-items: center;background-color: #e3fafb;margin: 13px 0 0;border-radius: 6px 0 0 6px;box-sizing:border-box;">
  21. <section style="flex-shrink: 0;">
  22. <section style="font-size: 16px;color: #ffffff;background-color: #56c5d2;border-radius: 5px;padding: 3px 10px;box-sizing:border-box;">
  23. <strong class="135brush" data-brushtype="text">记录时间</strong>
  24. </section>
  25. </section>
  26. <section style="width: 100%;display: flex;align-items: center;max-width: 100% !important;box-sizing:border-box;" data-width="100%">
  27. <section data-autoskip="1" class="135brush" style="text-align: justify;line-height:1.75em;letter-spacing: 1.5px;font-size:14px;color:#333333;background-color: transparent;padding: 3px 5px 3px 15px;box-sizing:border-box;">
  28. <p>
  29. 2023年02月16日
  30. </p>
  31. </section>
  32. </section>
  33. </section>
  34. <section class="box-edit" style="display: flex;justify-content: flex-start;align-items: center;background-color: #e3fafb;margin: 13px 0 0;border-radius: 6px 0 0 6px;box-sizing:border-box;">
  35. <section style="flex-shrink: 0;">
  36. <section style="font-size: 16px;color: #ffffff;background-color: #56c5d2;border-radius: 5px;padding: 3px 10px;box-sizing:border-box;">
  37. <strong class="135brush" data-brushtype="text">记录地点</strong>
  38. </section>
  39. </section>
  40. <section style="width: 100%;display: flex;align-items: center;max-width: 100% !important;box-sizing:border-box;" data-width="100%">
  41. <section data-autoskip="1" class="135brush" style="text-align: justify;line-height:1.75em;letter-spacing: 1.5px;font-size:14px;color:#333333;background-color: transparent;padding: 3px 5px 3px 15px;box-sizing:border-box;">
  42. <p>
  43. 四川省自贡市大安区牛佛镇
  44. </p>
  45. </section>
  46. </section>
  47. </section>
  48. <section class="box-edit" style="display: flex;justify-content: flex-start;align-items: center;background-color: #e3fafb;margin: 13px 0 0;border-radius: 6px 0 0 6px;box-sizing:border-box;">
  49. <section style="flex-shrink: 0;">
  50. <section style="font-size: 16px;color: #ffffff;background-color: #56c5d2;border-radius: 5px;padding: 3px 10px;box-sizing:border-box;">
  51. <strong class="135brush" data-brushtype="text">记录简述</strong>
  52. </section>
  53. </section>
  54. <section style="width: 100%;display: flex;align-items: center;max-width: 100% !important;box-sizing:border-box;" data-width="100%">
  55. <section data-autoskip="1" class="135brush" style="text-align: justify;line-height:1.75em;letter-spacing: 1.5px;font-size:14px;color:#333333;background-color: transparent;padding: 3px 5px 3px 15px;box-sizing:border-box;">
  56. <p>
  57. 流浪到此
  58. </p>
  59. </section>
  60. </section>
  61. </section>
  62. </section>
  63. </section>
  64. </div>
  65. [hr]
  66. <div>
  67. <section style="margin: 10px auto;">
  68. <section style="width: 100%;height: 2px;border-top: 1px solid #d53a1c;max-width: 100% !important;box-sizing:border-box;" data-width="100%"></section>
  69. <section style="display: flex;justify-content: flex-start;background-color: #ffd952;">
  70. <section style="display: flex;justify-content: center;flex-shrink: 0;">
  71. <section style="font-size: 14px;color: #ffffff;background-color: #d53a1c;display: flex;align-items: center;padding: 0 10px;box-sizing:border-box;">
  72. <strong class="135brush" data-brushtype="text">1：简介内容</strong>
  73. </section>
  74. <section style="flex-shrink: 0;display: flex;align-items: center;">
  75. <section style="width: 0px;height: 1px;border-top: 15px solid transparent;border-left: 10px solid #d53a1c;border-bottom: 15px solid transparent;z-index: 9;box-sizing:border-box;"></section>
  76. <section style="width: 5px;height: 30px;background-color: #fffffe;margin: 0 0 0 -10px;box-sizing:border-box;"></section>
  77. <section style="width: 0px;height: 1px;border-top: 15px solid transparent;border-left: 10px solid #fffffe;border-bottom: 15px solid transparent;box-sizing:border-box;"></section>
  78. </section>
  79. </section>
  80. </section>
  81. <section style="background-color: #fcf8e3;padding: 0 14px 14px;box-sizing:border-box;">
  82. <section style="padding: 5px 0;box-sizing:border-box;">
  83. <section data-autoskip="1" class="135brush" style="text-align: justify;line-height:1.75em;letter-spacing: 1.5px;font-size:14px;color:#4b4b4b;background-color: transparent;">
  84. <p>
  85. 　　由于的是傍晚到的古镇，不好找停车位，就把车开到了古镇的河坝，这有两个好处，一是清静，二是水源方便；早上起来洗漱都是很方便的；不是夏天，也不用担心河水涨水的问题。
  86. </p>
  87. </section>
  88. </section>
  89. </section>
  90. </section>
  91. </div>
复制代码
回复 支持 反对

使用道具 举报

1234
返回列表 发新帖
懒得打字嘛，点击右侧快捷回复 咨询,充值,充值卡购买等请联系 👸微信客服
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|小黑屋|手机版|Gamart.net Inc. ( 蜀ICP备11002741号 ) 

GMT+8, 2024-12-22 10:59 , Processed in 0.325911 second(s), 11 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2

© 2001-2024 Anziwo.com Inc.

快速回复 返回顶部 返回列表