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

王洪林个人官网

 找回密码
 立即注册

QQ登录

只需一步，快速开始

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

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

  [复制链接]
admin

升级   100%

跳转到指定楼层
楼主
发表于 2023-7-5 10:14:50 | 只看该作者 |只看大图 回帖奖励 |倒序浏览 |阅读模式 来自 浙江
王洪林个人官网免责声明
本网站内容仅代表作者本人的观点，不代表本网站的观点和看法，与本网站立场无关，相关责任作者自负。本网站有部分内容来自互联网，如无意中侵犯了哪个媒体 、公司 、企业或个人等的知识产权，请来电或致函告之，本网站将在规定时间内给予删除等相关处理，若有涉及版权费等问题，请及时提供相关证明等材料并与我们联系，通过友好协商公平公正原则处理纠纷。
[PintuerCSS前端开发学习]代码应用开发学习记录
  1. <!--虚线边框代码-->
  2.         <div class="container">
  3.         <div class="border border-small border-dashed border-sub bg-back radius-big margin-bottom">
  4.                
  5.         <!---->
  6.         <div class="panel-body">
  7.         <!--这里也可以加入图标，让提示看起来更醒目一些-->
  8.         <!--<h3><span class="icon-circle text-red">  </span><span class="icon-circle text-yellow"></span>  <span class="icon-circle text-green"></span></h3>-->
  9.                 <h4><strong>虚线边框内放置面板内容标题</strong></h4>
  10.                 <p>注意：这里是面板内容，这个可以写很多的内容，此虚线边框也可以作为提示内容来展示，这个框内写了两种情况，应用时请灵活运用...</p>
  11.         </div>        

  13.         <!---->
  14.         <div class="panel-body bg-yellow bg-inverse radius-big">
  15.         <!--上面加入bg-inverse来让背景反色-->
  16.         <h5><strong>这里是标题</strong></h5>
  17.         有边距、橙色背景色并且圆角了的面板组...
  18.     </div>
  19.     <!---->

  21.         </div>
  22.         </div>        
  23.         <!--虚线边框结束-->
复制代码
以下是再加入竖线和分隔线的代码和效果：
  1. <p style="border-left: 5px solid red; height: 20px; margin-bottom:8px;"> 这里写段文字是什么效果</p><hr class="text-big bg-red">
复制代码
王洪林个人官网免责声明

　　本站所有音视频内容均来至互联网分享，本网站只提供web页面服务，不提供影片资源存储，录制、上传相关音视频等，音视频版权归属其合法持有人所有；本站不对此类内容负任何责任，如有侵犯版权请及时与我们联系并出示版权证明，我们将在24小时内删除；另外，影视观看中请勿相信音视频中的任何广告内容，谨防上当受骗，由此带来的任何问题和损失与本站无关，特此声明。

分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 转播转播 分享分享 分享淘帖 支持支持 反对反对
回复

使用道具 举报

admin

升级   100%

沙发
 楼主| 发表于 2023-7-6 07:44:38 | 只看该作者 来自 浙江
测试编辑从[135编辑器]引入样式到本论坛中的效果展示和代码：
1：首先，贴子编辑器打开html编辑支持；
2：插入[135编辑]编辑的html代码
以下是样式效果1：
1
小暑时节
/ SLIGHT HEAT
  1. <section class="_135editor" data-role="title" data-tools="135编辑器" data-id="129352">
  2. <section style="margin: 10px auto; display: flex; justify-content: center;">
  3. <section style="display: flex;justify-content: center;align-items: center;">
  4. <section style="flex-shrink: 0;">
  5. <section style="font-size: 16px;letter-spacing: 1.5px;color: #ffffff;background-color: #a0c05f;width: 25px;height: 25px;border-radius: 100%;display: flex;justify-content: center;align-items: center;box-sizing:border-box;">
  6. <strong class="autonum" data-original-title="" title="">1</strong>
  7. </section>
  8. </section>
  9. <section style="display: flex;align-items: flex-end;">
  10. <section style="font-size: 16px;color: #a0c05f;text-align: center;padding: 0 6px;box-sizing:border-box;">
  11. <strong class="135brush" data-brushtype="text">小暑时节</strong>
  12. </section>
  13. <section style="font-size: 12px;color: #ffdc80;text-align: center;">
  14. / <strong class="135brush" data-brushtype="text">SLIGHT HEAT</strong>
  15. </section>
  16. </section>
  17. </section>
  18. </section>
  19. </section>
  20. <section data-role="paragraph" class="_135editor">
  21. </section>
复制代码
以下是样式效果2：
报名信息
招生对象

青少年学生

招生时间

2023年7月1日

招生地点

长宏大道22号

联系电话

531-8911355


  1. <section class="_135editor" data-tools="135编辑器" data-id="129227">
  2. <section style="margin: 10px auto;">
  3. <section style="display: flex;justify-content: flex-end;margin: 0 0 3px;">
  4. <section style="display: flex;align-items: center;">
  5. <section style="font-size: 16px;color: #56c5d2;">
  6. <strong class="135brush" data-brushtype="text">报名信息</strong>
  7. </section>
  8. <section style="display: flex;flex-shrink: 0;">
  9. <section style="width: 0px;height: 1px;border-right: 6px solid #fed573;border-top: 3px solid transparent;border-bottom: 3px solid transparent;margin: 0 0 0 5px;box-sizing:border-box;"></section>
  10. <section style="width: 0px;height: 1px;border-right: 6px solid #fed573;border-top: 3px solid transparent;border-bottom: 3px solid transparent;margin:0 0 0 5px;box-sizing:border-box;"></section>
  11. <section style="width: 0px;height: 1px;border-right: 6px solid #fed573;border-top: 3px solid transparent;border-bottom: 3px solid transparent;margin:0 0 0 5px;box-sizing:border-box;"></section>
  12. </section>
  13. </section>
  14. </section>
  15. <section style="background-color: #f6feff;padding: 3px;border-radius: 5px;box-sizing:border-box;">
  16. <section style="background-color: #ffffff;padding:1px 15px 15px;border-radius: 5px;box-sizing:border-box;">
  17. <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;">
  18. <section style="flex-shrink: 0;">
  19. <section style="font-size: 16px;color: #ffffff;background-color: #56c5d2;border-radius: 5px;padding: 3px 10px;box-sizing:border-box;">
  20. <strong class="135brush" data-brushtype="text">招生对象</strong>
  21. </section>
  22. </section>
  23. <section style="width: 100%;display: flex;align-items: center;max-width: 100% !important;box-sizing:border-box;" data-width="100%">
  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: 3px 5px 3px 15px;box-sizing:border-box;">
  25. <p>
  26. 青少年学生
  27. </p>
  28. </section>
  29. </section>
  30. </section>
  31. <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;">
  32. <section style="flex-shrink: 0;">
  33. <section style="font-size: 16px;color: #ffffff;background-color: #56c5d2;border-radius: 5px;padding: 3px 10px;box-sizing:border-box;">
  34. <strong class="135brush" data-brushtype="text">招生时间</strong>
  35. </section>
  36. </section>
  37. <section style="width: 100%;display: flex;align-items: center;max-width: 100% !important;box-sizing:border-box;" data-width="100%">
  38. <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;">
  39. <p>
  40. 2023年7月1日
  41. </p>
  42. </section>
  43. </section>
  44. </section>
  45. <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;">
  46. <section style="flex-shrink: 0;">
  47. <section style="font-size: 16px;color: #ffffff;background-color: #56c5d2;border-radius: 5px;padding: 3px 10px;box-sizing:border-box;">
  48. <strong class="135brush" data-brushtype="text">招生地点</strong>
  49. </section>
  50. </section>
  51. <section style="width: 100%;display: flex;align-items: center;max-width: 100% !important;box-sizing:border-box;" data-width="100%">
  52. <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;">
  53. <p>
  54. 长宏大道22号
  55. </p>
  56. </section>
  57. </section>
  58. </section>
  59. <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;">
  60. <section style="flex-shrink: 0;">
  61. <section style="font-size: 16px;color: #ffffff;background-color: #56c5d2;border-radius: 5px;padding: 3px 10px;box-sizing:border-box;">
  62. <strong class="135brush" data-brushtype="text">联系电话</strong>
  63. </section>
  64. </section>
  65. <section style="width: 100%;display: flex;align-items: center;max-width: 100% !important;box-sizing:border-box;" data-width="100%">
  66. <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;">
  67. <p>
  68. 531-8911355
  69. </p>
  70. </section>
  71. </section>
  72. </section>
  73. </section>
  74. </section>
  75. </section>
  76. </section>
