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

王洪林个人官网

 找回密码
 立即注册

QQ登录

只需一步，快速开始

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

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

  [复制链接]
admin

升级   100%

21#
 楼主| 发表于 2023-7-6 20:06:11 | 只看该作者 来自 浙江
帖子中可随时引用的样式和代码：

2014年2月27日，十二届全国人大常委会第七次会议通过决定，以立法形式将12月13日设立为南京大屠杀死难者国家公祭日。

  1. <section style="margin: 10px auto;">
  2. <section style="border-top:1px solid #690a01;border-bottom: 1px solid #690a01;background-color: #eaeaea;padding: 10px;box-sizing:border-box;">
  3. <section style="background-color: #ffffff;padding: 25px 20px;box-sizing:border-box;">
  4. <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;">
  5. <p>
  6. 2014年2月27日，十二届全国人大常委会第七次会议通过决定，以立法形式将12月13日设立为南京大屠杀死难者国家公祭日。
  7. </p>
  8. </section>
  9. </section>
  10. </section>
  11. </section>
复制代码
回复 支持 反对

使用道具 举报

admin

升级   100%

22#
 楼主| 发表于 2023-7-6 20:09:12 | 只看该作者 来自 浙江
帖子中随时可引入的样式和代码：

简约起源于现代派的极简主义。 有人说起源于现代派大师，德国包豪斯学校的第三任校长米斯.凡德罗。他提倡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: #FF3333;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: #0066FF;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: #0066FF;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:#FF3333;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>
复制代码
回复 支持 反对

使用道具 举报

admin

升级   100%

23#
 楼主| 发表于 2023-7-6 20:26:14 | 只看该作者 来自 浙江
帖子中可随时引用样式及代码：
QUESTION
反诈灵魂提问
01
理财前问自己
投资大师为啥要苦口婆心的帮助你?
02
网恋前问自己
人靓声甜的小姐姐,为啥还需要网恋?
03
刷单前问自己
动动手指就能赚钱的好事为啥能轮到你?
  1. <section style="margin: 20px auto;">
  2. <section>
  3. <section style="display: flex;justify-content: center;">
  4. <section style="transform-style: preserve-3d">
  5. <section style="text-align: center;font-size: 24px;color: #ebf2ff;letter-spacing: 1.5px; transform: translateZ(6px);transform: translateZ(6px);-webkit-transform: translateZ(6px);-moz-transform: translateZ(6px);-o-transform: translateZ(6px);">
  6. <strong class="135brush" data-brushtype="text">QUESTION</strong>
  7. </section>
  8. <section style="margin-top: -15px;display: flex;justify-content: center;transform: translateZ(10px);-webkit-transform: translateZ(10px);-moz-transform: translateZ(10px);-o-transform: translateZ(10px);">
  9. <section style="background: linear-gradient(to right,#1648d2,#265ef9);font-size: 16px;color: #fefeff;border-radius: 25px;padding: 3px 10px;letter-spacing: 1.5px;text-align: center;box-sizing:border-box;">
  10. <strong class="135brush" data-brushtype="text">反诈灵魂提问</strong>
  11. </section>
  12. </section>
  13. </section>
  14. </section>
  15. <section style="border-top: 1px solid #468bfc;background-color: #f4f8ff;padding: 25px 0 20px;margin-top: -15px;box-sizing:border-box;" class="">
  16. <section style="padding: 0 15px;box-sizing:border-box;">
  17. <section style="display: flex;align-items: center;padding: 10px 0;box-sizing:border-box;">
  18. <section style="font-size: 24px;letter-spacing: 1.5px;color: #ffffff;text-shadow: #1649d3 1px 1px, #1649d3 1px -1px,#1649d3 1px -1px, #1649d3 -1px 1px, #1649d3 -1px -1px;flex-shrink: 0;">
  19. <strong>0</strong><strong class="autonum" data-original-title="" title="">1</strong>
  20. </section>
  21. <section style="padding-left: 15px;box-sizing:border-box;">
  22. <section style="font-size: 14px;color: #1549d2;text-align: left;">
  23. <strong class="135brush" data-brushtype="text">理财前问自己</strong>
  24. </section>
  25. <section style="font-size: 14px;color: #333;text-align: left;">
  26. <span class="135brush" data-brushtype="text">投资大师为啥要苦口婆心的帮助你?</span>
  27. </section>
  28. </section>
  29. </section>
  30. </section>
  31. <section class="box-edit" style="padding: 0 15px;box-sizing:border-box;">
  32. <section style="display: flex;align-items: center;padding: 10px 0;border-top: 1px dashed #cee0ff;box-sizing:border-box;">
  33. <section style="font-size: 24px;letter-spacing: 1.5px;color: #ffffff;text-shadow: #1649d3 1px 1px, #1649d3 1px -1px,#1649d3 1px -1px, #1649d3 -1px 1px, #1649d3 -1px -1px;flex-shrink: 0;">
  34. <strong>0</strong><strong class="autonum" data-original-title="" title="">2</strong>
  35. </section>
  36. <section style="padding-left: 15px;box-sizing:border-box;">
  37. <section style="font-size: 14px;color: #1549d2;text-align: left;">
  38. <strong class="135brush" data-brushtype="text">网恋前问自己</strong>
  39. </section>
  40. <section style="font-size: 14px;color: #333;text-align: left;">
  41. <span class="135brush" data-brushtype="text">人靓声甜的小姐姐,为啥还需要网恋?</span>
  42. </section>
  43. </section>
  44. </section>
  45. </section>
  46. <section class="box-edit" style="padding: 0 15px;box-sizing:border-box;">
  47. <section style="display: flex;align-items: center;padding: 10px 0;border-top: 1px dashed #cee0ff;box-sizing:border-box;" class="">
  48. <section style="font-size: 24px;letter-spacing: 1.5px;color: #ffffff;text-shadow: #1649d3 1px 1px, #1649d3 1px -1px,#1649d3 1px -1px, #1649d3 -1px 1px, #1649d3 -1px -1px;flex-shrink: 0;">
  49. <strong>0</strong><strong class="autonum" data-original-title="" title="">3</strong>
  50. </section>
  51. <section style="padding-left: 15px;box-sizing:border-box;">
  52. <section style="font-size: 14px;color: #1549d2;text-align: left;" class="">
  53. <strong class="135brush" data-brushtype="text">刷单前问自己</strong>
  54. </section>
  55. <section style="font-size: 14px;color: #333;text-align: left;" class="">
  56. <span class="135brush" data-brushtype="text">动动手指就能赚钱的好事为啥能轮到你?</span>
  57. </section>
  58. </section>
  59. </section>
  60. </section>
  61. </section>
  62. </section>
  63. </section>
