hxx - 4小时前注册会员;
2545 - 2天前注册会员;
dethrj - 4天前注册会员;
dfghg - 4天前注册会员;
sdfghhj - 5天前注册会员;
加入我们（2317 ）

大气好看的在线联系客服代码（html+js+css）

这是一个在线联系客服功能的页面，展示了在线客服联系方式和留言表单切换功能。用户可以通过填写姓名、联系方式、邮箱账号和备注信息来提交留言。同时，在提交前需要输入正确的验证码进行验证。留言内容可以通过第三方AnPush推送到QQ、邮箱、微信等平台。页面布局简洁清晰，卡片式展示在线留言和联系方式，整体设计美观大方。通过这个功能，用户可以方便地与客服进行沟通和留言交流。
摘要由智能技术生成

做一个在线联系客服功能，页面展示了在线客服联系方式，也同时可以切换在线表单留言，但是留言不会记录，会通过第三方，AnPush可以推送到qq，邮箱，微信里面，需要自信配置key，当然了，可以改为本地php存储入库，看需求吧

如图所示：

微信截图_20240416161936.png

微信图片_20240416162325.png

这是代码html

  1. <section id="ns-contact-us" class="kf_contact">

  2.     <a class="ns-btn ns-btn-primary" href="javascript:void(0);">联系我们</a>

  3.     <ul class="ns-float-details">

  4.         <li>

  5.             <h2>联系我们</h2>

  6.             <div class="ns-close-float-contact-us">

  7.                 <span></span>

  8.                 <span></span>

  9.             </div>

  10.         </li>

  11.         <li>

  12.             <div class="hz_kf_box nosee bs" id="ly_box">

  13.                 <ul class="ly_con">

  14.                     <li class="tellz"><strong class="ts"><i class="txt">在线留言</i></strong></li>

  15.                     <li><input type="text" class="sign__input" name="name" placeholder="姓名" required=""></li>

  16.                     <li><input type="text" class="sign__input" name="tell" placeholder="联系方式" required=""></li>

  17.                     <li><input type="text" class="sign__input" name="mail" placeholder="邮箱账号" required=""></li>

  18.                     <li><textarea name="contents" placeholder="备注信息" rows="2"></textarea></li>

  19.                     <li>

  20.                         <div class="capt">

  21.                             <div id="captcha" class="captcha"></div>

  22.                             <div class="capinput"><input type="text" id="answer" name="capt" placeholder="输入验证码"></div>

  23.                         </div>

  24.                     </li>

  25.                     <li><button class="submit-btn ly_btnn" type="submit" name="mtn" disabled><span>提交</span></button>

  26.                     </li>

  27. 

  28.                 </ul>

  29. 

  30.             </div>

  31.             <div class="hz_kf_box seek" id="tel_box">

  32. 

  33.                 <ul class="kf_contactList kf1-flex bs s-box1">

  34.                     <li class="hz_kf_l1">

  35.                         <strong class="ts"><i class="txt">售前咨询</i></strong>

  36.                     </li>

  37.                     <li>

  38. 

  39.                         <p>售前咨询热线</p>

  40.                         <a href="tel:xxx">

  41.                             <p>xxxx</p>

  42.                         </a>

  43.                     </li>

  44.                     <li>

  45.                         <p>售前咨询电话</p>

  46.                         <a href="tel:xxx">

  47.                             <p>xxxx</p>

  48.                         </a>

  49.                     </li>

  50.                     <li class="hz_kf_l2">

  51.                         <div class="ly_btn" id="ly_btn">

  52.                             <span>提交需求 ></span>

  53.                         </div>

  54.                     </li>

  55.                 </ul>

  56.                 <ul class="kf_contactList kf2-flex bs s-box2">

  57. 

  58.                     <i class="bg-pri"></i>

  59.                     <div class="wx_pic">

  60.                         <img src="https://www.uicreater.com/home/images/footer/QR.png">

  61.                         <span>微信联系</span>

  62.                     </div>

  63.                     <li class="hz_kf_l1">

  64.                         <strong class="ts"><i class="txt">售后咨询</i></strong>

  65.                     </li>

  66.                     <li>

  67.                         <p>售后服务热线</p>

  68.                         <a href="tel:xxx">

  69.                             <p>xxxx</p>

  70.                         </a>

  71.                     </li>

  72.                     <li>

  73.                         <p>售后服务热线</p>

  74.                         <a href="tel:xxxx">

  75.                             <p>xxxx</p>

  76.                         </a>

  77.                     </li>

  78.                     <li>

  79.                         <p>

  80.                             媒体邮箱

  81.                         </p>

  82.                         <a href="mail:sales@wintoptec.com">

  83.                             <p>sales@wintoptec.com</p>

  84.                         </a>

  85.                     </li>

  86.                 </ul>

  87. 

  88.             </div>

  89.         </li>

  90.         <li>

  91. 

  92. 

  93. 

  94.         </li>

  95. 

  96.         <li class="tellz">

  97.             <div class="hz_kf_box hz_kf_box2 arr_btn nosee bs">

  98.                 返回电话联系

  99.             </div>

  100.             <div class="tell_btn">

  101.                 <div class="hz_kf_box hz_kf_box2 bs">

  102.                     <a href="">

  103.                     <span>人工在线咨询</span></a>

  104.                 </div>

  105.             </div>

  106.         </li>

  107. 

  108.         <li>

  109.             <div class="hz_kf_box hz_kf_box3">让科技服务日常，探索美好生活的无限可能</div>

  110.         </li>

  111.     </ul>

  112. </section>

  113.