复制代码
样式效果3：
  1. <section style="display: flex; align-items: center; margin: 10px auto;">
  2. <section style="width: 100%;flex-shrink: 1;display: flex;align-items: center;max-width: 100% !important;box-sizing:border-box;" data-width="100%">
  3. <section style="width: 100%;border-top: 1px solid #47a6ff;max-width: 100% !important;box-sizing:border-box;" data-width="100%"></section>
  4. <section style="flex-shrink: 0;">
  5. <section style="width: 5px;height: 5px;border-radius: 100%;background-color: #47a6ff;box-sizing:border-box;"></section>
  6. </section>
  7. </section>
  8. <section style="flex-shrink: 0;padding: 0 2px;box-sizing:border-box;">
  9. <section class="assistant" style="width: 30px;box-sizing:border-box;">
  10. <img class="assistant" style="width: 100%; display: block;vertical-align:inherit;box-sizing:border-box;max-width: 100% !important;" src="/upimages/d327.png" data-width="100%" draggable="false" data-ratio="0.6595744680851063" data-w="47"/>
  11. </section>
  12. </section>
  13. <section style="width: 100%;flex-shrink: 1;display: flex;align-items: center;max-width: 100% !important;box-sizing:border-box;" data-width="100%">
  14. <section style="flex-shrink: 0;">
  15. <section style="width: 5px;height: 5px;border-radius: 100%;background-color: #47a6ff;box-sizing:border-box;"></section>
  16. </section>
  17. <section style="width: 100%;border-top: 1px solid #47a6ff;max-width: 100% !important;box-sizing:border-box;" data-width="100%"></section>
  18. </section>
  19. </section>
复制代码
样式效果4：
01
夏日小美好

夏季的夜慕，一直挂着美丽动人的颜色，有点儿低沉却带著烂漫。天上的云彩在朝霞的投射下，五彩缤纷，幽悠的艳丽着自身的漂亮。

02
夏日小美好

夏季的夜慕，一直挂着美丽动人的颜色，有点儿低沉却带著烂漫。天上的云彩在朝霞的投射下，五彩缤纷，幽悠的艳丽着自身的漂亮。

03
夏日小美好

夏季的夜慕，一直挂着美丽动人的颜色，有点儿低沉却带著烂漫。天上的云彩在朝霞的投射下，五彩缤纷，幽悠的艳丽着自身的漂亮。

  1. <section class="_135editor" data-tools="135编辑器" data-id="126868">
  2. <section style="margin: 10px auto;">
  3. <section class="box-edit" style="margin: 20px 0;">
  4. <section style="display: flex;justify-content: flex-start;margin: 0 0 -15px;">
  5. <section style="display: flex;justify-content: center;transform-style: preserve-3d">
  6. <section style="flex-shrink: 0;;transform: translateZ(10px);-webkit-transform: translateZ(10px);-moz-transform: translateZ(10px);-o-transform: translateZ(10px);">
  7. <section style="font-size: 16px;color: #ffffff;width: 32px;height: 32px;border-radius: 100%;background: linear-gradient(to right bottom,#ffe7bb,#ffdcd1);display: flex;justify-content: center;align-items: center;box-sizing:border-box;">
  8. <strong>0</strong><strong class="autonum" data-original-title="" title="">1</strong>
  9. </section>
  10. </section>
  11. <section style="margin: 12px 0 0 -15px;">
  12. <section style="font-size: 16px;color: #ffffff;background-color: #9ee1e5;padding: 4px 15px;box-sizing:border-box;">
  13. <strong class="135brush" data-brushtype="text">夏日小美好</strong>
  14. </section>
  15. </section>
  16. </section>
  17. </section>
  18. <section style="border: 1px solid #9ee1e5;padding: 25px 15px 10px;box-sizing:border-box;">
  19. <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;">
  20. <p>
  21. 夏季的夜慕，一直挂着美丽动人的颜色，有点儿低沉却带著烂漫。天上的云彩在朝霞的投射下，五彩缤纷，幽悠的艳丽着自身的漂亮。
  22. </p>
  23. </section>
  24. </section>
  25. </section>
  26. <section class="box-edit" style="margin: 20px 0;">
  27. <section style="display: flex;justify-content: flex-start;margin: 0 0 -15px;">
  28. <section style="display: flex;justify-content: center;transform-style: preserve-3d">
  29. <section style="flex-shrink: 0;;transform: translateZ(10px);-webkit-transform: translateZ(10px);-moz-transform: translateZ(10px);-o-transform: translateZ(10px);">
  30. <section style="font-size: 16px;color: #ffffff;width: 32px;height: 32px;border-radius: 100%;background: linear-gradient(to right bottom,#ffe7bb,#ffdcd1);display: flex;justify-content: center;align-items: center;box-sizing:border-box;">
  31. <strong>0</strong><strong class="autonum" data-original-title="" title="">2</strong>
  32. </section>
  33. </section>
  34. <section style="margin: 12px 0 0 -15px;">
  35. <section style="font-size: 16px;color: #ffffff;background-color: #9ee1e5;padding: 4px 15px;box-sizing:border-box;">
  36. <strong class="135brush" data-brushtype="text">夏日小美好</strong>
  37. </section>
  38. </section>
  39. </section>
  40. </section>
  41. <section style="border: 1px solid #9ee1e5;padding: 25px 15px 10px;box-sizing:border-box;">
  42. <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;">
  43. <p>
  44. 夏季的夜慕，一直挂着美丽动人的颜色，有点儿低沉却带著烂漫。天上的云彩在朝霞的投射下，五彩缤纷，幽悠的艳丽着自身的漂亮。
  45. </p>
  46. </section>
  47. </section>
  48. </section>
  49. <section class="box-edit" style="margin: 20px 0;">
  50. <section style="display: flex;justify-content: flex-start;margin: 0 0 -15px;">
  51. <section style="display: flex;justify-content: center;transform-style: preserve-3d">
  52. <section style="flex-shrink: 0;;transform: translateZ(10px);-webkit-transform: translateZ(10px);-moz-transform: translateZ(10px);-o-transform: translateZ(10px);">
  53. <section style="font-size: 16px;color: #ffffff;width: 32px;height: 32px;border-radius: 100%;background: linear-gradient(to right bottom,#ffe7bb,#ffdcd1);display: flex;justify-content: center;align-items: center;box-sizing:border-box;">
  54. <strong>0</strong><strong class="autonum" data-original-title="" title="">3</strong>
  55. </section>
  56. </section>
  57. <section style="margin: 12px 0 0 -15px;">
  58. <section style="font-size: 16px;color: #ffffff;background-color: #9ee1e5;padding: 4px 15px;box-sizing:border-box;">
  59. <strong class="135brush" data-brushtype="text">夏日小美好</strong>
  60. </section>
  61. </section>
  62. </section>
  63. </section>
  64. <section style="border: 1px solid #9ee1e5;padding: 25px 15px 10px;box-sizing:border-box;">
  65. <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;">
  66. <p>
  67. 夏季的夜慕，一直挂着美丽动人的颜色，有点儿低沉却带著烂漫。天上的云彩在朝霞的投射下，五彩缤纷，幽悠的艳丽着自身的漂亮。
  68. </p>
  69. </section>
  70. </section>
  71. </section>
  72. </section>
  73. </section>
复制代码
样式效果5：
01
奋进新征程