复制代码
回复 支持 反对

使用道具 举报

admin

升级   100%

24#
 楼主| 发表于 2023-7-6 20:35:11 | 只看该作者 来自 浙江
帖子中可随时引用的样式及代码：
“谷雨，谷得雨而生也”
  1. <section style="margin: 20px auto;">
  2. <section style="display: flex;align-items: flex-end;">
  3. <section class="assistant" style="width: 55px;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="/upimages/wy001.gif" data-width="100%" draggable="false" data-ratio="0.9736842105263158" data-w="380"/>
  5. </section>
  6. <section class="135brush" data-brushtype="text" style="margin:0 0 0 -55px;border: 1px dashed #c4e3b9;border-radius: 20px;font-size: 16px;color: #5ca452;background-color: #f7fbf0;width: 100%;text-align: center;padding: 15px 0;box-sizing:border-box;max-width: 100% !important;" data-width="100%">
  7. “谷雨，谷得雨而生也”
  8. </section>
  9. </section>
  10. </section>
复制代码
回复 支持 反对

使用道具 举报

admin

升级   100%

25#
 楼主| 发表于 2023-7-6 20:40:12 | 只看该作者 来自 浙江
帖子中可随时引用的样式及代码：
1
子女教育

保护地球不止一小时，让我们携手共创一个公平的、碳中和的、自然向好的未来！

2
子女教育

