fx.html 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport"
  6. content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
  7. <title>高成功率分享小技巧</title>
  8. <style>
  9. body {
  10. background-color: #27272e;
  11. }
  12. #content {
  13. padding-top: 10px;
  14. width: 100%;
  15. }
  16. .item{
  17. height: 100%;
  18. }
  19. .item .lift-line .line{
  20. height: 100px;
  21. }
  22. .lift-content {
  23. position: absolute;
  24. text-align: center;
  25. float: left;
  26. width: 20%;
  27. }
  28. .right-content {
  29. margin-left: 20%;
  30. margin-bottom: 15pt;
  31. }
  32. .lift-line {
  33. float: left;
  34. width: 20%;
  35. width: 20%;
  36. position: absolute;
  37. margin-left: 10%;
  38. padding-top: 30pt;
  39. }
  40. .line {
  41. width: 1.5pt;
  42. background-color: #D5695F;
  43. float: left;
  44. }
  45. .num-title {
  46. margin: 0 auto;
  47. line-height: 30pt;
  48. text-align: center;
  49. height: 30pt;
  50. width: 30pt;
  51. border-radius: 15pt;
  52. background-color: #D5695F;
  53. color: rgb(255, 255, 255);
  54. font-weight: 900;
  55. }
  56. .right-content .image-item img{
  57. width: 30pt;
  58. height: 30pt;
  59. padding: 0 3pt;
  60. }
  61. .info{
  62. color: #ffffff96;
  63. font-size: 14px;
  64. }
  65. </style>
  66. </head>
  67. <body>
  68. <div id="content">
  69. <div class="item">
  70. <!-- 左边圆形段落 -->
  71. <div class="lift-content">
  72. <div class="num-title">
  73. 1
  74. </div>
  75. </div>
  76. <!-- 分隔连接线 -->
  77. <div class="lift-line">
  78. <div class="line"></div>
  79. </div>
  80. <!-- 左边内容 -->
  81. <div class="right-content">
  82. <div class="image-item">
  83. <img src="icon/iocn_weixin2@3x.png" alt="">
  84. <img src="icon/iocn_qun@3x.png" alt="">
  85. </div>
  86. <div class="info">
  87. 将邀请图片/邀请链接发送至微信群组内,
  88. 引导群成员使用手机自带浏览器(UI浏览器,Google浏览器 扫码打开链接)下载APP。
  89. </div>
  90. </div>
  91. </div>
  92. <div class="item">
  93. <!-- 左边圆形段落 -->
  94. <div class="lift-content">
  95. <div class="num-title">
  96. 2
  97. </div>
  98. </div>
  99. <!-- 分隔连接线 -->
  100. <div class="lift-line">
  101. <div class="line"></div>
  102. </div>
  103. <!-- 左边内容 -->
  104. <div class="right-content">
  105. <div class="image-item">
  106. <img src="icon/iocn_qq@3x.png" alt="">
  107. <img src="icon/iocn_qun@3x.png" alt="">
  108. </div>
  109. <div class="info">
  110. 将邀请图片/邀请链接发送至QQ群组内,
  111. 引导群成员使用手机自带浏览器(UI浏览器,Google浏览器 扫码打开链接)下载APP。
  112. </div>
  113. </div>
  114. </div>
  115. <div class="item">
  116. <!-- 左边圆形段落 -->
  117. <div class="lift-content">
  118. <div class="num-title">
  119. 3
  120. </div>
  121. </div>
  122. <!-- 分隔连接线 -->
  123. <div class="lift-line">
  124. <div class="line"></div>
  125. </div>
  126. <!-- 左边内容 -->
  127. <div class="right-content">
  128. <div class="image-item">
  129. <img src="icon/iocn_weixin2@3x.png" alt="">
  130. <img src="icon/iocn_qq@3x.png" alt="">
  131. </div>
  132. <div class="info">
  133. 将邀请图片/邀请链接发送给您的好友,
  134. 引导群成员使用手机自带浏览器(UI浏览器,Google浏览器 扫码打开链接)下载APP。
  135. </div>
  136. </div>
  137. </div>
  138. <div class="item">
  139. <!-- 左边圆形段落 -->
  140. <div class="lift-content">
  141. <div class="num-title">
  142. 4
  143. </div>
  144. </div>
  145. <!-- 分隔连接线 -->
  146. <div class="lift-line">
  147. <div class="line"></div>
  148. </div>
  149. <!-- 左边内容 -->
  150. <div class="right-content">
  151. <div class="image-item">
  152. <img src="icon/iocn_fujin@3x.png" alt="">
  153. </div>
  154. <div class="info">
  155. 将邀请图片/邀请链接发送给您附近的好友,
  156. 引导群成员使用手机自带浏览器(UI浏览器,Google浏览器 扫码打开链接)下载APP。
  157. </div>
  158. </div>
  159. </div>
  160. <div class="item">
  161. <!-- 左边圆形段落 -->
  162. <div class="lift-content">
  163. <div class="num-title">
  164. 5
  165. </div>
  166. </div>
  167. <!-- 左边内容 -->
  168. <div class="right-content">
  169. <div class="image-item">
  170. <img src="icon/iocn_tieba@3x.png" alt="">
  171. <img src="icon/iocn_luntan@3x.png" alt="">
  172. <img src="icon/iocn_weibo@3x.png" alt="">
  173. </div>
  174. <div class="info">
  175. 将邀请图片/邀请链接通过贴吧/论坛/微博发送帖子
  176. 引导贴友使用手机自带浏览器(UI浏览器,Google浏览器 扫码打开链接)下载APP。
  177. </div>
  178. </div>
  179. </div>
  180. </div>
  181. </body>
  182. </html>