时间：2023-09-17 08:54:01 | 来源：网站运营
时间：2023-09-17 08:54:01 来源：网站运营
可视化网站教程：最流行的搭建工具及必学的7个功能：| 序 | 工具 | 编程要求 | 适用类型 | 参考示例 | 备注 |
| 1 | wordpress | 无 | 网站/博客 | https://demo.styledthemes.com/styledstore/ | 免费，安装插件，拖拽即可，可付费插件 |
| 2 | docsify | 低 | 文档教程 | https://docsify.js.org/#/zh-cn/ | 免费，好多Github上文档教程都用这个 |
| 3 | dumi | 中 | 网站/博客/教程 | https://d.umijs.org/zh-CN | 免费，umi制作成的Demo |
| 4 | umi - ant design landing | 中 | 网站/博客（首页） | https://motion.ant.design/index-cn | 免费，主要面向网站首页 |
| 5 | gatsby | 相对高 | 网站/博客/教程 | https://brittanychiang.com/ | 免费，定制程度相对高 |
在线咨询
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="static/css/bootstrap.min.css"> <link rel="stylesheet" href="static/css/swiper.min.css"> <link rel="stylesheet" href="static/css/timePicker.css"> <!-- template styles --> <link rel="stylesheet" href="static/css/izeetak.css"></head><body><div class="page-wrapper"> <!--Main Slider Start--> <section class="main-slider"> <div class="swiper-container thm-swiper__slider" data-swiper-options='{"slidesPerView": 1, "loop": true, "effect": "fade", "pagination": { "el": "#main-slider-pagination", "type": "bullets", "clickable": true }, "autoplay": { "delay": 5000 }}'> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="image-layer" style="background-image: url(static/image/of1.png);"> </div> <div class="image-layer-overlay"></div> <!-- /.image-layer --> <div class="container"> <div class="row"> <div class="col-lg-8"> <div class="main-slider__content"> <h2>免费 - 高效</h2> <p>Ofter是一个免费学习数据科学的平台</p> <a href="about.html" class="thm-btn">更 多</a> </div> </div> </div> </div> </div> <div class="swiper-slide"> <div class="image-layer" style="background-image: url(static/image/of2.png);"> </div> <div class="image-layer-overlay"></div> <!-- /.image-layer --> <div class="container"> <div class="row"> <div class="col-lg-8"> <div class="main-slider__content"> <h2>免费 - 高效</h2> <p>Ofter是一个免费学习数据科学的平台</p> <a href="about.html" class="thm-btn">更 多</a> </div> </div> </div> </div> </div> <div class="swiper-slide"> <div class="image-layer" style="background-image: url(static/image/of3.png);"> </div> <div class="image-layer-overlay"></div> <!-- /.image-layer --> <div class="container"> <div class="row"> <div class="col-lg-8"> <div class="main-slider__content"> <h2>免费 - 高效</h2> <p>Ofter是一个免费学习数据科学的平台</p> <a href="about.html" class="thm-btn">更 多</a> </div> </div> </div> </div> </div> </div> <!-- If we need navigation buttons --> <!-- 如果需要分页器 --> <div class="swiper-pagination" id="main-slider-pagination"></div> </div> </section> <!--Main Slider End--></div><!-- /.page-wrapper --><script src="static/js/swiper-bundle.min.js"></script><!-- template js --><script> var mySwiper = new Swiper('.thm-swiper__slider', { loop: true, // 循环模式选项 pagination: { el: "#main-slider-pagination", type: "bullets", clickable: true }, autoplay: { delay: 5000 }, // 如果需要前进后退按钮 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, // 如果需要滚动条 scrollbar: { el: '.swiper-scrollbar', }, })</script></body></html>//导航代码<a href="#get"><span>◈ Get</span></a>//内容代码<a name="get">Get to Know About us</a><a href="#" id="myBtn" data-target="html" class="scroll-to-target scroll-to-top"><i class="fa fa-angle-up"></i></a><script type="text/javascript"> window.onscroll = function () { scrollFunction() }; function scrollFunction() { console.log(121); if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) { document.getElementById("myBtn").style.display = "block"; } else { document.getElementById("myBtn").style.display = "none"; } }</script><video width="800" controls> <source src="static/picture/bg-video.mp4" type="video/mp4"></video>//文件在线阅读<a href="static/picture/python工程师技能图谱.pdf" target="_blank"> <img src="static/picture/python1.jpg" width="300" height="400" alt="python"/></a>//文件下载<a href="static/picture/python工程师技能图谱.pdf" download="static/picture/python工程师技能图谱.pdf"> <img class="file_text_icon" src="static/picture/download.png" alt="下载icon"> <p class="file_text_font"> Python工程师 </p></a>@media (max-width: 991px) { .sidebar { margin-top: 50px; }}关键词：工具,功能,教程,流行