保护地球不止一小时，让我们携手共创一个公平的、碳中和的、自然向好的未来！

  1. <section style="text-align: center;margin: 10px auto;">
  2. <section style="display:flex;justify-content: space-between;align-items: flex-start;">
  3. <section style="width: 48.4%;box-sizing:border-box;max-width: 48.4% !important;" data-width="48.4%">
  4. <section style="display: inline-block;transform-style: preserve-3d;margin-left: 4px;">
  5. <section style="display: flex;justify-content: flex-end;transform: translateZ(9px);-webkit-transform: translateZ(9px);-moz-transform: translateZ(9px);-o-transform: translateZ(9px);">
  6. <section style="width: 15px;line-height: 0;flex-shrink: 0;margin-bottom: -15px;box-sizing:border-box;transform: rotate(40deg);-webkit-transform: rotate(40deg);-moz-transform: rotate(40deg);-o-transform: rotate(40deg);">
  7. <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 65 100" style="enable-background:new 0 0 65 100;" xml:space="default">
  8. <g>
  9. <g>
  10. <path class="st0" style="fill:#a8e07b;" d="M32.41,41.79c4.86-3.87-6.74-41.5-23.74-36.36S3.67,28.05,11,33.22S28.85,44.62,32.41,41.79z"></path>
  11. <path class="st0" style="fill:#a8e07b;" d="M31.05,41.35c-5.52-3.96,5.08-45.68,23.94-40.98s6.7,24.45-1.02,30.49S35.09,44.25,31.05,41.35z"></path>
  12. <path class="st0" style="fill:#a8e07b;" d="M33.03,100c-2.6-0.1-1.58-4.04-1.37-9.21c0.26-6.29,3.07-18.2-1.8-49.73c-0.56-3.63,3.24-4.13,3.84-0.57
  13. c2.82,16.71,3.52,35.34,1.73,50.73C34.96,95.24,35.36,100.09,33.03,100z"></path>
  14. </g>
  15. </g>
  16. </svg>
  17. </section>
  18. </section>
  19. <section style="width: 35px;height: 35px;background-color: #31ab42;border-radius: 50%;margin-right: 4px;box-sizing:border-box;transform: translateZ(10px);-webkit-transform: translateZ(10px);-moz-transform: translateZ(10px);-o-transform: translateZ(10px);">
  20. <section style="font-size: 18px;color: #fff;line-height: 35px;text-align: center;">
  21. <strong class="autonum" data-original-title="" title="">1</strong>
  22. </section>
  23. </section>
  24. </section>
  25. <section style="border: 1px solid #31ab42;padding: 35px 12px 20px 12px;margin-top: -17px;box-sizing:border-box;">
  26. <section style="font-size: 14px;letter-spacing: 1.5px;color: #31ab42;">
  27. <strong class="135brush" data-brushtype="text">子女教育</strong>
  28. </section>
  29. <section data-autoskip="1" class="135brush" style="margin-top: 15px;text-align: justify;line-height:1.75em;letter-spacing: 1.5px;font-size:14px;color:#333;background: transparent;">
  30. <p style="vertical-align:inherit;">
  31. 保护地球不止一小时，让我们携手共创一个公平的、碳中和的、自然向好的未来！
  32. </p>
  33. </section>
  34. </section>
  35. </section>
  36. <section style="width: 48.4%;box-sizing:border-box;max-width: 48.4% !important;" data-width="48.4%">
  37. <section style="display: inline-block;transform-style: preserve-3d;margin-left: 4px;">
  38. <section style="display: flex;justify-content: flex-end;transform: translateZ(9px);-webkit-transform: translateZ(9px);-moz-transform: translateZ(9px);-o-transform: translateZ(9px);">
  39. <section style="width: 15px;line-height: 0;flex-shrink: 0;margin-bottom: -15px;box-sizing:border-box;transform: rotate(40deg);-webkit-transform: rotate(40deg);-moz-transform: rotate(40deg);-o-transform: rotate(40deg);">
  40. <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 65 100" style="enable-background:new 0 0 65 100;" xml:space="default">
  41. <g>
  42. <g>
  43. <path class="st0" style="fill:#a8e07b;" d="M32.41,41.79c4.86-3.87-6.74-41.5-23.74-36.36S3.67,28.05,11,33.22S28.85,44.62,32.41,41.79z"></path>
  44. <path class="st0" style="fill:#a8e07b;" d="M31.05,41.35c-5.52-3.96,5.08-45.68,23.94-40.98s6.7,24.45-1.02,30.49S35.09,44.25,31.05,41.35z"></path>
  45. <path class="st0" style="fill:#a8e07b;" d="M33.03,100c-2.6-0.1-1.58-4.04-1.37-9.21c0.26-6.29,3.07-18.2-1.8-49.73c-0.56-3.63,3.24-4.13,3.84-0.57
  46. c2.82,16.71,3.52,35.34,1.73,50.73C34.96,95.24,35.36,100.09,33.03,100z"></path>
  47. </g>
  48. </g>
  49. </svg>
  50. </section>
  51. </section>
  52. <section style="width: 35px;height: 35px;background-color: #31ab42;border-radius: 50%;margin-right: 4px;box-sizing:border-box;transform: translateZ(10px);-webkit-transform: translateZ(10px);-moz-transform: translateZ(10px);-o-transform: translateZ(10px);">
  53. <section style="font-size: 18px;color: #fff;line-height: 35px;text-align: center;">
  54. <strong class="autonum" data-original-title="" title="">2</strong>
  55. </section>
  56. </section>
  57. </section>
  58. <section style="border: 1px solid #31ab42;padding: 35px 12px 20px 12px;margin-top: -17px;box-sizing:border-box;">
  59. <section style="font-size: 14px;letter-spacing: 1.5px;color: #31ab42;">
  60. <strong class="135brush" data-brushtype="text">子女教育</strong>
  61. </section>
  62. <section data-autoskip="1" class="135brush" style="margin-top: 15px;text-align: justify;line-height:1.75em;letter-spacing: 1.5px;font-size:14px;color:#333;background: transparent;">
  63. <p style="vertical-align:inherit;">
  64. 保护地球不止一小时，让我们携手共创一个公平的、碳中和的、自然向好的未来！
  65. </p>
  66. </section>
  67. </section>
  68. </section>
  69. </section>
  70. </section>