此次会议顺利召开是我们党进入全面建设社会主义现代化国家、向第二个百年奋斗目标进军新征程的重要时刻召开的一次十分重要的代表大会，是党和国家政治生活中的一件大事。

  1. <section style="margin: 10px auto;">
  2. <section style="border: 1px solid #ffcd45;box-sizing:border-box;">
  3. <section style="display: flex;justify-content: space-between;background-color: #fff8e8;padding: 0 10px 0 0;border-bottom: 1px solid #ffcd45;box-sizing:border-box;">
  4. <section style="display: flex;">
  5. <section style="font-size: 16px;letter-spacing: 1.5px;color: #fae8bb;background-color: #de3716;width: 30px;height: 30px;text-align: center;line-height: 30px;box-sizing:border-box;">
  6. <strong>0</strong><strong class="autonum" data-original-title="" title="">1</strong>
  7. </section>
  8. <section style="font-size: 16px;color: #de3716;text-align: right;padding: 0 10px;height: 30px;line-height: 30px;box-sizing:border-box;">
  9. <strong class="135brush" data-brushtype="text">奋进新征程</strong>
  10. </section>
  11. </section>
  12. <section class="assistant" style="width: 25px;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="/upimages/54.png" data-width="100%" draggable="false" data-ratio="0.9705882352941176" data-w="34"/>
  14. </section>
  15. </section>
  16. <section style="background-color: #ffffff;padding: 10px;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:#825c3b;background: transparent;">
  18. <p style="vertical-align:inherit;">
  19. 此次会议顺利召开是我们党进入全面建设社会主义现代化国家、向第二个百年奋斗目标进军新征程的重要时刻召开的一次十分重要的代表大会，是党和国家政治生活中的一件大事。
  20. </p>
  21. </section>
  22. </section>
  23. </section>
  24. </section>
  25. <section class="_135editor" data-role="paragraph">
  26. </section>
复制代码
样式效果6：
· 砥砺前行 共创未来 ·

在两会的重要议题上，代表委员能拿出契合实际情况的真知灼见，明晰发展前景。比如，面对严峻挑战，要进一步做好工作，落实任务，化风险为机遇；要针对“难啃的硬骨头”精准施策解决问题，推进国家发展的进行。

  1. <section class="_135editor" data-tools="135编辑器" data-id="123501">
  2. <section style="margin: 10px auto; padding: 5px 0px 0px;box-sizing:border-box;" class="">
  3. <section style="display: flex;justify-content: center;margin: 0 0 -15px;" class="">
  4. <section>
  5. <section style="border-radius: 25px;background-color: #ffc14a;box-sizing:border-box;">
  6. <section style="font-size: 16px;color: #ffffff;text-align: center;background-color: #da2222;border-radius: 25px;padding: 3px 10px;box-sizing:border-box;transform: translate(-5px,-5px);-webkit-transform: translate(-5px,-5px);-moz-transform: translate(-5px,-5px);-o-transform: translate(-5px,-5px);">
  7. <strong class="135brush" data-brushtype="text">· 砥砺前行 共创未来 ·</strong>
  8. </section>
  9. </section>
  10. </section>
  11. </section>
  12. <section style="border: 1px solid #da2222;border-radius: 10px;padding: 30px 10px 15px;box-sizing:border-box;" class="">
  13. <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;">
  14. <p>
  15. 在两会的重要议题上，代表委员能拿出契合实际情况的真知灼见，明晰发展前景。比如，面对严峻挑战，要进一步做好工作，落实任务，化风险为机遇；要针对“难啃的硬骨头”精准施策解决问题，推进国家发展的进行。
  16. </p>
  17. </section>
  18. </section>
  19. </section>
  20. </section>
复制代码
总结：
在135编辑器中，大多数样式可以直接引用到贴子内容页来美化页面；更多的样式请到[135编辑器]查看和编辑帖子时引用！
回复 支持 反对

使用道具 举报

admin

升级   100%

板凳
 楼主| 发表于 2023-7-6 08:52:17 | 只看该作者 来自 浙江