这是jquery部分

  1. <script>

  2. $(document).ready(function() {

  3.   generateCaptcha();

  4.   initializeEventHandlers();

  5. });

  6. 

  7. function generateCaptcha() {

  8.   var num1 = Math.floor(Math.random() * 10);

  9.   var num2 = Math.floor(Math.random() * 10);

  10.   var result = num1 + num2;

  11.   $('#captcha').text(num1 + ' + ' + num2 + ' = ?');

  12.   $('#captcha').data('result', result);

  13. }

  14. 

  15. function validateEmail(email) {

  16.   var re = /^([a-zA-Z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;

  17.   return re.test(email);

  18. }

  19. 

  20. function initializeEventHandlers() {

  21.   $(".ns-btn-primary").on("click", function() {

  22.     $("#ns-contact-us").addClass("active");

  23.   });

  24. 

  25.   $(".ns-close-float-contact-us").on("click", function() {

  26.     $("#ns-contact-us").removeClass("active");

  27.     $(".arr_btn").addClass("nosee");

  28.     $(".tell_btn").removeClass("nosee");

  29.     $("#ly_box").addClass("nosee");

  30.     $("#tel_box").removeClass("nosee");

  31.   });

  32. 

  33.   $("#ly_btn").on("click", function() {

  34.     $("#tel_box").addClass("nosee");

  35.     $("#ly_box").removeClass("nosee");

  36.     $(".tell_btn").addClass("nosee");

  37.     $(".arr_btn").removeClass("nosee");

  38.   })

  39. 

  40.   $(".arr_btn").on("click", function() {

  41.     $(".arr_btn").addClass("nosee");

  42.     $(".tell_btn").removeClass("nosee");

  43.     $("#ly_box").addClass("nosee");

  44.     $("#tel_box").removeClass("nosee");

  45.   })

  46. 

  47.   $('#answer').on('blur', function() {

  48.     $('#answer').next('.error-msg').remove(); 

  49.     $('#answer').next('.ok-msg').remove(); 

  50.     var answer = parseInt($(this).val(), 10);

  51.     var correctAnswer = parseInt($('#captcha').data('result'), 10);

  52.     if (answer === correctAnswer) {

  53.       $('#captcha').next('.error-msg').remove();

  54.       $('<span class="ok-msg">验证成功</span>').insertAfter('#answer');

  55.       $('.ly_btnn').removeAttr('disabled');

  56.     } else {

  57.       if ($('#captcha').next('.error-msg').length === 0) {

  58.         $('<span class="error-msg">验证失败，请重新输入</span>').insertAfter('#answer');

  59.         $('.ly_btnn').prop('disabled', true);

  60.       }

  61.     }

  62.   });

  63. 

  64.   $(".submit-btn").click(function() {

  65.     var name = $("input[name='name']").val();

  66.     var tell = $("input[name='tell']").val();

  67.     var mail = $("input[name='mail']").val();

  68.     var content = $("textarea[name='contents']").val();

  69. 

  70.     if (name.trim() === '' || tell.trim() === '' || content.trim() === '') {

  71.       alert("请填写所有必填字段！");

  72.     } else if (!validateEmail(mail)) {

  73.       alert("请提供一个有效的邮箱地址！");

  74.     } else {  

  75.       var text = '姓名：'+name+', 电话：'+tell+', 邮箱：'+mail+', 备注信息：'+content;   

  76.       var settings = {

  77.         "url": "apikey",

  78.         "method": "POST",

  79.         "timeout": 0,

  80.         "headers": {

  81.           "Content-Type": "application/x-www-form-urlencoded"

  82.         },

  83.         "data": {

  84.           "title": '新留言线索',

  85.           "content": text,

  86.           "channel": xxxx

  87.         }

  88.       };

  89. 

  90.       $.ajax(settings).done(function(response) {

  91.         console.log(response);

  92.         alert('发布成功');

  93.         $("input[name='name']").val('');

  94.         $("input[name='tell']").val('');

  95.         $("input[name='mail']").val('');

  96.         $("textarea[name='contents']").val('');

  97.       }).fail(function(jqXHR, textStatus, errorThrown) {

  98.         console.log("Request failed: " + textStatus);

  99.       });

  100.     }

  101.   });

  102. }

  103. </script>

  104.

剩下是css部分，就可以了

  1. <style>

  2. 

  3. .bg-pri {

  4.     content: " ";

  5.     position: absolute;

  6.     border-radius: 50%;

  7.     background: #fc625d !important;

  8.     width: 12px;

  9.     height: 12px;

  10.     box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;

  11.     float: right;

  12.     right: 60px;

  13.     top: 16px

  14. }

  15. 

  16. .capt {

  17.     display: flex;

  18.     flex-wrap: wrap;

  19. 

  20. }

  21. 

  22. .capt .captcha {

  23.     line-height: 37px;

  24.     flex: 0 0 auto;

  25.     width: 20%;

  26. }

  27. 

  28. .capt .capinput {

  29.     flex: 0 0 auto;

  30.     width: 80%;

  31.     display: flex;

  32.     flex-wrap: wrap;

  33. }

  34. 

  35. #answer {

  36.     max-width: 200px;

  37. }

  38. 

  39. .ok-msg {

  40.     color: #30bf50;

  41.     font-size: 12px;

  42.     line-height: 37px;

  43.     margin-left: 20px;

  44. }

  45. 

  46. .error-msg {

  47.     color: red;

  48.     font-size: 12px;

  49.     line-height: 37px;

  50.     margin-left: 20px;

  51. }

  52. 

  53. .ts {

  54.     position: relative;

  55. }

  56. 

  57. .ts .txt {

  58.     font-style: normal;

  59.     position: relative;

  60. }

  61. 

  62. .ts::before {

  63.     content: '';

  64.     display: block;

  65.     position: absolute;

  66.     left: 0;

  67.     right: 0;

  68.     bottom: 0;

  69.     top: 60%;

  70.     background-color: rgba(255, 255, 0, 0.7);

  71. }

  72. 

  73. .ly_box2 {

  74.     margin-top: 0 !important;

  75.     background-color: #fff;

  76.     border-radius: 8px;

  77.     padding: 0;

  78.     justify-content: center !important;

  79.     align-items: center;

  80.     font-size: 15px;

  81.     font-weight: bold;

  82. }

  83. 

  84. .bs {

  85.     box-shadow: 0 0 13px 0 rgb(82 63 105 / 5%);

  86. }

  87. 

  88. .kf_contact a:hover {

  89.     color: #0d6efd;

  90. }

  91. 

  92. .nosee {

  93.     display: none !important;

  94. }

  95. 

  96. .ly_con {

  97.     width: 100%;

  98.     background-color: #fff;

  99.     border-radius: 8px;

  100.     padding: 10px 0;

  101.     box-sizing: border-box;

  102. }

  103. 

  104. .ly_con>li {

  105.     padding: 8px 25px;

  106.     

  107. }

  108. 

  109. .ly_con input,

  110. .ly_con textarea {

  111.     width: 100%;

  112.     padding: 5px 16px;

  113.     font-size: 13px;

  114.     color: #9199a1;

  115.     border-radius: inherit;

  116.     background: #eff6ff;

  117.     border: 0px;

  118. }

  119. .ly_con textarea{

  120.     height:100px;

  121. }

  122. 

  123. .ly_btnn {

  124.     width: 82px;

  125.     background-color: #0d6efd;

  126.     color: #fff;

  127.     border: none;

  128.     font-size: 13px;

  129.     border-radius: 4px;

  130.     letter-spacing: 5px;

  131.     display: block;

  132.     padding: 6px 20px;

  133. }

  134. 

  135. .ly_btnn:disabled {

  136.     pointer-events: none;

  137.     color: #ffffff;

  138.     background-color: #9aa5af;

  139.     border-color: #9aa5af;

  140.     cursor: not-allowed;

  141. }

  142. 

  143. .arr_btn {

  144.     cursor: pointer;

  145. }

  146. 

  147. .ly_btn {

  148.     cursor: pointer;

  149. }

  150. 

  151. #ns-contact-us {

  152.     position: fixed;

  153.     bottom: 30px;

  154.     right: 30px;

  155.     z-index: 9999;

  156. }

  157. 

  158. #ns-contact-us.kf_contact {

  159.     bottom: 130px;

  160. }

  161. 

  162. #ns-contact-us.kf_contact.active {

  163.     top: 50%;

  164.     bottom: auto;

  165.     left: 50%;

  166.     right: auto;

  167.     transform: translate(-50%, -50%);

  168.     box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);

  169.     border-radius: 12px;

  170.     overflow: hidden;

  171. }

  172. 

  173. a.ns-btn.ns-btn-primary {

  174.     background: #0d6efd;

  175.     color: white;

  176. }

  177. 

  178. a.ns-btn {

  179.     

  180.     padding: 10px 18px;

  181.     font-size: 13px;

  182.     border-radius: 6px;

  183. }

  184. 

  185. .ns-float-details {

  186.     background: url(https://www.uicreater.com/home/images/footer/bg.png) top right no-repeat #fcfcfc;

  187.     background-size: cover;

  188. }

  189. 

  190. .kf_contact .ns-float-details {

  191.     width: 606px;

  192. }

  193. 

  194. #ns-contact-us.kf_contact .ns-float-details {

  195.     background-color: #f6f8fa;

  196. }

  197. 

  198. #ns-contact-us.kf_contact .ns-float-details li h2 {

  199.     font-size: 22px;

  200.     background-image: url(https://www.wintoptec.com/syd/images/asnbg.jpg);

  201.     background-repeat: no-repeat;

  202.     background-size: cover;

  203.     background-position: center center;

  204. }

  205. 

  206. .hz_kf_box {

  207.     width: 90.3%;

  208.     margin: 5% auto 0;

  209.     display: flex;

  210.     flex-direction: row;

  211.     justify-content: space-between;

  212.     /*align-items: center;*/

  213. }

  214. 

  215. .hz_kf_box2 {

  216.     margin-top: 2%;

  217.     background-color: #fff;

  218.     border-radius: 8px;

  219.     padding: 15px 0;

  220.     justify-content: center;

  221.     align-items: center;

  222.     font-size: 14px;

  223.     color: #e60012;

  224.     font-weight: bold;

  225. 

  226. }

  227. .hz_kf_box2 a{

  228.     color: #e60012;

  229. }

  230. 

  231. .hz_kf_box3 {

  232.     margin-top: 3%;

  233.     font-size: 12px;

  234.     color: #999999;

  235.     display: block;

  236.     line-height: 1;

  237. 

  238. }

  239. 

  240. .wx_pic {

  241.     position: absolute;

  242.     bottom: 123px;

  243.     right: 20px;

  244.     width: 100px;

  245.     height: 30px;

  246.     z-index: 8040;

  247. 

  248.     border-radius: 50%;

  249.     box-shadow: 0 4px 8px 0 rgba(7, 17, 27, 0.1);

  250.     cursor: pointer;

  251.     text-align: center;

  252. }

  253. 

  254. .wx_pic img {

  255.     width: 100%

  256. }

  257. 

  258. .wx_pic span {

  259.     font-size: 12px;

  260. }

  261. 

  262. .kf_contactList {

  263.     background-color: #fff;

  264.     border-radius: 8px;

  265.     padding: 15px 0;

  266.     box-sizing: border-box;

  267. }

  268. 

  269. .kf1-flex {

  270.     width: 38%;

  271. }

  272. 

  273. .kf2-flex {

  274.     width: 60%;

  275.     position: relative;

  276. }

  277. 

  278. .kf_contactList>li {

  279.     padding: 0 30px 15px;

  280. }

  281. 

  282. .kf_contactList>li {

  283.     font-size: 18px;

  284.     color: #333;

  285. }

  286. 

  287. .hz_kf_l1 {

  288.     padding-bottom: 20px;

  289.     font-weight: bold;

  290. }

  291. 

  292. .hz_kf_l2 {

  293.     margin: 5px 0;

  294. }

  295. 

  296. .kf_contactList>li span {

  297.     font-size: 14px;

  298.     color: #e60012;

  299.     font-weight: bold;

  300. }

  301. 

  302. .kf_contactIcon1 {

  303.     width: 22px;

  304.     margin-right: 7px;

  305.     margin-top: -6px;

  306. }

  307. 

  308. .s-box1 {

  309.     background: linear-gradient(180deg, #fffaf0 0%, #ffffff 100%);

  310. }

  311. 

  312. .s-box2 {

  313.     background: linear-gradient(180deg, #fff8f8 0%, #ffffff 100%);

  314. }

  315. 

  316. .s-box3 {

  317.     background: linear-gradient(180deg, #f0f6ff 0%, #ffffff 100%);

  318. }

  319. 

  320. #ns-contact-us.kf_contact .ns-float-details li::after {

  321.     display: none;

  322. }

  323. 

  324. #ns-contact-us.kf_contact .kf_contactList>li p {

  325.     padding: 0;

  326.     font-size: 14px;

  327. 

  328. }

  329. 

  330. #ns-contact-us.kf_contact .kf_contactList>li p:first-child {

  331.     font-size: 14px;

  332. }

  333. 

  334. #ns-contact-us.kf_contact .ns-float-details li p:last-child {

  335.     padding-bottom: 0;

  336. }

  337. 

  338. .kf_contactImg1 {

  339.     width: 6px;

  340. }

  341. 

  342. .kf_contactImg2 {

  343.     width: 18px;

  344. }

  345. 

  346. .kf_contactIcon6 {

  347.     width: 7px;

  348. }

  349. 

  350. .hz_kf_l2:hover .kf_contactImg1 {

  351.     transform: translate(3px, 0);

  352. }

  353. 

  354. 

  355. 

  356. @media screen and (max-width:768px) {

  357.     .kf_contact { display: none;}

  358.     #ns-contact-us.kf_contact {

  359.         bottom: 100px;

  360.     }

  361. 

  362.     #ns-contact-us.kf_contact .ns-btn {

  363.         font-size: 4.3vw;

  364.         padding: 6px 25px;

  365.     }

  366. 

  367.     .kf_contact .ns-float-details {

  368.         width: 93.3vw;

  369.         margin: 0 auto;

  370.     }

  371. 

  372.     #ns-contact-us.kf_contact .ns-float-details li h2 {

  373.         font-size: 4.5vw;

  374.     }

  375. 

  376.     .kf_contactList {

  377.         /*padding:15px 15px 0 15px;*/

  378.     }

  379. 

  380.     .kf_contactList>li {

  381.         margin-bottom: 3%;

  382.         padding: 5% 15px;

  383.     }

  384. 

  385.     .kf_contactList>li {

  386.         font-size: 3.7vw;

  387.     }

  388. 

  389.     .kf_contactIcon1 {

  390.         width: 4.6vw;

  391.     }

  392. 

  393.     .kf_contactList>li span {

  394.         font-size: 3.5vw;

  395.     }

  396. 

  397.     .hz_kf_l1 {

  398.         padding-bottom: 7%;

  399.     }

  400. 

  401.     .hz_kf_l2 {

  402.         /*padding:3% 0 5%;*/

  403.         margin: 0 auto;

  404.     }

  405. 

  406.     #ns-contact-us.kf_contact .kf_contactList>li p:first-child {

  407.         font-size: 2.9vw;

  408.     }

  409. 

  410.     #ns-contact-us .ns-float-details li p:last-child {

  411.         font-size: 4.5vw;

  412.         white-space: pre-wrap;

  413.     }

  414. 

  415.     .hz_kf_box2 {

  416.         font-size: 3.7vw;

  417.     }

  418. 

  419.     .hz_kf_box3 {

  420.         font-size: 3.5vw;

  421.     }

  422. 

  423.     .kf_contactList>li:hover {

  424.         background-color: #FFF;

  425.     }

  426. 

  427.     .hz_kf_box2:hover {

  428.         background-color: #FFF;

  429.     }

  430. }

  431. 

  432. #ns-contact-us .ns-btn {

  433.     margin: 0

  434. }

  435. 

  436. #ns-contact-us.active .ns-float-details {

  437.     display: block;

  438.     padding-bottom: 20px

  439. }

  440. 

  441. #ns-contact-us.active .ns-btn {

  442.     display: none;

  443. }

  444. 

  445. #ns-contact-us .ns-float-details {

  446.     display: none;

  447.     box-shadow: 0 2px 4px rgba(0, 0, 0, .1)

  448. }

  449. 

  450. #ns-contact-us .ns-float-details li {

  451.     position: relative;

  452.     list-style-type: none;

  453. }

  454. 

  455. #ns-contact-us .ns-float-details li:last-child:after {

  456.     display: none

  457. }

  458. 

  459. #ns-contact-us .ns-float-details li::after {

  460.     content: "";

  461.     display: block;

  462.     height: 1px;

  463.     width: calc(100% - 60px);

  464.     margin: 0 auto;

  465.     background: #e5e5e5

  466. }

  467. 

  468. #ns-contact-us .ns-float-details li h2 {

  469.     color: #fff;

  470.     padding: 20px 30px;

  471.     background: #0d6efd;

  472.     font-size: 24px

  473. }

  474. 

  475. #ns-contact-us .ns-float-details li a:hover {

  476.     text-decoration: none

  477. }

  478. 

  479. #ns-contact-us .ns-float-details li h3 {

  480.     padding: 20px 30px;

  481.     font-size: 18px;

  482.     transition: all .5s;

  483.     display: block;

  484.     color: #000;

  485.     position: relative

  486. }

  487. 

  488. #ns-contact-us .ns-float-details li h3:hover {

  489.     background: #f5f5f5

  490. }

  491. 

  492. #ns-contact-us .ns-float-details li h3::after {

  493.     content: "";

  494.     

  495.     background-size: cover;

  496.     background-position: -6px 0;

  497.     width: 6px;

  498.     height: 10px;

  499.     position: absolute;

  500.     top: 50%;

  501.     right: 30px;

  502.     transform: translateY(-50%)

  503. }

  504. 

  505. #ns-contact-us .ns-float-details li p {

  506.     padding: 5px 30px;

  507.     font-size: 16px;

  508.     display: flex;

  509.     align-items: center;

  510. }

  511. 

  512. #ns-contact-us .ns-float-details li p:last-child {

  513.     padding-bottom: 15px

  514. }

  515. 

  516. #ns-contact-us .ns-float-details li p img {

  517.     margin-right: 10px

  518. }

  519. 

  520. #ns-contact-us .ns-float-details li .ns-close-float-contact-us span {

  521.     width: 20px;

  522.     height: 3px;

  523.     position: absolute;

  524.     top: 50%;

  525.     right: 30px;

  526.     background: #fff;

  527.     cursor: pointer

  528. }

  529. 

  530. #ns-contact-us .ns-float-details li .ns-close-float-contact-us span:nth-of-type(1) {

  531.     transform: translateY(-50%) rotate(45deg)

  532. }

  533. 

  534. #ns-contact-us .ns-float-details li .ns-close-float-contact-us span:nth-of-type(2) {

  535.     transform: translateY(-50%) rotate(-45deg)

  536. }

  537. 

  538. </style>

  539.