复制代码
回复 支持 反对

使用道具 举报

admin

升级   100%

26#
 楼主| 发表于 2023-7-6 20:45:42 | 只看该作者 来自 浙江
帖子中可随时引入的样式及代码：
比赛介绍
COMPETITION INTRODUCTION

第24届冬季奥林匹克运动会，即2022年北京冬季奥运会，于2022年2月4日星期五开幕，2月20日星期日闭幕 [33]  。北京冬季奥运会设7个大项，15个分项，109个小项 [2] 

  1. <section style="margin: 10px auto;">
  2. <section style="border: 1px solid #0178c6;border-radius: 10px;box-sizing:border-box;">
  3. <section style="display: flex;justify-content: flex-start;background-color: #ddf2ff;border-radius: 10px 10px 0 0;box-sizing:border-box;">
  4. <section>
  5. <section style="background-color: #0178c6;padding: 2px 10px;border-radius: 10px 0 10px 0;height: 100%;display: flex;align-items: center;box-sizing:border-box;">
  6. <section style="color: #ffffff; font-size: 16px;text-align: center;height: 30px;line-height: 30px;">
  7. <strong class="135brush" data-brushtype="text">比赛介绍</strong>
  8. </section>
  9. </section>
  10. </section>
  11. <section style="width: 65%;display: flex;align-items: center;box-sizing:border-box;max-width: 65% !important;" data-width="65%">
  12. <section class="135brush" data-brushtype="text" style="font-size: 14px;margin-left: 6px;color: #0178c6;">
  13. COMPETITION INTRODUCTION
  14. </section>
  15. </section>
  16. </section>
  17. <section data-autoskip="1" class="135brush" style="padding: 20px 15px 0px;color: #231815;font-size: 14px;line-height: 1.75em;letter-spacing: 1.5px;text-align: justify;box-sizing:border-box;">
  18. <p style="vertical-align:inherit;" hm_fix="388:328">
  19. 第24届冬季奥林匹克运动会，即2022年北京冬季奥运会，于2022年2月4日星期五开幕，2月20日星期日闭幕&nbsp;[33]&nbsp;&nbsp;。北京冬季奥运会设7个大项，15个分项，109个小项&nbsp;[2]&nbsp;
  20. </p>
  21. </section>
  22. <section style="text-align: right;">
  23. <section style="width: 30px;display: inline-block;margin: 0 15px 15px 0;box-sizing:border-box;">
  24. <img style="vertical-align:inherit;width: 100%;display: block;box-sizing:border-box;max-width: 100% !important;" src="/upimages/10PXBuZw.png" data-width="100%" draggable="false" data-ratio="0.9642857142857143" data-w="28"/>
  25. </section>
  26. </section>
  27. </section>
  28. </section>
复制代码
回复 支持 反对

使用道具 举报

admin

升级   100%

27#
 楼主| 发表于 2023-7-6 20:56:18 | 只看该作者 来自 浙江
帖子内可随时引用的样式和代码：
数据可视化分析