请捐赠 或赞助
-文钱难倒英雄汉-
-生活艰辛,感恩有您-
-乞行中国-
-需要您的帮助-
-乞行中国-请关注安知我网
-Anziwo.com-
附样式代码：
  1. <section style="text-align: center;margin: 10px auto;">
  2. <section style="display: flex;justify-content: flex-end;margin: 0 10% -10px 0;">
  3. <section class="assistant" style="width: 17px;box-sizing:border-box;">
  4. <img class="assistant" style="vertical-align:inherit;width: 100%; display: block;box-sizing:border-box;max-width: 100% !important;transform: rotateY(180deg);-webkit-transform: rotateY(180deg);-moz-transform: rotateY(180deg);-o-transform: rotateY(180deg);" src="/upimages/caomei.png" data-width="100%" draggable="false" data-ratio="1.0909090909090908" data-w="22"/>
  5. </section>
  6. </section>
  7. <section style="border: 1px dashed #ff7d7d;border-radius: 24px;padding: 4px;box-sizing:border-box;">
  8. <section style="background-color: #fee9e6;padding: 20px;border-radius: 20px;box-sizing:border-box;">
  9. <section style="display:flex;justify-content: space-between;align-items: center;">
  10. <section style="width: 33%;box-sizing:border-box;max-width: 33% !important;" data-width="33%">
  11. <section style="width: 100%;box-sizing:border-box;max-width: 100% !important;" data-width="100%">
  12. <img style="vertical-align:inherit;width: 100%; display: block;box-sizing:border-box;max-width: 100% !important;" src="/upimages/HuiZhifu.png" data-width="100%" draggable="false" data-ratio="1" data-w="114" data-op="change"/>
  13. </section>
  14. </section>
  15. <section style="width: 50%;box-sizing:border-box;max-width: 50% !important;" data-width="50%">
  16. <section style=";font-size: 14px;letter-spacing: 1px;color: #ef6165;line-height: 14px;transform: rotate(0deg);-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);">
  17. <strong class="135brush" data-brushtype="text">请捐赠 或赞助</strong>
  18. </section>
  19. <section style="display: flex;justify-content: center;margin-top: -25px;">
  20. <section class="assistant" style="width: 35px;height: 35px;background-color: #fff;border-radius: 50%;box-sizing:border-box;"></section>
  21. </section>
  22. <section class="135brush" data-brushtype="text" style="font-size: 12px;letter-spacing: 1.5px;color: #ef6165;line-height: 1.7em;margin-top: 3px;">
  23. -文钱难倒英雄汉-
  24. </section>
  25. <section class="135brush" data-brushtype="text" style="font-size: 12px;letter-spacing: 1.5px;color: #ef6165;line-height: 1.7em;">
  26. -生活艰辛,感恩有您-
  27. </section>
  28. <section class="135brush" data-brushtype="text" style="font-size: 12px;letter-spacing: 1.5px;color: #ef6165;line-height: 1.7em;">
  29. -乞行中国-
  30. </section>
  31. <section class="135brush" data-brushtype="text" style="font-size: 12px;letter-spacing: 1.5px;color: #ef6165;line-height: 1.7em;">
  32. -需要您的帮助-
  33. </section>
  34. <section class="135brush" data-brushtype="text" style="font-size: 12px;letter-spacing: 1.5px;color: #ef6165;line-height: 1.7em;">
  35. -乞行中国-请关注安知我网
  36. </section>
  37. <section class="135brush" data-brushtype="text" style="font-size: 12px;letter-spacing: 1.5px;color: #ef6165;line-height: 1.7em;">
  38. -[url=http://Anziwo.com]Anziwo.com[/url]-
  39. </section>
  40. </section>
  41. </section>
  42. </section>
  43. </section>
  44. </section>
复制代码
文字块的样式1：

你想知道我对你的爱情是什么吗 ?就是从心底里喜欢你，觉得你的一举一动都很亲切，不高兴你比喜欢我更喜欢别人 。你要是喜欢别人我会哭，但是还是喜欢你 。——《爱你就像爱生命》

  2. <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;">
  3. <p>
  4. 你想知道我对你的爱情是什么吗 ?就是从心底里喜欢你，觉得你的一举一动都很亲切，不高兴你比喜欢我更喜欢别人 。你要是喜欢别人我会哭，但是还是喜欢你 。——《爱你就像爱生命》
  5. </p>
  6. </section>
复制代码
文字块的样式2：

腊八节，即每年农历十二月初八，又称为“法宝节”“佛成道节”“成道会”等。本为佛教纪念释迦牟尼佛成道之节日，后逐渐也成为民间节日。

  2. <section style="margin: 10px auto;">
  3. <section style="display: flex;justify-content: space-between;align-items: flex-end;">
  4. <section style="flex-shrink: 0;">
  5. <section style="width: 6px;height: 6px;border: 1px solid #fab367;box-sizing:border-box;"></section>
  6. </section>
  7. <section style="flex-shrink: 0;">
  8. <section style="width: 6px;height: 6px;border: 1px solid #fab367;box-sizing:border-box;"></section>
  9. </section>
  10. </section>
  11. <section style="padding: 15px 10px;border: 1px solid #fab367;margin: -1px 5px;box-sizing:border-box;">
  12. <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;">
  13. <p>
  14. 腊八节，即每年农历十二月初八，又称为“法宝节”“佛成道节”“成道会”等。本为佛教纪念释迦牟尼佛成道之节日，后逐渐也成为民间节日。
  15. </p>
  16. </section>
  17. </section>
  18. <section style="display: flex;justify-content: space-between;align-items: flex-end;">
  19. <section style="flex-shrink: 0;">
  20. <section style="width: 6px;height: 6px;border: 1px solid #fab367;box-sizing:border-box;"></section>
  21. </section>
  22. <section style="flex-shrink: 0;">
  23. <section style="width: 6px;height: 6px;border: 1px solid #fab367;box-sizing:border-box;"></section>
  24. </section>
  25. </section>
  26. </section>
复制代码
文字块的样式3：
万圣狂欢趴

欢乐谷万圣欢乐节百鬼夜宴震撼来袭。如果你够胆量，那就快来挑战“百鬼”夜行的惊悚万圣夜吧！保你拥有一个难忘的节日体验！

  2. <section style="margin: 10px auto; transform-style: preserve-3d; padding: 4px 0px 0px;box-sizing:border-box;">
  3. <section style="padding: 0 8px;box-sizing:border-box;transform: translateZ(10px);-webkit-transform: translateZ(10px);-moz-transform: translateZ(10px);-o-transform: translateZ(10px);">
  4. <section style="background-color: #fff9f2;">
  5. <section style="margin: 10px auto;display: flex;justify-content: space-between;align-items: center;">
  6. <section style="transform-style: preserve-3d;flex-shrink: 0;padding: 0 10px 0 0;box-sizing:border-box;transform: translateY(-13px);-webkit-transform: translateY(-13px);-moz-transform: translateY(-13px);-o-transform: translateY(-13px);">
  7. <section style="display: flex;justify-content: space-between;align-items: center;margin: 0 0 -13px 0;transform: translateZ(5px);transform: translateZ(5px);-webkit-transform: translateZ(5px);-moz-transform: translateZ(5px);-o-transform: translateZ(5px);">
  8. <section style="width:26px;height:26px;border-radius: 100%;background-color: #3b1a13;box-sizing:border-box;"></section>
  9. <section style="width:26px;height:26px;border-radius: 100%;background-color: #3b1a13;box-sizing:border-box;"></section>
  10. <section style="width:26px;height:26px;border-radius: 100%;background-color: #3b1a13;box-sizing:border-box;"></section>
  11. <section style="width:26px;height:26px;border-radius: 100%;background-color: #3b1a13;box-sizing:border-box;"></section>
  12. </section>
  13. <section style="font-size: 16px;color: #ffb900;text-align: center;background-color: #3b1a13;padding: 3px 15px 7px;border-radius: 0 0 5px 5px;box-sizing:border-box;transform: translateZ(5px);-webkit-transform: translateZ(5px);-moz-transform: translateZ(5px);-o-transform: translateZ(5px);">
  14. <strong class="135brush" data-brushtype="text">万圣狂欢趴</strong>
  15. </section>
  16. </section>
  17. <section style="max-width: 100% !important;width: 100%;height: 1px;background-color: #ffc100;box-sizing:border-box;" data-width="100%"></section>
  18. </section>
  19. <section style="padding: 0 15px 25px;box-sizing:border-box;">
  20. <section data-autoskip="1" class="135brush" style="text-align: justify;line-height:1.75em;letter-spacing: 1.5px;font-size:14px;color:#3b1a13;background: transparent;">
  21. <p>
  22. 欢乐谷万圣欢乐节百鬼夜宴震撼来袭。如果你够胆量，那就快来挑战“百鬼”夜行的惊悚万圣夜吧！保你拥有一个难忘的节日体验！
  23. </p>
  24. </section>
  25. </section>
  26. </section>
  27. </section>
  28. <section style="margin: -12px 0 0 0;transform: translateZ(5px);transform: translateZ(5px);-webkit-transform: translateZ(5px);-moz-transform: translateZ(5px);-o-transform: translateZ(5px);">
  29. <section style="max-width: 100% !important;width: 100%;height: 20px;background-color: #ffc100;box-sizing:border-box;" data-width="100%"></section>
  30. </section>
  31. </section>
复制代码
回复 支持 反对

使用道具 举报

admin

升级   100%

地板
 楼主| 发表于 2023-7-6 09:10:53 | 只看该作者 来自 浙江
图文混排样式1：
奋斗百年路
01
学习红色精神

回首过往，红船精神、井冈山精神、长征精神、延安精神、西柏坡精神……我们党百年光辉历史里镌刻的红色精神熠熠生辉，广大党员干部要切实把党史作为必修课。

  1. <section class="_135editor" data-tools="135编辑器" data-id="128856">
  2. <section style="margin: 10px auto;">
  3. <section style="border: 1px solid #ffe8c2;background-color: #ffffff;margin: 0 0 0 5px;box-sizing:border-box;">
  4. <section style="border: 1px solid #ffe8c2;background-color: #fffbf3;padding: 0px 12px 12px;box-sizing:border-box;transform: translate(-5px,-5px);-webkit-transform: translate(-5px,-5px);-moz-transform: translate(-5px,-5px);-o-transform: translate(-5px,-5px);">
  5. <section style="display: flex;justify-content: center;transform: translateY(-9px);-webkit-transform: translateY(-9px);-moz-transform: translateY(-9px);-o-transform: translateY(-9px);">
  6. <section style="flex-shrink: 0;">
  7. <section style="width: 22px;box-sizing:border-box;">
  8. <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 39.81 54" style="display: block;" xml:space="default">
  9. <path style="fill: #c22305;fill-rule: evenodd;" d="M2402,4103l4,15h-19Z" transform="translate(-2387 -4103)"></path>
  10. <path style="fill: #d53a1c;fill-rule: evenodd;" d="M2402,4103h24.8c0,34.25-.11,54-0.11,54-8.11,0-12.18-6.41-14.69-16Z" transform="translate(-2387 -4103)"></path>
  11. </svg>
  12. </section>
  13. </section>
  14. <section style="font-size: 16px;color: #ffffff;background-color: #d53a1c;padding: 0px 20px;box-sizing:border-box;display: flex;align-items: center;margin: 0 -1px;">
  15. <strong class="135brush" data-brushtype="text">奋斗百年路</strong>
  16. </section>
  17. <section style="flex-shrink: 0;">
  18. <section style="width: 22px;box-sizing:border-box;">
  19. <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 39.81 54" style="display: block;transform: rotateY(180deg);-webkit-transform: rotateY(180deg);-moz-transform: rotateY(180deg);-o-transform: rotateY(180deg);" xml:space="default">
  20. <path style="fill: #c22305;fill-rule: evenodd;" d="M2402,4103l4,15h-19Z" transform="translate(-2387 -4103)"></path>
  21. <path style="fill: #d53a1c;fill-rule: evenodd;" d="M2402,4103h24.8c0,34.25-.11,54-0.11,54-8.11,0-12.18-6.41-14.69-16Z" transform="translate(-2387 -4103)"></path>
  22. </svg>
  23. </section>
  24. </section>
  25. </section>
  26. <section style="display: flex;justify-content: flex-start;align-items: center;">
  27. <section style="display: flex;justify-content: flex-start;flex-shrink: 0;">
  28. <section style="font-size: 16px;letter-spacing: 1.5px;color: #ffffff;background-color: #ffd952;display: flex;align-items: center;justify-content: center;padding: 0 0 0 4px;box-sizing:border-box;">
  29. <strong>0</strong><strong class="autonum" data-original-title="" title="">1</strong>
  30. </section>
  31. <section style="flex-shrink: 0;">
  32. <section style="width: 0px;height: 1px;border-top: 25px solid #ffd952;border-right: 7px solid transparent;box-sizing:border-box;"></section>
  33. </section>
  34. </section>
  35. <section style="font-size: 14px;color: #333333;text-align: center;padding:0 4px;box-sizing:border-box;">
  36. <strong class="135brush" data-brushtype="text">学习红色精神</strong>
  37. </section>
  38. </section>
  39. <section style="padding: 5px 0 5px;box-sizing:border-box;">
  40. <section style="width: 100%;max-width: 100% !important;box-sizing:border-box;" data-width="100%">
  41. <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/154705c0407cbecf77126389b0836ca4.png" data-width="100%" draggable="false" data-ratio="0.6111111111111112" data-w="540"/>
  42. </section>
  43. </section>
  44. <section>
  45. <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;">
  46. <p>
  47. 回首过往，红船精神、井冈山精神、长征精神、延安精神、西柏坡精神……我们党百年光辉历史里镌刻的红色精神熠熠生辉，广大党员干部要切实把党史作为必修课。
  48. </p>
  49. </section>
  50. </section>
  51. </section>
  52. </section>
  53. </section>
  54. </section>
复制代码
图文混排样式2：
不忘初心 砥砺前行

“人心是最大的政治”。得人心，就能无惧前行道路上的风险挑战，汇聚起磅礴的奋进力量。瓜连蔓子蔓连根。在长期艰苦的革命岁月，我们党始终与人民心连心，坚持一切为了人民、一切依靠人民。

  1. <section class="_135editor" data-tools="135编辑器" data-id="128842">
  2. <section style="margin: 10px auto;">
  3. <section style="width: 100%;height: 2px;border-top: 1px solid #d53a1c;max-width: 100% !important;box-sizing:border-box;" data-width="100%"></section>
  4. <section style="display: flex;justify-content: flex-start;background-color: #ffd952;">
  5. <section style="display: flex;justify-content: center;flex-shrink: 0;">
  6. <section style="font-size: 14px;color: #ffffff;background-color: #d53a1c;display: flex;align-items: center;padding: 0 10px;box-sizing:border-box;">
  7. <strong class="135brush" data-brushtype="text">不忘初心 砥砺前行</strong>
  8. </section>
  9. <section style="flex-shrink: 0;display: flex;align-items: center;">
  10. <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>
  11. <section style="width: 5px;height: 30px;background-color: #fffffe;margin: 0 0 0 -10px;box-sizing:border-box;"></section>
  12. <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>
  13. </section>
  14. </section>
  15. </section>
  16. <section style="background-color: #fffbf3;padding: 0 14px 14px;box-sizing:border-box;">
  17. <section style="padding: 5px 0;box-sizing:border-box;">
  18. <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;">
  19. <p>
  20. “人心是最大的政治”。得人心，就能无惧前行道路上的风险挑战，汇聚起磅礴的奋进力量。瓜连蔓子蔓连根。在长期艰苦的革命岁月，我们党始终与人民心连心，坚持一切为了人民、一切依靠人民。
  21. </p>
  22. </section>
  23. </section>
  24. <section style="width: 100%;max-width: 100% !important;box-sizing:border-box;" data-width="100%">
  25. <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/934f62297ea559adb83f1c2087844e2d.png" data-width="100%" draggable="false" data-ratio="0.5833333333333334" data-w="540"/>
  26. </section>
  27. </section>
  28. </section>
  29. </section>
复制代码
图文混排样式3：
  1. <section class="_135editor" data-tools="135编辑器" data-id="128723">
  2. <section style="margin: 10px auto;">
  3. <section style="background-color: #fdd149;border-radius: 7px 7px 0 0;box-sizing:border-box;">
  4. <section style="display: flex;justify-content: space-around;transform: translateY(-6px);-webkit-transform: translateY(-6px);-moz-transform: translateY(-6px);-o-transform: translateY(-6px);">
  5. <section style="transform-style: preserve-3d">
  6. <section style="width: 5px;height: 20px;background-color: #ff9f22;margin: 0 auto;border-radius: 5px;box-sizing:border-box;transform: translateZ(10px);-webkit-transform: translateZ(10px);-moz-transform: translateZ(10px);-o-transform: translateZ(10px);"></section>
  7. <section style="width: 9px;height: 9px;border-radius: 100%;background-color: #ffffff;margin: -7px auto 0;box-sizing:border-box;"></section>
  8. </section>
  9. <section style="transform-style: preserve-3d">
  10. <section style="width: 5px;height: 20px;background-color: #ff9f22;margin: 0 auto;border-radius: 5px;box-sizing:border-box;transform: translateZ(10px);-webkit-transform: translateZ(10px);-moz-transform: translateZ(10px);-o-transform: translateZ(10px);"></section>
  11. <section style="width: 9px;height: 9px;border-radius: 100%;background-color: #ffffff;margin: -7px auto 0;box-sizing:border-box;"></section>
  12. </section>
  13. <section style="transform-style: preserve-3d">
  14. <section style="width: 5px;height: 20px;background-color: #ff9f22;margin: 0 auto;border-radius: 5px;box-sizing:border-box;transform: translateZ(10px);-webkit-transform: translateZ(10px);-moz-transform: translateZ(10px);-o-transform: translateZ(10px);"></section>
  15. <section style="width: 9px;height: 9px;border-radius: 100%;background-color: #ffffff;margin: -7px auto 0;box-sizing:border-box;"></section>
  16. </section>
  17. <section style="transform-style: preserve-3d">
  18. <section style="width: 5px;height: 20px;background-color: #ff9f22;margin: 0 auto;border-radius: 5px;box-sizing:border-box;transform: translateZ(10px);-webkit-transform: translateZ(10px);-moz-transform: translateZ(10px);-o-transform: translateZ(10px);"></section>
  19. <section style="width: 9px;height: 9px;border-radius: 100%;background-color: #ffffff;margin: -7px auto 0;box-sizing:border-box;"></section>
  20. </section>
  21. <section style="transform-style: preserve-3d">
  22. <section style="width: 5px;height: 20px;background-color: #ff9f22;margin: 0 auto;border-radius: 5px;box-sizing:border-box;transform: translateZ(10px);-webkit-transform: translateZ(10px);-moz-transform: translateZ(10px);-o-transform: translateZ(10px);"></section>
  23. <section style="width: 9px;height: 9px;border-radius: 100%;background-color: #ffffff;margin: -7px auto 0;box-sizing:border-box;"></section>
  24. </section>
  25. <section style="transform-style: preserve-3d">
  26. <section style="width: 5px;height: 20px;background-color: #ff9f22;margin: 0 auto;border-radius: 5px;box-sizing:border-box;transform: translateZ(10px);-webkit-transform: translateZ(10px);-moz-transform: translateZ(10px);-o-transform: translateZ(10px);"></section>
  27. <section style="width: 9px;height: 9px;border-radius: 100%;background-color: #ffffff;margin: -7px auto 0;box-sizing:border-box;"></section>
  28. </section>
  29. <section style="transform-style: preserve-3d">
  30. <section style="width: 5px;height: 20px;background-color: #ff9f22;margin: 0 auto;border-radius: 5px;box-sizing:border-box;transform: translateZ(10px);-webkit-transform: translateZ(10px);-moz-transform: translateZ(10px);-o-transform: translateZ(10px);"></section>
  31. <section style="width: 9px;height: 9px;border-radius: 100%;background-color: #ffffff;margin: -7px auto 0;box-sizing:border-box;"></section>
  32. </section>
  33. </section>
  34. </section>
  35. <section style="background-color: #f2f9ff;padding: 5px;box-sizing:border-box;">
  36. <section style="width: 100%;max-width: 100% !important;box-sizing:border-box;" data-width="100%">
  37. <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/3f1ece885df567475177255587bb1a1c.png" data-width="100%" draggable="false" data-ratio="0.5833333333333334" data-w="540"/>
  38. </section>
  39. </section>
  40. </section>
  41. </section>
复制代码
回复 支持 反对

使用道具 举报

admin

升级   100%

5#
 楼主| 发表于 2023-7-6 09:36:45 | 只看该作者 来自 浙江
列表样式：
STEP 01
全场低至三折

年中促销旺季即将来临！是时候奖励辛劳的自己一份礼物买买买可以释放快乐而钜惠福利使快乐加倍！这个618，让我们一起分享快乐！

STEP 02
全场低至三折

年中促销旺季即将来临！是时候奖励辛劳的自己一份礼物买买买可以释放快乐而钜惠福利使快乐加倍！这个618，让我们一起分享快乐！

STEP 03
全场低至三折

年中促销旺季即将来临！是时候奖励辛劳的自己一份礼物买买买可以释放快乐而钜惠福利使快乐加倍！这个618，让我们一起分享快乐！

  1. <section class="_135editor" data-tools="135编辑器" data-id="128001">
  2. <section style="margin: 10px auto;">
  3. <section class="box-edit">
  4. <section style="display: flex;">
  5. <section style="width: 100%;max-width: 100% !important;box-sizing:border-box;" data-width="100%">
  6. <section style="display: flex;">
  7. <section style="flex-shrink: 0;z-index: 1;">
  8. <section style="font-size: 16px;letter-spacing: 1.5px;color: #ffffff;background-color: #757ae4;border-radius: 5px;padding: 4px 7px;box-sizing:border-box;">
  9. <strong class="135brush" data-brushtype="text">STEP </strong><strong>0</strong><strong class="autonum" data-original-title="" title="" data-num="2">1</strong>
  10. </section>
  11. </section>
  12. <section style="background-color: #fece2a;width: 100%;border-radius:0 5px 5px 0;margin: 0 0 0 -5px;max-width: 100% !important;box-sizing:border-box;" data-width="100%">
  13. <section style="font-size: 16px;letter-spacing: 1.5px;color: #202020;padding: 4px 10px 4px 15px;box-sizing:border-box;">
  14. <strong class="135brush" data-brushtype="text">全场低至三折</strong>
  15. </section>
  16. </section>
  17. </section>
  18. <section style="padding: 10px 0 15px;box-sizing:border-box;">
  19. <section data-autoskip="1" class="135brush" style="text-align: justify;line-height:1.75em;letter-spacing: 1.5px;font-size:14px;color:#303030;background-color: transparent;">
  20. <p>
  21. 年中促销旺季即将来临！是时候奖励辛劳的自己一份礼物买买买可以释放快乐而钜惠福利使快乐加倍！这个618，让我们一起分享快乐！
  22. </p>
  23. </section>
  24. </section>
  25. </section>
  26. <section style="flex-shrink: 0;margin: -8px 0 0 -20px;">
  27. <section class="assistant" style="width: 10px;box-sizing:border-box;">
  28. <img class="assistant" 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/c384e9d693066c4f7e6786c110f12a1f.png" data-width="100%" draggable="false"/>
  29. </section>
  30. </section>
  31. </section>
  32. </section>
  33. <section class="box-edit">
  34. <section style="display: flex;">
  35. <section style="width: 100%;max-width: 100% !important;box-sizing:border-box;" data-width="100%">
  36. <section style="display: flex;">
  37. <section style="flex-shrink: 0;z-index: 1;">
  38. <section style="font-size: 16px;letter-spacing: 1.5px;color: #ffffff;background-color: #757ae4;border-radius: 5px;padding: 4px 7px;box-sizing:border-box;">
  39. <strong class="135brush" data-brushtype="text">STEP </strong><strong>0</strong><strong class="autonum" data-original-title="" title="" data-num="3">2</strong>
  40. </section>
  41. </section>
  42. <section style="background-color: #fece2a;width: 100%;border-radius:0 5px 5px 0;margin: 0 0 0 -5px;max-width: 100% !important;box-sizing:border-box;" data-width="100%">
  43. <section style="font-size: 16px;letter-spacing: 1.5px;color: #202020;padding: 4px 10px 4px 15px;box-sizing:border-box;">
  44. <strong class="135brush" data-brushtype="text">全场低至三折</strong>
  45. </section>
  46. </section>
  47. </section>
  48. <section style="padding: 10px 0 15px;box-sizing:border-box;">
  49. <section data-autoskip="1" class="135brush" style="text-align: justify;line-height:1.75em;letter-spacing: 1.5px;font-size:14px;color:#303030;background-color: transparent;">
  50. <p>
  51. 年中促销旺季即将来临！是时候奖励辛劳的自己一份礼物买买买可以释放快乐而钜惠福利使快乐加倍！这个618，让我们一起分享快乐！
  52. </p>
  53. </section>
  54. </section>
  55. </section>
  56. <section style="flex-shrink: 0;margin: -8px 0 0 -20px;">
  57. <section class="assistant" style="width: 10px;box-sizing:border-box;">
  58. <img class="assistant" 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/c384e9d693066c4f7e6786c110f12a1f.png" data-width="100%" draggable="false"/>
  59. </section>
  60. </section>
  61. </section>
  62. </section>
  63. <section class="box-edit">
  64. <section style="display: flex;">
  65. <section style="width: 100%;max-width: 100% !important;box-sizing:border-box;" data-width="100%">
  66. <section style="display: flex;">
  67. <section style="flex-shrink: 0;z-index: 1;">
  68. <section style="font-size: 16px;letter-spacing: 1.5px;color: #ffffff;background-color: #757ae4;border-radius: 5px;padding: 4px 7px;box-sizing:border-box;">
  69. <strong class="135brush" data-brushtype="text">STEP </strong><strong>0</strong><strong class="autonum" data-original-title="" title="" data-num="4">3</strong>
  70. </section>
  71. </section>
  72. <section style="background-color: #fece2a;width: 100%;border-radius:0 5px 5px 0;margin: 0 0 0 -5px;max-width: 100% !important;box-sizing:border-box;" data-width="100%">
  73. <section style="font-size: 16px;letter-spacing: 1.5px;color: #202020;padding: 4px 10px 4px 15px;box-sizing:border-box;">
  74. <strong class="135brush" data-brushtype="text">全场低至三折</strong>
  75. </section>
  76. </section>
  77. </section>
  78. <section style="padding: 10px 0 15px;box-sizing:border-box;">
  79. <section data-autoskip="1" class="135brush" style="text-align: justify;line-height:1.75em;letter-spacing: 1.5px;font-size:14px;color:#303030;background-color: transparent;">
  80. <p>
  81. 年中促销旺季即将来临！是时候奖励辛劳的自己一份礼物买买买可以释放快乐而钜惠福利使快乐加倍！这个618，让我们一起分享快乐！
  82. </p>
  83. </section>
  84. </section>
  85. </section>
  86. <section style="flex-shrink: 0;margin: -8px 0 0 -20px;">
  87. <section class="assistant" style="width: 10px;box-sizing:border-box;">
  88. <img class="assistant" 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/c384e9d693066c4f7e6786c110f12a1f.png" data-width="100%" draggable="false"/>
  89. </section>
  90. </section>
  91. </section>
  92. </section>
  93. </section>
  94. </section>
复制代码
回复 支持 反对

使用道具 举报

admin

升级   100%

6#
 楼主| 发表于 2023-7-6 15:17:07 | 只看该作者 来自 浙江
贴子内可随时引用的代码和样式:
-乞行中国-旅行笔记
TRAVELER'S NOTEBOOK
  1. <section style="margin: 20px auto; width: 100%;box-sizing:border-box;max-width: 100% !important;" data-width="100%">
  2. <section style="border: 1px solid #cee7fd;border-radius: 5px;box-sizing:border-box;">
  3. <section style="display: flex;justify-content: space-between;">
  4. <section style="font-size: 16px;color: #ff96a2;text-align: left;padding: 5px;box-sizing:border-box;">
  5. <strong class="135brush" data-brushtype="text">-乞行中国-旅行笔记</strong>
  6. </section>
  7. <section style="margin: -3px 0 0 0;">
  8. <section class="assistant" style="width: 40px;box-sizing:border-box;">
  9. <img class="assistant" style="vertical-align:inherit;width: 100%; display: block;box-sizing:border-box;max-width: 100% !important;" src="/upimages/g5n.png" data-width="100%" draggable="false" data-ratio="0.6162790697674418" data-w="86"/>
  10. </section>
  11. </section>
  12. </section>
  13. <section style="font-size: 14px;color: #6ab6fe;text-align: left;border-top: 1px dashed;margin: 0 5px;padding: 5px 0;box-sizing:border-box;">
  14. <strong class="135brush" data-brushtype="text">TRAVELER&#39;S NOTEBOOK</strong>
  15. </section>
  16. </section>
  17. </section>
复制代码
回复 支持 反对

使用道具 举报

admin

升级   100%

7#
 楼主| 发表于 2023-7-6 15:37:00 | 只看该作者 来自 浙江
帖子内可随时引用的样式和代码：
--乞行中国--公开分享收藏的各类古本资料电子版，有需要的在发贴有效期内可直接下载，如过下载期，请以帖子底部的金钱数来购买，金钱可自行充值或联系站长购买；金钱的获得规则请查看当前版块说明。
  1. <section style="text-align: center; padding: 1em 0px;box-sizing:border-box;">
  2. <section style="display:inline-block;">
  3. <section data-bcless="spin" data-bclessp="280" style="border: 1px solid #591312;border-radius:3px;background: #ecd493;color:#5e140f;box-sizing:border-box;">
  4. <section style="padding: 2px;box-sizing:border-box;">
  5. <section data-bcless="spin" data-bclessp="280" style="border: 1px solid #591312;border-radius:3px;box-sizing:border-box;">
  6. <section style="display: flex;justify-content: space-between;align-items: flex-end;">
  7. <section style="width: 10px;box-sizing:border-box;">
  8. <img class="assistant" style="vertical-align:inherit;width: 100%;display: block;box-sizing:border-box;max-width: 100% !important;" src="/upimages/jiao0001.png" data-width="100%" draggable="false" data-ratio="1" data-w="11"/>
  9. </section>
  10. <section style="width: 10px;box-sizing:border-box;">
  11. <img class="assistant" style="vertical-align:inherit;width: 100%;display: block;box-sizing:border-box;max-width: 100% !important;transform: scaleX(-1);-webkit-transform: scaleX(-1);-moz-transform: scaleX(-1);-o-transform: scaleX(-1);" src="/upimages/jiao0001.png" data-width="100%" draggable="false" data-ratio="1" data-w="11"/>
  12. </section>
  13. </section>
  14. <section class="135brush" data-autoskip="1" style="padding:1em;font-size: 15px;letter-spacing: 1px;text-align: justify;box-sizing:border-box;">
  15. --乞行中国--公开分享收藏的各类古本资料电子版，有需要的在发贴有效期内可直接下载，如过下载期，请以帖子底部的金钱数来购买，金钱可自行充值或联系站长购买；金钱的获得规则请查看当前版块说明。
  16. </section>
  17. <section style="display: flex;justify-content: space-between;align-items: flex-end;transform: scaleY(-1);-webkit-transform: scaleY(-1);-moz-transform: scaleY(-1);-o-transform: scaleY(-1);">
  18. <section style="width: 10px;box-sizing:border-box;">
  19. <img class="assistant" style="vertical-align:inherit;width: 100%;display: block;box-sizing:border-box;max-width: 100% !important;" src="/upimages/jiao0001.png" data-width="100%" draggable="false" data-ratio="1" data-w="11"/>
  20. </section>
  21. <section style="width: 10px;box-sizing:border-box;">
  22. <img class="assistant" style="vertical-align:inherit;width: 100%;display: block;box-sizing:border-box;max-width: 100% !important;transform: scaleX(-1);-webkit-transform: scaleX(-1);-moz-transform: scaleX(-1);-o-transform: scaleX(-1);" src="/upimages/jiao0001.png" data-width="100%" draggable="false" data-ratio="1" data-w="11"/>
  23. </section>
  24. </section>
  25. </section>
  26. </section>
  27. </section>
  28. </section>
  29. </section>
复制代码
回复 支持 反对

使用道具 举报

admin

升级   100%

8#
 楼主| 发表于 2023-7-6 15:48:39 | 只看该作者 来自 浙江
帖子内可随时引用的样式和代码：

宁静的时候，细细梳理太多太杂的思绪，思索生活的底蕴，在心中与自己恳谈，这时，心灵内有了感性与理性的充实，真实里又多了份从容。

  1. <section style="margin:10px auto;">
  2. <section class="assistant" style="display:flex;justify-content: space-between;align-items: center;transform: scaleY(-1);-webkit-transform: scaleY(-1);-moz-transform: scaleY(-1);-o-transform: scaleY(-1);">
  3. <section style="width:26px;box-sizing:border-box;">
  4. <img style="width: 100%; display: block; vertical-align: inherit;box-sizing:border-box;max-width: 100% !important;" src="/upimages/jiao0002.png" draggable="false" data-ratio="0.53125" data-w="32" width="100%" data-width="100%"/>
  5. </section>
  6. <section style="width:26px;box-sizing:border-box;">
  7. <img style="width:26px;display:block;vertical-align:inherit;box-sizing:border-box;" src="/upimages/jiao0002.png" draggable="false" data-ratio="0.53125" data-w="32"/>
  8. </section>
  9. </section>
  10. <section style="border:1px solid #643000;border-radius:10px;margin:0px 8px;padding:5px;box-sizing: border-box;margin-top:-8px;">
  11. <section data-autoskip="1" class="135brush" style="font-size: 14px;text-align: justify;letter-spacing: 1.5px;line-height: 1.75em;color:#663300;padding:1em;border:1px dashed #643000;border-radius:10px;box-sizing:border-box;">
  12. <p>
  13. 宁静的时候，细细梳理太多太杂的思绪，思索生活的底蕴，在心中与自己恳谈，这时，心灵内有了感性与理性的充实，真实里又多了份从容。
  14. </p>
  15. </section>
  16. </section>
  17. <section class="assistant" style="display:flex;justify-content: space-between;align-items: center;margin-top:-8px;">
  18. <section style="width:26px;box-sizing:border-box;">
  19. <img style="width:26px;display:block;vertical-align:inherit;box-sizing:border-box;" src="/upimages/jiao0002.png" draggable="false" data-ratio="0.53125" data-w="32"/>
  20. </section>
  21. <section style="width:26px;box-sizing:border-box;">
  22. <img style="width:26px;display:block;vertical-align:inherit;box-sizing:border-box;" src="/upimages/jiao0003.png" draggable="false" data-ratio="0.53125" data-w="32"/>
  23. </section>
  24. </section>
  25. </section>
复制代码
回复 支持 反对

使用道具 举报

admin

升级   100%

9#
 楼主| 发表于 2023-7-6 17:08:11 | 只看该作者 来自 浙江
帖子内可随时引用的样式和代码：
-乞行中国-旅途笔记

-乞行中国-人一生的生活历程艰辛得让人落泪，心情也有喜有悲；我们都在人间走一趟，如果有一天，我也走进您的生活，走进了您生活过的地方，请您笑着接待我，我会在此记录下您我生活过的这片地方，记录下这片地方上的人，物，事；记录下您我相识的影像！

  1. <section style="margin: 20px auto;">
  2. <section style="border-radius: 10px;box-sizing:border-box;">
  3. <section style="background-color: #d03428;border-radius: 10px 10px 0 0;padding: 10px 0;box-sizing:border-box;">
  4. <section style="display: flex;justify-content: center;align-items: center;">
  5. <section class="assistant" style="width: 22px;box-sizing:border-box;">
  6. <img class="assistant" style="vertical-align:inherit;width: 100%; display: block;box-sizing:border-box;max-width: 100% !important;" src="/upimages/m184.png" data-width="100%" draggable="false"/>
  7. </section>
  8. <section style="font-size: 16px;color: #ffffff;text-align: center;padding: 0 10px;box-sizing:border-box;">
  9. <strong class="135brush" data-brushtype="text">-乞行中国-旅途笔记</strong>
  10. </section>
  11. <section class="assistant" style="width: 22px;box-sizing:border-box;">
  12. <img class="assistant" style="vertical-align:inherit;width: 100%; display: block;box-sizing:border-box;max-width: 100% !important;" src="/upimages/m184.png" data-width="100%" draggable="false"/>
  13. </section>
  14. </section>
  15. </section>
  16. <section>
  17. <section style="padding: 15px;background-color: #52b2a6;box-sizing:border-box;">
  18. <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;">
  19. <p>
  20. <span style="font-size: 14px; letter-spacing: 1.5px; text-align: justify; color: #ffffff; display: inline !important;font-family: Tahoma, &quot;Microsoft Yahei&quot;, Simsun;">-乞行中国-人一生的生活历程艰辛得让人落泪，心情也有喜有悲；我们都在人间走一趟，如果有一天，我也走进您的生活，走进了您生活过的地方，请您笑着接待我，我会在此记录下您我生活过的这片地方，记录下这片地方上的人，物，事；记录下您我相识的影像！</span>
  21. </p>
  22. </section>
  23. </section>
  24. <section style="max-width: 100% !important;width: 100%;background: linear-gradient(to right,#52b2a6 0%,#52b2a6 50%,#ffdc62 50%,#ffdc62 100%);height: 2px;margin-top: 2px;box-sizing:border-box;" data-width="100%"></section>
  25. </section>
  26. </section>
  27. </section>
复制代码
回复 支持 反对

使用道具 举报

admin

升级   100%

10#
 楼主| 发表于 2023-7-6 17:14:41 | 只看该作者 来自 浙江
帖子内可随时引用的样式和代码：

腊八节，节期在每年农历十二月初八，主要习俗是“喝腊八粥”。腊八节是佛教盛大的节日之一。按佛教记载，释迦牟尼成道之前曾修苦行多年，形销骨立，遂发现苦行不是究竟解脱之道，决定放弃苦行。

  1. <section style="text-align: center;margin: 10px auto;">
  2. <section style="background-color: #fffdf8;padding: 6px;box-sizing:border-box;">
  3. <section style="display: flex;align-items: flex-start;">
  4. <section>
  5. <section style="display: flex;justify-content: center;align-items: flex-start;">
  6. <section class="assistant" style="width: 6px;height: 6px;border: 1px solid #b33929;box-sizing:border-box;"></section>
  7. <section class="assistant" style="width: 4px;height: 7px;background-color: #fff;box-sizing:border-box;"></section>
  8. <section class="assistant" style="width: 6px;height: 6px;border: 1px solid #b33929;box-sizing:border-box;"></section>
  9. </section>
  10. <section style="display: flex;justify-content: center;align-items: center;margin: -2px 0;transform: rotate(0deg);-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);">
  11. <section class="assistant" style="width: 5px;height: 4px;background-color: #fff;box-sizing:border-box;"></section>
  12. <section class="assistant" style="width: 6px;height: 6px;border: 1px solid #b33929;box-sizing:border-box;"></section>
  13. <section class="assistant" style="width: 5px;height: 4px;background-color: #fff;box-sizing:border-box;"></section>
  14. </section>
  15. <section style="display: flex;justify-content: center;align-items: flex-end;">
  16. <section class="assistant" style="width: 6px;height: 6px;border: 1px solid #b33929;box-sizing:border-box;"></section>
  17. <section class="assistant" style="width: 4px;height: 7px;background-color: #fff;box-sizing:border-box;"></section>
  18. <section class="assistant" style="width: 6px;height: 6px;border: 1px solid #b33929;box-sizing:border-box;"></section>
  19. </section>
  20. </section>
  21. <section class="assistant" style="max-width: 100% !important;width: 100%;height: 1px;background-color: #b33929;flex: 1;box-sizing:border-box;" data-width="100%"></section>
  22. <section>
  23. <section style="display: flex;justify-content: center;align-items: flex-start;">
  24. <section class="assistant" style="width: 6px;height: 6px;border: 1px solid #b33929;box-sizing:border-box;"></section>
  25. <section class="assistant" style="width: 4px;height: 7px;background-color: #fff;box-sizing:border-box;"></section>
  26. <section class="assistant" style="width: 6px;height: 6px;border: 1px solid #b33929;box-sizing:border-box;"></section>
  27. </section>
  28. <section style="display: flex;justify-content: center;align-items: center;margin: -2px 0;transform: rotate(0deg);-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);">
  29. <section class="assistant" style="width: 5px;height: 4px;background-color: #fff;box-sizing:border-box;"></section>
  30. <section class="assistant" style="width: 6px;height: 6px;border: 1px solid #b33929;box-sizing:border-box;"></section>
  31. <section class="assistant" style="width: 5px;height: 4px;background-color: #fff;box-sizing:border-box;"></section>
  32. </section>
  33. <section style="display: flex;justify-content: center;align-items: flex-end;">
  34. <section class="assistant" style="width: 6px;height: 6px;border: 1px solid #b33929;box-sizing:border-box;"></section>
  35. <section class="assistant" style="width: 4px;height: 7px;background-color: #fff;box-sizing:border-box;"></section>
  36. <section class="assistant" style="width: 6px;height: 6px;border: 1px solid #b33929;box-sizing:border-box;"></section>
  37. </section>
  38. </section>
  39. </section>
  40. <section style="border-left: 1px solid #b33929;border-right: 1px solid #b33929;padding: 0 30px;box-sizing:border-box;">
  41. <section data-autoskip="1" class="135brush" style="text-align: justify;line-height:1.75em;letter-spacing: 1.5px;font-size:14px;color:#480800;background: transparent;">
  42. <p style="vertical-align:inherit;">
  43. 腊八节，节期在每年农历十二月初八，主要习俗是“喝腊八粥”。腊八节是佛教盛大的节日之一。按佛教记载，释迦牟尼成道之前曾修苦行多年，形销骨立，遂发现苦行不是究竟解脱之道，决定放弃苦行。
  44. </p>
  45. </section>
  46. </section>
  47. <section style="display: flex;align-items: flex-end;">
  48. <section>
  49. <section style="display: flex;justify-content: center;align-items: flex-start;">
  50. <section class="assistant" style="width: 6px;height: 6px;border: 1px solid #b33929;box-sizing:border-box;"></section>
  51. <section class="assistant" style="width: 4px;height: 7px;background-color: #fff;box-sizing:border-box;"></section>
  52. <section class="assistant" style="width: 6px;height: 6px;border: 1px solid #b33929;box-sizing:border-box;"></section>
  53. </section>
  54. <section style="display: flex;justify-content: center;align-items: center;margin: -2px 0;transform: rotate(0deg);-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);">
  55. <section class="assistant" style="width: 5px;height: 4px;background-color: #fff;box-sizing:border-box;"></section>
  56. <section class="assistant" style="width: 6px;height: 6px;border: 1px solid #b33929;box-sizing:border-box;"></section>
  57. <section class="assistant" style="width: 5px;height: 4px;background-color: #fff;box-sizing:border-box;"></section>
  58. </section>
  59. <section style="display: flex;justify-content: center;align-items: flex-end;">
  60. <section class="assistant" style="width: 6px;height: 6px;border: 1px solid #b33929;box-sizing:border-box;"></section>
  61. <section class="assistant" style="width: 4px;height: 7px;background-color: #fff;box-sizing:border-box;"></section>
  62. <section class="assistant" style="width: 6px;height: 6px;border: 1px solid #b33929;box-sizing:border-box;"></section>
  63. </section>
  64. </section>
  65. <section class="assistant" style="max-width: 100% !important;width: 100%;height: 1px;background-color: #b33929;flex: 1;box-sizing:border-box;" data-width="100%"></section>
  66. <section>
  67. <section style="display: flex;justify-content: center;align-items: flex-start;">
  68. <section class="assistant" style="width: 6px;height: 6px;border: 1px solid #b33929;box-sizing:border-box;"></section>
  69. <section class="assistant" style="width: 4px;height: 7px;background-color: #fff;box-sizing:border-box;"></section>
  70. <section class="assistant" style="width: 6px;height: 6px;border: 1px solid #b33929;box-sizing:border-box;"></section>
  71. </section>
  72. <section style="display: flex;justify-content: center;align-items: center;margin: -2px 0;transform: rotate(0deg);-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);">
  73. <section class="assistant" style="width: 5px;height: 4px;background-color: #fff;box-sizing:border-box;"></section>
  74. <section class="assistant" style="width: 6px;height: 6px;border: 1px solid #b33929;box-sizing:border-box;"></section>
  75. <section class="assistant" style="width: 5px;height: 4px;background-color: #fff;box-sizing:border-box;"></section>
  76. </section>
  77. <section style="display: flex;justify-content: center;align-items: flex-end;">
  78. <section class="assistant" style="width: 6px;height: 6px;border: 1px solid #b33929;box-sizing:border-box;"></section>
  79. <section class="assistant" style="width: 4px;height: 7px;background-color: #fff;box-sizing:border-box;"></section>
  80. <section class="assistant" style="width: 6px;height: 6px;border: 1px solid #b33929;box-sizing:border-box;"></section>
  81. </section>
  82. </section>
  83. </section>
  84. </section>
  85. </section>
复制代码
回复 支持 反对

使用道具 举报

下一页 »
1234下一页
返回列表 发新帖
懒得打字嘛，点击右侧快捷回复 充值金钱,充值卡购买等请点此联系站长
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-4-29 13:16 , Processed in 0.382655 second(s), 32 queries , Gzip On.

Powered by Discuz! X3.2

© 2001-2023 Comsenz Inc.

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