文章由官网发布，如若转载，请注明出处：https://www.veimoz.com/2257
在线客服
0 评论
1k

发表评论

相关推荐

随机推荐

小灯泡设计

形式在改 初心不变

热门主题 AI+客服

热门文章

自媒体博客Spimes主题44w 阅读

Spimes主题专为博客、自媒体、资讯类的网站设计....

Splity博客双栏主题14w 阅读

仿制主题，Typecho博客主题，昼夜双版设计，可....

vCard主题个人简历主题13w 阅读

一款个人简历主题，可以简单搭建一下，具体也比较简单....

Spzac个人资讯下载类主题12w 阅读

用于作品展示、资源下载，行业垂直性网站、个人博客，....

热评文章

自媒体博客Spimes主题424 评论
Splity博客双栏主题191 评论
Spzac个人资讯下载类主题89 评论
Splinx博客图片主题35 评论
Spzhi知识付费社区主题34 评论
三栏清新博客S_blog主题31 评论
vCard主题个人简历主题29 评论
Pure轻简主题29 评论

最新评论

chenyu

3天前

能不能支持deepseek

油腻男

4月3日

感谢分享😀

xiao

3月15日

有个人中心对接tepass插件的教程吗

nobestirn

3月11日

你好，7.5版本我点击下载，提示拒绝访问

chenyu

2月19日

[已回复]

怎么配置主题 没看到教程

!