数据可视化主要旨在借助于图形化手段，清晰有效地传达与沟通信息。为了有效地传达思想概念，美学形式与功能需要齐头并进。

  1. <section style="text-align: center; margin: 10px 8px;">
  2. <section style="text-align: right;line-height: 0;margin-bottom: -25px;">
  3. <section style="display: inline-block;">
  4. <section style="background: linear-gradient(to right,#7c9ee8 0%,#acc5fd 100%);padding: 7px 2px 13px 2px;box-sizing:border-box;transform: rotate(15deg) translate(8px,15px);-webkit-transform: rotate(15deg) translate(8px,15px);-moz-transform: rotate(15deg) translate(8px,15px);-o-transform: rotate(15deg) translate(8px,15px);">
  5. <section style="display: flex;justify-content: center;align-items: flex-start;">
  6. <section class="assistant" style="width: 17px;height: 2px;background-color: #fff;margin-right: -4px;box-sizing:border-box;transform: rotate(30deg);-webkit-transform: rotate(30deg);-moz-transform: rotate(30deg);-o-transform: rotate(30deg);"></section>
  7. <section class="assistant" style="width: 17px;height: 2px;background-color: #fff;box-sizing:border-box;transform: rotate(-30deg);-webkit-transform: rotate(-30deg);-moz-transform: rotate(-30deg);-o-transform: rotate(-30deg);"></section>
  8. </section>
  9. </section>
  10. </section>
  11. </section>
  12. <section style="border: 1px solid #000;box-sizing:border-box;">
  13. <section style="display: flex;justify-content: space-between;align-items: center;background-color: #efefef;padding: 6px 8px;box-sizing:border-box;">
  14. <section style="display: flex;">
  15. <section class="assistant" style="width: 5px;height: 5px;background-color: #B22222;border-radius: 50%;box-sizing:border-box;"></section>
  16. <section class="assistant" style="width: 5px;height: 5px;background-color: #ADFF2F;border-radius: 50%;margin: 0 3px;box-sizing:border-box;"></section>
  17. <section class="assistant" style="width: 5px;height: 5px;background-color: #7B68EE;border-radius: 50%;box-sizing:border-box;"></section>
  18. </section>
  19. <section style="font-size: 20px;letter-spacing: 1.5px;color: #000;">
  20. <strong class="135brush" data-brushtype="text">数据可视化分析</strong>
  21. </section>
  22. <section style="display: flex;">
  23. <section class="assistant" style="width: 5px;height: 5px;background-color: #efefef;border-radius: 50%;box-sizing:border-box;"></section>
  24. <section class="assistant" style="width: 5px;height: 5px;background-color: #efefef;border-radius: 50%;margin: 0 3px;box-sizing:border-box;"></section>
  25. <section class="assistant" style="width: 5px;height: 5px;background-color: #efefef;border-radius: 50%;box-sizing:border-box;"></section>
  26. </section>
  27. </section>
  28. <section class="assistant" style="max-width: 100% !important;width: 100%;height: 1px;background-color: #000;box-sizing:border-box;" data-width="100%"></section>
  29. <section style="padding: 25px 22px;box-sizing:border-box;">
  30. <section data-autoskip="1" class="135brush" style="text-align: justify;line-height:1.75em;letter-spacing: 1.5px;font-size:14px;color:#000;background: transparent;">
  31. <p style="vertical-align:inherit;">
  32. 数据可视化主要旨在借助于图形化手段，清晰有效地传达与沟通信息。为了有效地传达思想概念，美学形式与功能需要齐头并进。
  33. </p>
  34. </section>
  35. <section style="border: 1px solid #000;margin-top: 18px;box-sizing:border-box;">
  36. <section style="max-width: 100% !important;width: 100%;box-sizing:border-box;" data-width="100%">
  37. <img style="vertical-align:inherit;width: 100%; display: block;box-sizing:border-box;max-width: 100% !important;" src="https://image2.135editor.com/cache/remote/aHR0cHM6Ly9tbWJpei5xbG9nby5jbi9tbWJpel9qcGcvSmFGdlB2dkEySjMxSDZ2Vnp1VklCaWNhS2xsZDNEZ2x0QWljeVNFb2NrVUI1MXphNXR6ZzliQUNvQ1R0aWJ6OGQ4WlpLZHFjTGlhTm9YN2liU0ljZHl0aHRwUS8wP3d4X2ZtdD1qcGVn" data-width="100%" draggable="false" data-ratio="0.6962616822429907" data-w="428"/>
  38. </section>
  39. </section>
  40. </section>
  41. </section>
  42. </section>
复制代码
回复 支持 反对

使用道具 举报

admin

升级   100%

28#
 楼主| 发表于 2023-7-6 21:13:05 | 只看该作者 来自 浙江
帖子可直接引入的样式和代码：
提子科技

135编辑器，一站式新媒体运营工具，帮助解决排版美化、做图、运营等问题。

提子科技

135编辑器，一站式新媒体运营工具，帮助解决排版美化、做图、运营等问题。

提子科技

135编辑器，一站式新媒体运营工具，帮助解决排版美化、做图、运营等问题。

  1. <section style="margin: 10px auto;">
  2. <section data-role="animate" style="display: inline-block;width: 100%;vertical-align: top;overflow-x: auto;max-width: 100% !important;box-sizing:border-box;" data-width="100%">
  3. <section data-divisor="2" style="overflow: hidden;width: 150%;max-width: 150% !important;margin: 4px 0 0;display:flex;flex-direction:row;flex-wrap:nowrap;box-sizing:border-box;" data-width="150%">
  4. <section class="box-edit" style="display: inline-block; vertical-align: middle;width: 33.3%; ; ;box-sizing:border-box;max-width: 33.3% !important;" data-width="33.3%">
  5. <section style="margin: 4px auto 0;padding: 0 3px 15px;border-top: 1px solid #3f84ec;box-sizing:border-box;">
  6. <section style="width: 9px;height: 9px;background-color: #3f84ec;border-radius: 100%;margin:-4px auto;box-sizing:border-box;"></section>
  7. <section style="display: flex;justify-content: center;padding-top: 10px;box-sizing:border-box;">
  8. <section style="width: 0;height: 1px;border-left: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 10px solid #3f84ec;box-sizing:border-box;"></section>
  9. </section>
  10. <section style="padding: 0 5px;box-sizing:border-box;">
  11. <section style="background-color: #3f84ec;padding: 20px 0;box-sizing:border-box;">
  12. <section style="color: #ffffff;text-align: center;font-size: 14px;letter-spacing: 1.5px;padding: 10px 0;box-sizing:border-box;">
  13. <strong class="135brush" data-brushtype="text">提子科技</strong>
  14. </section>
  15. <section style="padding: 0 10px;box-sizing:border-box;">
  16. <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;">
  17. <p style="vertical-align:inherit;">
  18. 135编辑器，一站式新媒体运营工具，帮助解决排版美化、做图、运营等问题。
  19. </p>
  20. </section>
  21. </section>
  22. </section>
  23. </section>
  24. </section>
  25. </section>
  26. <section class="box-edit" style="display: inline-block; vertical-align: middle;width: 33.3%; ;box-sizing:border-box;max-width: 33.3% !important;" data-width="33.3%">
  27. <section style="margin: 4px auto 0;padding: 0 3px 15px;border-top: 1px solid #3f84ec;box-sizing:border-box;">
  28. <section style="width: 9px;height: 9px;background-color: #e14036;border-radius: 100%;margin:-4px auto;box-sizing:border-box;"></section>
  29. <section style="display: flex;justify-content: center;padding-top: 10px;box-sizing:border-box;">
  30. <section style="width: 0;height: 1px;border-left: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 10px solid #e14036;box-sizing:border-box;"></section>
  31. </section>
  32. <section style="padding: 0 5px;box-sizing:border-box;">
  33. <section style="background-color: #e14036;padding: 20px 0;box-sizing:border-box;">
  34. <section style="color: #ffffff;text-align: center;font-size: 14px;letter-spacing: 1.5px;padding: 10px 0;box-sizing:border-box;">
  35. <strong class="135brush" data-brushtype="text">提子科技</strong>
  36. </section>
  37. <section style="padding: 0 10px;box-sizing:border-box;">
  38. <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;">
  39. <p style="vertical-align:inherit;">
  40. 135编辑器，一站式新媒体运营工具，帮助解决排版美化、做图、运营等问题。
  41. </p>
  42. </section>
  43. </section>
  44. </section>
  45. </section>
  46. </section>
  47. </section>
  48. <section class="box-edit" style="display: inline-block; vertical-align: middle;width: 33.3%; ; ;box-sizing:border-box;max-width: 33.3% !important;" data-width="33.3%">
  49. <section style="margin: 4px auto 0;padding: 0 3px 15px;border-top: 1px solid #3f84ec;box-sizing:border-box;">
  50. <section style="width: 9px;height: 9px;background-color: #3f84ec;border-radius: 100%;margin:-4px auto;box-sizing:border-box;"></section>
  51. <section style="display: flex;justify-content: center;padding-top: 10px;box-sizing:border-box;">
  52. <section style="width: 0;height: 1px;border-left: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 10px solid #3f84ec;box-sizing:border-box;"></section>
  53. </section>
  54. <section style="padding: 0 5px;box-sizing:border-box;">
  55. <section style="background-color: #3f84ec;padding: 20px 0;box-sizing:border-box;">
  56. <section style="color: #ffffff;text-align: center;font-size: 14px;letter-spacing: 1.5px;padding: 10px 0;box-sizing:border-box;">
  57. <strong class="135brush" data-brushtype="text">提子科技</strong>
  58. </section>
  59. <section style="padding: 0 10px;box-sizing:border-box;">
  60. <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;">
  61. <p style="vertical-align:inherit;">
  62. 135编辑器，一站式新媒体运营工具，帮助解决排版美化、做图、运营等问题。
  63. </p>
  64. </section>
  65. </section>
  66. </section>
  67. </section>
  68. </section>
  69. </section>
  70. </section>
  71. </section>
  72. </section>
复制代码
回复 支持 反对

使用道具 举报

admin

升级   100%

29#
 楼主| 发表于 2023-7-6 21:17:12 | 只看该作者 来自 浙江
帖子中可直接引入的样式及代码：
直接选举
（选民直接投票选举）
适用范围
县级、乡镇级人大代表
推荐候选人
各选区选民、各政党、各人民团体
投票方式
投票站、选举大会、流动票箱
选票方式
差额选举
  1. <section style="margin: 10px auto;text-align: center;">
  2. <section style="display: flex;justify-content: center;align-items: center;">
  3. <section style="width: 25.6px;line-height: 0;flex-shrink: 0;box-sizing:border-box;">
  4. <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 40 50" style="enable-background:new 0 0 40 50;" xml:space="default">
  5. <polygon class="st1" style="fill:#ffcf47;" points="19.9,47 0,47 15.1,25 0,3 19.9,3 35,25 "></polygon>
  6. <polygon class="st0" style="fill:#e00e0d;" points="40,50 10,50 28.01,25 10,0 40,0 "></polygon>
  7. </svg>
  8. </section>
  9. <section style="background-color: #e00e0d;padding: 0 8px;width: auto;height: 32px;box-sizing:border-box;">
  10. <section class="135brush" data-brushtype="text" style="font-size: 16px;letter-spacing: 1.5px;color: #fff;line-height: 32px;">
  11. 直接选举
  12. </section>
  13. </section>
  14. <section style="line-height: 0;width: 19.2px;flex-shrink: 0;box-sizing:border-box;">
  15. <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 30 50" style="enable-background:new 0 0 30 50;" xml:space="default">
  16. <polygon class="st0" style="fill:#e00e0d;" points="0,50 30,50 11.99,25 30,0 0,0 "></polygon>
  17. </svg>
  18. </section>
  19. </section>
  20. <section style="border: 1px solid #e00e0d;padding: 0 10px;margin-top: -16px;box-sizing:border-box;">
  21. <section class="135brush" data-brushtype="text" style="padding: 20px 0 10px 0;font-size: 12px;letter-spacing: 1.5px;line-height: 1.75em;box-sizing:border-box;">
  22. （选民直接投票选举）
  23. </section>
  24. <section class="box-edit _135editor" style="display: flex;background: #fedfd4;background: linear-gradient(to right,#fb5f29 0%,#fb5f29 21%,#fedfd4 21%,#fedfd4 100%);margin: 10px 0;">
  25. <section style="width: 20%;padding: 7px 0;box-sizing:border-box;max-width: 20% !important;" data-width="20%">
  26. <section class="135brush" data-brushtype="text" style="font-size: 12px;letter-spacing: 1px;color: #fff;">
  27. 适用范围
  28. </section>
  29. </section>
  30. <section style="max-width: 100% !important;width: 100%;flex: 1;padding: 7px;text-align: left;box-sizing:border-box;" data-width="100%">
  31. <section class="135brush" data-brushtype="text" style="font-size: 12px;letter-spacing: 1px;color: #fc835c;margin-left: 15px;">
  32. 县级、乡镇级人大代表
  33. </section>
  34. </section>
  35. </section>
  36. <section class="box-edit _135editor" style="display: flex;background: #fedfd4;background: linear-gradient(to right,#fb5f29 0%,#fb5f29 21%,#fedfd4 21%,#fedfd4 100%);margin: 10px 0;">
  37. <section style="width: 20%;padding: 7px 0;box-sizing:border-box;max-width: 20% !important;" data-width="20%">
  38. <section class="135brush" data-brushtype="text" style="font-size: 12px;letter-spacing: 1px;color: #fff;">
  39. 推荐候选人
  40. </section>
  41. </section>
  42. <section style="max-width: 100% !important;width: 100%;flex: 1;padding: 7px;text-align: left;box-sizing:border-box;" data-width="100%">
  43. <section class="135brush" data-brushtype="text" style="font-size: 12px;letter-spacing: 1px;color: #fc835c;margin-left: 15px;">
  44. 各选区选民、各政党、各人民团体
  45. </section>
  46. </section>
  47. </section>
  48. <section class="box-edit _135editor" style="display: flex;background: #fedfd4;background: linear-gradient(to right,#fb5f29 0%,#fb5f29 21%,#fedfd4 21%,#fedfd4 100%);margin: 10px 0;">
  49. <section style="width: 20%;padding: 7px 0;box-sizing:border-box;max-width: 20% !important;" data-width="20%">
  50. <section class="135brush" data-brushtype="text" style="font-size: 12px;letter-spacing: 1px;color: #fff;">
  51. 投票方式
  52. </section>
  53. </section>
  54. <section style="max-width: 100% !important;width: 100%;flex: 1;padding: 7px;text-align: left;box-sizing:border-box;" data-width="100%">
  55. <section class="135brush" data-brushtype="text" style="font-size: 12px;letter-spacing: 1px;color: #fc835c;margin-left: 15px;">
  56. 投票站、选举大会、流动票箱
  57. </section>
  58. </section>
  59. </section>
  60. <section class="box-edit _135editor" style="display: flex;background: #fedfd4;background: linear-gradient(to right,#fb5f29 0%,#fb5f29 21%,#fedfd4 21%,#fedfd4 100%);margin: 10px 0;">
  61. <section style="width: 20%;padding: 7px 0;box-sizing:border-box;max-width: 20% !important;" data-width="20%">
  62. <section class="135brush" data-brushtype="text" style="font-size: 12px;letter-spacing: 1px;color: #fff;">
  63. 选票方式
  64. </section>
  65. </section>
  66. <section style="max-width: 100% !important;width: 100%;flex: 1;padding: 7px;text-align: left;box-sizing:border-box;" data-width="100%">
  67. <section class="135brush" data-brushtype="text" style="font-size: 12px;letter-spacing: 1px;color: #fc835c;margin-left: 15px;">
  68. 差额选举
  69. </section>
  70. </section>
  71. </section>
  72. </section>
  73. </section>
复制代码
回复 支持 反对

使用道具 举报

admin

升级   100%

30#
 楼主| 发表于 2023-7-6 22:12:54 | 只看该作者 来自 浙江
帖子中可随时引用的样式和代码：
1：简介内容

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

  1. <section style="margin: 10px auto;">
  2. <section style="width: 100%;height: 2px;border-top: 1px solid #d53a1c;max-width: 100% !important;box-sizing:border-box;" data-width="100%"></section>
  3. <section style="display: flex;justify-content: flex-start;background-color: #ffd952;">
  4. <section style="display: flex;justify-content: center;flex-shrink: 0;">
  5. <section style="font-size: 14px;color: #ffffff;background-color: #d53a1c;display: flex;align-items: center;padding: 0 10px;box-sizing:border-box;">
  6. <strong class="135brush" data-brushtype="text">1：简介内容</strong>
  7. </section>
  8. <section style="flex-shrink: 0;display: flex;align-items: center;">
  9. <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>
  10. <section style="width: 5px;height: 30px;background-color: #fffffe;margin: 0 0 0 -10px;box-sizing:border-box;"></section>
  11. <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>
  12. </section>
  13. </section>
  14. </section>
  15. <section style="background-color: #fcf8e3;padding: 0 14px 14px;box-sizing:border-box;">
  16. <section style="padding: 5px 0;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:#4b4b4b;background-color: transparent;">
  18. <p>
  19. “人心是最大的政治”。得人心，就能无惧前行道路上的风险挑战，汇聚起磅礴的奋进力量。瓜连蔓子蔓连根。在长期艰苦的革命岁月，我们党始终与人民心连心，坚持一切为了人民、一切依靠人民。
  20. </p>
  21. </section>
  22. </section>
  23. </section>
  24. </section>
复制代码
回复 支持 反对

使用道具 举报

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

本版积分规则

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

GMT+8, 2024-5-14 15:39 , Processed in 0.311017 second(s), 29 queries , Gzip On.

Powered by Discuz! X3.2

© 2001-2023 Comsenz Inc.

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