21ic电子技术开发论坛 › 综合技术交流 › 电子技术交流论坛 › 用Quark开发板做一个网站服务器
返回列表 发新帖我要提问本帖赏金: 50.00元(功能说明)

用Quark开发板做一个网站服务器

[复制链接]
 楼主| qbwww 发表于 2022-1-9 21:27 | 显示全部楼层 |阅读模式
<
ar, 开发板, TE, AC, AN, ST
本帖最后由 qbwww 于 2022-1-9 21:27 编辑
#申请原创# 　　@21小跑堂 用Quark开发板做一个网站服务器



　　大家好，我是qbwww。

      先看看效果图。


　　年前的时候呢，得到一个夸克（Quark）的开发板，此板是由稚晖君设计制作的。传说中的最小开发板。今天刚好有时间，我就来熟悉一下开发板。今天的目标呢，就是用这个开发板来做一个网站服务器。

　　先来看一下开发板，开发板的配置还是蛮高的。权志H3的CPU，512M的运行内存，16G的存储空间，支持WiFi和蓝牙。有两个USB A的接口，type-c接口用来供电。




　　好，下面我们开始制作镜像，我们先把系统镜像和烧写软件下载好。






　　下载地址：https://www.balena.io/etcher/，开发板资料：https://wiki.seeedstudio.com/cn/ ... ux-Development-Kit/

　　我们点我同意就可以直接把烧写软件安装好。



　　找一个32G以上的SD卡和读卡器，插在电脑上，烧写镜像。



　　选择好镜像和sd卡就直接开始烧录。第1次失败了。我把优盘做成fat32格式的再重新写一下，看能不能成功。







　　解决烧写失败的问题用了很长时间，好在最后烧写成功了，烧写时SD卡的文件格式很重要，要用fat32的，不然会失败。





　　烧写好SD卡，把SD卡插到开发板上，我们可以看到小屏幕上的日志消息。我用键盘连接其中的USB口，以方便下面的配置。



　　系统启动完成呢，我们首先要进行的就是WiFi网络的连接，连接好网络后我们才可以方便的进行其它操作。具体步骤如下。

　　切换到root用户:
复制
  1. su root

　　开启Wi-Fi：
复制
  1. nmcli r wifi on

　　扫描附近的Wi-Fi:
复制
  1. nmcli dev wifi

　　连接到特定的Wi-Fi:
复制
  1. nmcli dev wifi connect"SSID"password"PASSWORD"ifname wlan0

　　重启网卡设备
复制
  1. sudo ifconfig wlan0 down
    

  2. sudo ifconfig wlan0 up

　　这样就连接好WiFi了。

　　连接完成后，可以去路由器看一下开发板的IP地址。我这个地址是192.168.123.18。



　　我们打开sheel工具。新建一个ssh链接，连接到开发板。



　　这样我们就可以在电脑上来对此开发板进行远程操作了。



　　这款开发板还带一个xrdp远程桌面功能。我们也来试一下远程桌面。和刚刚的操作一样，只是链接我们建一个远程桌面连接用rpg模式。



　　至此呢，我们的开发版的操作系统就安装完成了。这套操作系统是基于乌班图的。系统里面已经安装好了ngix。也就是网站服务器。我们打开开发板的域名。就会看到我们的网页了。网页是hello world。

　　下面做一个简单的静态网页。
      静态网页代码：
复制
  1. <!DOCTYPE html>
    

  2. <html lang="en">
    

  3. <head>
    

  4. <meta charset="UTF-8">
    

  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
    

  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    

  7. <title>参加创作打卡挑战赛，瓜分万元现金大奖</title>
    

  8. <!--Usefull Meta-->
    

  9. <meta name="description" content="A slick, customizable CV, Resume or Portfolio template, perfect for photographers, freelancers or designers.">
    

  10. <meta name="keywords" content="angus, resume, cv, vCard, portfolio, html template, template, responsive">
    

  11. <!--Google Fonts-->
    

  12. <link href="static/css/css2.css" rel="stylesheet">
    

  13. <link href="static/css/css21.css" rel="stylesheet">
    

  14. <!--AOS Animation Stylesheet-->
    

  15. <link rel="stylesheet" href="static/css/aos.css">
    

  16. <!--Font Awesome-->
    

  17. <link rel="stylesheet" href="static/css/all.min.css">
    

  18. <!--Magnific Popup-->
    

  19. <link rel="stylesheet" href="static/css/magnific-popup.css">
    

  20. <!--OWL Carousel-->
    

  21. <link rel="stylesheet" href="static/css/owl.carousel.min.css">
    

  22. <!--Keyden Styelsheet with Bootstrap 5-->
    

  23. <link rel="stylesheet" href="static/css/kayden_1.css">
    

  24. </head>
    

  25. <body data-offset="102">
    

  26. <!--PRELOADER START-->
    

  27. <div id="preloader">
    

  28.   <div class="text-center w-100">
    

  29.     <div class="loader"></div>
    

  30.   </div>
    

  31. </div>
    

  32. <!--PRELOADER END--> 
    

  33. <!--Header START-->
    

  34. <header class="kayden-header sticky-top">
    

  35.   <div class="header-inside transparent_header">
    

  36.     <div class="d-flex flex-row justify-content-between align-items-center"> 
    

  37.       <!--Header Toggler START-->
    

  38.       <div class="kayden-menu-toggler"><a class="kayden-toggler text-reset" data-bs-toggle="offcanvas" href="#kaydenOffCanvas" role="button" aria-controls="kaydenOffCanvas">
    

  39.         <div class="kt-r"><span></span><span></span><span></span></div>
    

  40.         <div class="kt-t">目录 </div>
    

  41.         </a></div>
    

  42.       <!--Header Toggler END--><!--Header ** START-->
    

  43.       <div class="kayden-**"><a href="#"><img src="static/picture/**1.png" height="30" alt="kayden"></a></div>
    

  44.       <!--Header ** END--><!--Header Info START-->
    

  45.       <div class="kayden-nav-meta fs-5 fw-bold d-none d-sm-block text-end"><a href="#" class="text-reset">010-82168451</a></div>
    

  46.       <!--Header Info END--></div>
    

  47.   </div>
    

  48. </header>
    

  49. <!--Header END--><!--Off Canvas START-->
    

  50. <div class="offcanvas offcanvas-start" id="kaydenOffCanvas"> 
    

  51.   <!--Off Canvas Header START-->
    

  52.   <div class="offcanvas-header">
    

  53.     <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"><i class="fas fa-times"></i></button>
    

  54.   </div>
    

  55.   <!--Off Canvas Header END--><!--Off Canvas Body START-->
    

  56.   <div class="offcanvas-body">
    

  57.     <div class="kayden-offcanvas-nav-container d-flex flex-column justify-content-center align-items-center"><!--Off Canvas Navigation START-->
    

  58.       <ul class="kayden-offcanvas-nav list-inline">
    

  59.         <li class="py-3"><a href="#home" class="kayden_scrollspy underline_animation underline_text text-reset fs-4 fw-bold" data-bs-dismiss="offcanvas">Home</a></li>
    

  60.         <li class="py-3"><a href="#about" class="kayden_scrollspy underline_animation underline_text text-reset fs-4 fw-bold" data-bs-dismiss="offcanvas">About</a></li>
    

  61.         <li class="py-3"><a href="#portfolio" class="kayden_scrollspy underline_animation underline_text text-reset fs-4 fw-bold" data-bs-dismiss="offcanvas">Portfolio</a></li>
    

  62.         <li class="py-3"><a href="#faq" class="kayden_scrollspy underline_animation underline_text text-reset fs-4 fw-bold" data-bs-dismiss="offcanvas">FAQ</a></li>
    

  63.         <li class="py-3"><a href="#contact" class="kayden_scrollspy underline_animation underline_text text-reset fs-4 fw-bold" data-bs-dismiss="offcanvas">Contact</a></li>
    

  64.       </ul>
    

  65.       <!--Off Canvas Navigation END--> 
    

  66.     </div>
    

  67.   </div>
    

  68.   <!--Off Canvas Body END--> 
    

  69. </div>
    

  70. <!--Off Canvas END--><!--Home Section START-->
    

  71. <section id="home" class="home vh-100"><!--Home Background START-->
    

  72.   <div class="home-background position-absolute top-0 start-0 w-100 h-100"><img src="static/picture/home.jpg" data-aos="fade-up" data-aos-duration="1000" alt="home" class="w-100 h-100 fit-cover fit-left-top"></div>
    

  73.   <!--Home Background END--><!--Home Container START-->
    

  74.   <div class="container h-100 position-relative">
    

  75.     <div class="home-details text-center text-sm-end w-100 h-100 d-flex align-items-center">
    

  76.       <div class="home-details-inner w-100">
    

  77.         <p class="welcome_text fs-4" data-aos="fade-up" data-aos-duration="800" data-aos-delay="500"><span class="typed_text" data-options="分享原创内容,完成打卡任务,赢取现金大奖"></span></p>
    

  78.         <h1 class="fs-1 fw-bold  kayden-underline-center kayden-underline-sm-right kayden-underline-big d-inline-block" data-aos="fade-up" data-aos-duration="800" data-aos-delay="800">参加创作打卡挑战赛，瓜分万元现金大奖</h1>
    

  79.       </div>
    

  80.     </div>
    

  81.   </div>
    

  82.   <!--Home Container END--> 
    

  83.   <!--Scroll Down START-->
    

  84.   <div class="scroll-down"> <a href="#about" class="kayden_scrollspy scroll-down-link text-center">
    

  85.     <div class="scroll-title">向下滚动</div>
    

  86.     <div class="scroll-mouse">
    

  87.       <div class="whell"></div>
    

  88.     </div>
    

  89.     </a> </div>
    

  90.   <!--Scroll Down END--> 
    

  91. </section>
    

  92. <!--Home Section END--> 
    

  93. <!--About Section START-->
    

  94. <section id="about" class="min-vh-100">
    

  95.   <div class="container h-100">
    

  96.     <div class="about_inside w-100 h-100 d-flex justify-content-center align-items-center">
    

  97.       <div class="row w-100"> 
    

  98.         <!--About Section Picture START-->
    

  99.         <div class="offset-md-1 col-md-4">
    

  100.           <div class="about-image w-100"> <img src="static/picture/about.jpg" class="kayden-shadow rounded-3 w-100" alt="kayden Picture" data-aos="zoom-in" data-aos-duration="800"> </div>
    

  101.         </div>
    

  102.         <!--About Section Picture END--> 
    

  103.         <!--About Section Details START-->
    

  104.         <div class="offset-md-1 col-md-6 mt-5 mt-md-0">
    

  105.           <div class="h-100 d-flex align-items-center justify-content-center">
    

  106.             <div class="about-details">
    

  107.               <h2 class="fs-3 fw-bold mb-5">I'm Kayden Morris</h2>
    

  108.               <p class="text-secondary mb-5">Hi!There are many variations of passages of Lorem Ipsum available,but the majority have suffered alteration in some form,by injected humour,or randomised words which don't look even slightly believable.</p>
    

  109.               <!--Social Links START-->
    

  110.               <ul class="social-links list-inline mb-5">
    

  111.                 <li class="list-inline-item"> <a href="#" title="facebook"> <i class="fab fa-facebook-f"></i> </a> </li>
    

  112.                 <li class="list-inline-item"> <a href="#" title="linkedin"> <i class="fab fa-linkedin-in"></i> </a> </li>
    

  113.                 <li class="list-inline-item"> <a href="#" title="pinterest"> <i class="fab fa-pinterest-p"></i> </a> </li>
    

  114.                 <li class="list-inline-item"> <a href="#" title="git"> <i class="fab fa-git"></i> </a> </li>
    

  115.               </ul>
    

  116.               <!--Social Links END--> 
    

  117.               <a href="#" class="btn btn-outline-primary" title="Download CV">Download CV</a> </div>
    

  118.           </div>
    

  119.         </div>
    

  120.         <!--About Section Details END--> 
    

  121.       </div>
    

  122.     </div>
    

  123.   </div>
    

  124. </section>
    

  125. <!--About Section END--> 
    

  126. <!--Services Section START-->
    

  127. <section id="services">
    

  128.   <div class="container"> 
    

  129.     <!--Section Heading START-->
    

  130.     <div class="heading text-center mb-5">
    

  131.       <h2 class="fs-3 kayden-underline-left mb-5 fw-bold text-uppercase d-inline-block">Services</h2>
    

  132.     </div>
    

  133.     <!--Section Heading END--> 
    

  134.     <!--Section Body START-->
    

  135.     <div class="section-body"> 
    

  136.       <!--Gradient Grid START-->
    

  137.       <div class="kayden-gradient-grid"> 
    

  138.         <!--Gradient Grid ROW START-->
    

  139.         <div class="row g-0"> 
    

  140.           <!--Gradient Grid Item START-->
    

  141.           <div class="col-lg-4 text-center">
    

  142.             <div class="p-5">
    

  143.               <div class="fs-2 mb-3"> <i class="fas fa-server"></i> </div>
    

  144.               <h4 class="mb-3">Development</h4>
    

  145.               <p class="text-secondary">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    

  146.             </div>
    

  147.           </div>
    

  148.           <!--Gradient Grid Item END--> 
    

  149.           <!--Gradient Grid Item START-->
    

  150.           <div class="col-lg-4 text-center">
    

  151.             <div class="p-5">
    

  152.               <div class="fs-2 mb-3"> <i class="fas fa-mobile-alt"></i> </div>
    

  153.               <h4 class="mb-3">Responsive</h4>
    

  154.               <p class="text-secondary">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    

  155.             </div>
    

  156.           </div>
    

  157.           <!--Gradient Grid Item END--> 
    

  158.           <!--Gradient Grid Item START-->
    

  159.           <div class="col-lg-4 text-center">
    

  160.             <div class="p-5">
    

  161.               <div class="fs-2 mb-3"> <i class="fas fa-mug-hot"></i> </div>
    

  162.               <h4 class="mb-3">UX / UI Design</h4>
    

  163.               <p class="text-secondary">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    

  164.             </div>
    

  165.           </div>
    

  166.           <!--Gradient Grid Item END--> 
    

  167.         </div>
    

  168.         <!--Gradient Grid ROW END--> 
    

  169.         <!--Gradient Grid ROW START-->
    

  170.         <div class="row g-0"> 
    

  171.           <!--Gradient Grid Item START-->
    

  172.           <div class="col-lg-4 text-center">
    

  173.             <div class="p-5">
    

  174.               <div class="fs-2 mb-3"> <i class="far fa-clone"></i> </div>
    

  175.               <h4 class="mb-3">User Friendly</h4>
    

  176.               <p class="text-secondary">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    

  177.             </div>
    

  178.           </div>
    

  179.           <!--Gradient Grid Item END--> 
    

  180.           <!--Gradient Grid Item START-->
    

  181.           <div class="col-lg-4 text-center">
    

  182.             <div class="p-5">
    

  183.               <div class="fs-2 mb-3"> <i class="far fa-heart"></i> </div>
    

  184.               <h4 class="mb-3">Lovely</h4>
    

  185.               <p class="text-secondary">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    

  186.             </div>
    

  187.           </div>
    

  188.           <!--Gradient Grid Item END--> 
    

  189.           <!--Gradient Grid Item START-->
    

  190.           <div class="col-lg-4 text-center">
    

  191.             <div class="p-5">
    

  192.               <div class="fs-2 mb-3"> <i class="fas fa-rocket"></i> </div>
    

  193.               <h4 class="mb-3">Bootstrap 5</h4>
    

  194.               <p class="text-secondary">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    

  195.             </div>
    

  196.           </div>
    

  197.           <!--Gradient Grid Item END--> 
    

  198.         </div>
    

  199.         <!--Gradient Grid ROW END--> 
    

  200.       </div>
    

  201.       <!--Gradient Grid END--> 
    

  202.     </div>
    

  203.     <!--Section Body END--> 
    

  204.   </div>
    

  205. </section>
    

  206. <!--Services Section END--> 
    

  207. <!--Facts Section START-->
    

  208. <section id="facts"> 
    

  209.   <!--Section Body START-->
    

  210.   <div class="section-body">
    

  211.     <div class="container">
    

  212.       <div class="row gy-5">
    

  213.         <div class="col-md-6">
    

  214.           <div class="row gx-3 gy-5">
    

  215.             <div class="col-6"> 
    

  216.               <!--Facts Item START-->
    

  217.               <div class="fact d-flex flex-column align-items-center align-items-md-start">
    

  218.                 <h3 class="fs-2 d-inline-block"><span class="tmcounter" data-from="0" data-to="9" data-speed="1500">0</span><sup>+</sup></h3>
    

  219.                 <p class="fs-4 d-inline-block text-center text-md-left">Years Experience</p>
    

  220.               </div>
    

  221.               <!--Facts Item END--> 
    

  222.             </div>
    

  223.             <div class="col-6"> 
    

  224.               <!--Facts Item START-->
    

  225.               <div class="fact d-flex flex-column align-items-center align-items-md-start">
    

  226.                 <h3 class="fs-2 d-inline-block"><span class="tmcounter" data-from="0" data-to="100" data-speed="1500">0</span><sup>+</sup></h3>
    

  227.                 <p class="fs-4 d-inline-block text-center text-md-left">Happy Clients</p>
    

  228.               </div>
    

  229.               <!--Facts Item END--> 
    

  230.             </div>
    

  231.             <div class="col-6"> 
    

  232.               <!--Facts Item START-->
    

  233.               <div class="fact d-flex flex-column align-items-center align-items-md-start">
    

  234.                 <h3 class="fs-2 d-inline-block"><span class="tmcounter" data-from="0" data-to="8963" data-speed="1500">0</span></h3>
    

  235.                 <p class="fs-4 d-inline-block text-center text-md-left">Downloads</p>
    

  236.               </div>
    

  237.               <!--Facts Item END--> 
    

  238.             </div>
    

  239.             <div class="col-6"> 
    

  240.               <!--Facts Item START-->
    

  241.               <div class="fact d-flex flex-column align-items-center align-items-md-start">
    

  242.                 <h3 class="fs-2 d-inline-block"><span class="tmcounter" data-from="0" data-to="2569" data-speed="1500">0</span></h3>
    

  243.                 <p class="fs-4 d-inline-block text-center text-md-left">Projects done</p>
    

  244.               </div>
    

  245.               <!--Facts Item END--> 
    

  246.             </div>
    

  247.           </div>
    

  248.         </div>
    

  249.         <div class="col-md-6">
    

  250.           <h2 class="fs-3 mb-5 fw-bold">My Skills</h2>
    

  251.           <div class="skills_container"> 
    

  252.             <!--Progress Bar START-->
    

  253.             <div class="mb-4">
    

  254.               <label class="mb-3 fs-6">Web Design 75%</label>
    

  255.               <div class="progress">
    

  256.                 <div class="progress-bar progress-bar-loadAnimation" data-percent="75" style="width: 0%;" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
    

  257.               </div>
    

  258.             </div>
    

  259.             <!--Progress Bar END--> 
    

  260.             <!--Progress Bar START-->
    

  261.             <div class="mb-4">
    

  262.               <label class="mb-3 fs-6">Web Development 90%</label>
    

  263.               <div class="progress">
    

  264.                 <div class="progress-bar progress-bar-loadAnimation" data-percent="90" style="width: 0%;" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
    

  265.               </div>
    

  266.             </div>
    

  267.             <!--Progress Bar END--> 
    

  268.             <!--Progress Bar START-->
    

  269.             <div class="mb-4">
    

  270.               <label class="mb-3 fs-6">Wordpress development 70%</label>
    

  271.               <div class="progress">
    

  272.                 <div class="progress-bar progress-bar-loadAnimation" data-percent="70" style="width: 0%;" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
    

  273.               </div>
    

  274.             </div>
    

  275.             <!--Progress Bar END--> 
    

  276.             <!--Progress Bar START-->
    

  277.             <div class="mb-4">
    

  278.               <label class="mb-3 fs-6">Front end development 95%</label>
    

  279.               <div class="progress">
    

  280.                 <div class="progress-bar progress-bar-loadAnimation" data-percent="95" style="width: 0%;" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
    

  281.               </div>
    

  282.             </div>
    

  283.             <!--Progress Bar END--> 
    

  284.           </div>
    

  285.         </div>
    

  286.       </div>
    

  287.     </div>
    

  288.   </div>
    

  289.   <!--Section Body END--> 
    

  290. </section>
    

  291. <!--Facts Sectrion END--> 
    

  292. <!--Portfolio Section START-->
    

  293. <section id="portfolio">
    

  294.   <div class="container"> 
    

  295.     <!--Section Heading START-->
    

  296.     <div class="heading text-center mb-5">
    

  297.       <h2 class="fs-3 kayden-underline-left mb-5 fw-bold text-uppercase d-inline-block">Portfolio</h2>
    

  298.     </div>
    

  299.     <!--Section Heading END--> 
    

  300.     <!--Section Body START-->
    

  301.     <div class="section-body"> 
    

  302.       <!--Masonry Grid Container START-->
    

  303.       <div class="row gy-5 grid"> 
    

  304.         <!--Masonry Grid Item START-->
    

  305.         <div class="col-md-6 col-lg-4 grid-item"> <a href="static/picture/portfolio1.jpg" class="portfolio-item portfolio-image underline_animation text-reset">
    

  306.           <div class="portfolio-thumbnail"> <img src="static/picture/portfolio1.jpg" class="img-fluid img-grayTransition" alt=""> </div>
    

  307.           <div class="portfolio-description my-3">
    

  308.             <h3 class="fs-5 underline_text fw-bold d-inline-block">Man in Neon</h3>
    

  309.             <span class="d-block fw-light small-font-size">Street</span> </div>
    

  310.           </a> </div>
    

  311.         <!--Masonry Grid Item END--> 
    

  312.         <!--Masonry Grid Item START-->
    

  313.         <div class="col-md-6 col-lg-4 grid-item"> <a href="static/picture/portfolio2.jpg" class="portfolio-item portfolio-image underline_animation text-reset">
    

  314.           <div class="portfolio-thumbnail"> <img src="static/picture/portfolio2.jpg" class="img-fluid img-grayTransition" alt=""> </div>
    

  315.           <div class="portfolio-description my-3">
    

  316.             <h3 class="fs-5 underline_text fw-bold d-inline-block">Girl in Yellow</h3>
    

  317.             <span class="d-block fw-light small-font-size">Neon</span> </div>
    

  318.           </a> </div>
    

  319.         <!--Masonry Grid Item END--> 
    

  320.         <!--Masonry Grid Item START-->
    

  321.         <div class="col-md-6 col-lg-4 grid-item"> <a href="static/picture/portfolio3.jpg" class="portfolio-item portfolio-image underline_animation text-reset">
    

  322.           <div class="portfolio-thumbnail"> <img src="static/picture/portfolio3.jpg" class="img-fluid img-grayTransition" alt=""> </div>
    

  323.           <div class="portfolio-description my-3">
    

  324.             <h3 class="fs-5 underline_text fw-bold d-inline-block">Blue words</h3>
    

  325.             <span class="d-block fw-light small-font-size">Neon</span> </div>
    

  326.           </a> </div>
    

  327.         <!--Masonry Grid Item END--> 
    

  328.         <!--Masonry Grid Item START-->
    

  329.         <div class="col-md-6 col-lg-4 grid-item"> <a href="static/picture/portfolio4.jpg" class="portfolio-item portfolio-image underline_animation text-reset">
    

  330.           <div class="portfolio-thumbnail"> <img src="static/picture/portfolio4.jpg" class="img-fluid img-grayTransition" alt=""> </div>
    

  331.           <div class="portfolio-description my-3">
    

  332.             <h3 class="fs-5 underline_text fw-bold d-inline-block">Blue words</h3>
    

  333.             <span class="d-block fw-light small-font-size">Neon</span> </div>
    

  334.           </a> </div>
    

  335.         <!--Masonry Grid Item END--> 
    

  336.         <!--Masonry Grid Item START-->
    

  337.         <div class="col-md-6 col-lg-4 grid-item"> <a href="static/picture/portfolio5.jpg" class="portfolio-item portfolio-image underline_animation text-reset">
    

  338.           <div class="portfolio-thumbnail"> <img src="static/picture/portfolio5.jpg" class="img-fluid img-grayTransition" alt=""> </div>
    

  339.           <div class="portfolio-description my-3">
    

  340.             <h3 class="fs-5 underline_text fw-bold d-inline-block">Blue words</h3>
    

  341.             <span class="d-block fw-light small-font-size">Neon</span> </div>
    

  342.           </a> </div>
    

  343.         <!--Masonry Grid Item END--> 
    

  344.         <!--Masonry Grid Item START-->
    

  345.         <div class="col-md-6 col-lg-4 grid-item"> <a href="static/picture/portfolio6.jpg" class="portfolio-item portfolio-image underline_animation text-reset">
    

  346.           <div class="portfolio-thumbnail"> <img src="static/picture/portfolio6.jpg" class="img-fluid img-grayTransition" alt=""> </div>
    

  347.           <div class="portfolio-description my-3">
    

  348.             <h3 class="fs-5 underline_text fw-bold d-inline-block">Blue words</h3>
    

  349.             <span class="d-block fw-light small-font-size">Neon</span> </div>
    

  350.           </a> </div>
    

  351.         <!--Masonry Grid Item END--> 
    

  352.         <!--Masonry Grid Item START-->
    

  353.         <div class="col-md-6 col-lg-4 grid-item"> <a href="static/picture/portfolio7.jpg" class="portfolio-item portfolio-image underline_animation text-reset">
    

  354.           <div class="portfolio-thumbnail"> <img src="static/picture/portfolio7.jpg" class="img-fluid img-grayTransition" alt=""> </div>
    

  355.           <div class="portfolio-description my-3">
    

  356.             <h3 class="fs-5 underline_text fw-bold d-inline-block">Blue words</h3>
    

  357.             <span class="d-block fw-light small-font-size">Neon</span> </div>
    

  358.           </a> </div>
    

  359.         <!--Masonry Grid Item END--> 
    

  360.         <!--Masonry Grid Item START-->
    

  361.         <div class="col-md-6 col-lg-4 grid-item"> <a href="static/picture/portfolio8.jpg" class="portfolio-item portfolio-image underline_animation text-reset">
    

  362.           <div class="portfolio-thumbnail"> <img src="static/picture/portfolio8.jpg" class="img-fluid img-grayTransition" alt=""> </div>
    

  363.           <div class="portfolio-description my-3">
    

  364.             <h3 class="fs-5 underline_text fw-bold d-inline-block">Blue words</h3>
    

  365.             <span class="d-block fw-light small-font-size">Neon</span> </div>
    

  366.           </a> </div>
    

  367.         <!--Masonry Grid Item END--> 
    

  368.       </div>
    

  369.       <!--Masonry Grid Container END--> 
    

  370.     </div>
    

  371.     <!--Section Body START--> 
    

  372.   </div>
    

  373. </section>
    

  374. <!--Portfolio Section END--> 
    

  375. <!--Education Section START-->
    

  376. <section id="education">
    

  377.   <div class="container"> 
    

  378.     <!--Section Heading START-->
    

  379.     <div class="heading text-center mb-5">
    

  380.       <h2 class="fs-3 kayden-underline-left mb-5 fw-bold text-uppercase d-inline-block">Education</h2>
    

  381.     </div>
    

  382.     <!--Section Heading END--> 
    

  383.     <!--Section Body START-->
    

  384.     <div class="section-body">
    

  385.       <div class="table-responsive"> 
    

  386.         <!--Educational Table START-->
    

  387.         <table class="table">
    

  388.           <tbody>
    

  389.             <tr>
    

  390.               <td class="d-table-cell d-sm-none"><div class="mb-3 fw-light">2010-2016</div>
    

  391.                 <div class="mb-3 fw-bold">Univercity of Boston, Computer Science</div>
    

  392.                 <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy</div></td>
    

  393.               <td class="w-25 d-none d-sm-table-cell"><span class="fw-light fs-5">2010-2016</span></td>
    

  394.               <td class="w-50 d-none d-sm-table-cell"><span class="fw-bold fs-5">Univercity of Boston, Computer Science</span></td>
    

  395.               <td class="w-25 d-none d-sm-table-cell"><span class="fw-normal text-secondary">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy </span></td>
    

  396.             </tr>
    

  397.             <tr>
    

  398.               <td class="d-table-cell d-sm-none border-0"><div class="mb-3 fw-light">2010-2016</div>
    

  399.                 <div class="mb-3 fw-bold">Univercity of Boston, Computer Science</div>
    

  400.                 <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy</div></td>
    

  401.               <td class="w-25 d-none d-sm-table-cell border-0"><span class="fw-light fs-5">2010-2016</span></td>
    

  402.               <td class="w-50 d-none d-sm-table-cell border-0"><span class="fw-bold fs-5">Univercity of Boston, Computer Science</span></td>
    

  403.               <td class="w-25 d-none d-sm-table-cell border-0"><span class="fw-normal text-secondary">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy </span></td>
    

  404.             </tr>
    

  405.           </tbody>
    

  406.         </table>
    

  407.         <!--Educational Table END--> 
    

  408.       </div>
    

  409.     </div>
    

  410.     <!--Section Body END--> 
    

  411.   </div>
    

  412. </section>
    

  413. <!--Education Section END--> 
    

  414. <!--Testimonials START-->
    

  415. <section id="testimonials">
    

  416.   <div class="container"> 
    

  417.     <!--Section Heading START-->
    

  418.     <div class="heading text-center mb-5">
    

  419.       <h2 class="fs-3 kayden-underline-left mb-5 fw-bold text-uppercase d-inline-block">Testimonials</h2>
    

  420.     </div>
    

  421.     <!--Section Heading END--> 
    

  422.     <!--Section Body START-->
    

  423.     <div class="section-body">
    

  424.       <div class="testimonials-header mb-5">
    

  425.         <div class="row">
    

  426.           <div class="col-10 offset-1">
    

  427.             <div class="text-primary fs-1"> <i class="fas fa-quote-right"></i> </div>
    

  428.           </div>
    

  429.         </div>
    

  430.       </div>
    

  431.       <div class="row"> 
    

  432.         <!--OWL Slider START-->
    

  433.         <div id="client_slider" class="owl-carousel owl-theme"> 
    

  434.           <!--OWL Slider Item START-->
    

  435.           <div class="offset-1 col-10">
    

  436.             <div class="row">
    

  437.               <div class="col-md-6 order-2 order-md-1">
    

  438.                 <div class="testimonial_details">
    

  439.                   <p class="text-secondary mb-3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    

  440.                   <span class="font-family-secondary fs-5 fw-light fst-italic">--Emma Watson</span></div>
    

  441.               </div>
    

  442.               <div class="col-md-6 order-1 order-md-2">
    

  443.                 <div class="testimonial_thumbnail d-flex justify-content-start justify-content-md-end"><img src="static/picture/testimonial1.jpg" class="kayden-shadow rounded-3 w-auto" alt=""></div>
    

  444.               </div>
    

  445.             </div>
    

  446.           </div>
    

  447.           <!--OWL Slider Item END--><!--OWL Slider Item START-->
    

  448.           <div class="offset-1 col-10">
    

  449.             <div class="row">
    

  450.               <div class="col-md-6 order-2 order-md-1">
    

  451.                 <div class="testimonial_details">
    

  452.                   <p class="text-secondary mb-3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    

  453.                   <span class="font-family-secondary fs-5 fw-light fst-italic">--Linzi Landry</span> </div>
    

  454.               </div>
    

  455.               <div class="col-md-6 order-1 order-md-2">
    

  456.                 <div class="testimonial_thumbnail d-flex justify-content-start justify-content-md-end"> <img src="static/picture/testimonial2.jpg" class="kayden-shadow rounded-3 w-auto" alt=""> </div>
    

  457.               </div>
    

  458.             </div>
    

  459.           </div>
    

  460.           <!--OWL Slider Item END--> 
    

  461.           <!--OWL Slider Item START-->
    

  462.           <div class="offset-1 col-10">
    

  463.             <div class="row">
    

  464.               <div class="col-md-6 order-2 order-md-1">
    

  465.                 <div class="testimonial_details">
    

  466.                   <p class="text-secondary mb-3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    

  467.                   <span class="font-family-secondary fs-5 fw-light fst-italic">--Maksim Mckenna</span></div>
    

  468.               </div>
    

  469.               <div class="col-md-6 order-1 order-md-2">
    

  470.                 <div class="testimonial_thumbnail d-flex justify-content-start justify-content-md-end"><img src="static/picture/testimonial3.jpg" class="kayden-shadow rounded-3 w-auto" alt=""></div>
    

  471.               </div>
    

  472.             </div>
    

  473.           </div>
    

  474.           <!--OWL Slider Item END--></div>
    

  475.         <!--OWL Slider END--></div>
    

  476.     </div>
    

  477.     <!--Section Body END--></div>
    

  478. </section>
    

  479. <!--Testimonials END--><!--FAQ START-->
    

  480. <section id="faq">
    

  481.   <div class="container">
    

  482.     <div class="row">
    

  483.       <div class="offset-md-3 col-md-6"><!--Section Heading START-->
    

  484.         <div class="heading text-center mb-5">
    

  485.           <h2 class="fs-3 kayden-underline-left mb-5 fw-bold text-uppercase d-inline-block">FAQ</h2>
    

  486.         </div>
    

  487.         <!--Section Heading END--><!--Accordion START-->
    

  488.         <div class="accordion" id="faq_accordion"><!--Accordion ITEM START-->
    

  489.           <div class="accordion-item">
    

  490.             <h2 class="accordion-header" id="headingOne">
    

  491.               <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#accordion1" aria-expanded="true" aria-controls="accordion1">What is Bootstrap 5 </button>
    

  492.             </h2>
    

  493.             <div id="accordion1" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#faq_accordion">
    

  494.               <div class="accordion-body text-secondary">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>
    

  495.             </div>
    

  496.           </div>
    

  497.           <!--Accordion ITEM END--> 
    

  498.           <!--Accordion ITEM START-->
    

  499.           <div class="accordion-item">
    

  500.             <h2 class="accordion-header" id="headingTwo">
    

  501.               <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordion2" aria-expanded="true" aria-controls="accordion2"> How working kayden Template? </button>
    

  502.             </h2>
    

  503.             <div id="accordion2" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#faq_accordion">
    

  504.               <div class="accordion-body"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>
    

  505.             </div>
    

  506.           </div>
    

  507.           <!--Accordion ITEM END--><!--Accordion ITEM START-->
    

  508.           <div class="accordion-item">
    

  509.             <h2 class="accordion-header" id="heading3">
    

  510.               <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordion3" aria-expanded="true" aria-controls="accordion3">Why using Bootstrap 5? </button>
    

  511.             </h2>
    

  512.             <div id="accordion3" class="accordion-collapse collapse" aria-labelledby="heading3" data-bs-parent="#faq_accordion">
    

  513.               <div class="accordion-body">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>
    

  514.             </div>
    

  515.           </div>
    

  516.           <!--Accordion ITEM END--> 
    

  517.           <!--Accordion ITEM START-->
    

  518.           <div class="accordion-item">
    

  519.             <h2 class="accordion-header" id="heading4">
    

  520.               <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordion4" aria-expanded="true" aria-controls="accordion4"> How to control grids in this template? </button>
    

  521.             </h2>
    

  522.             <div id="accordion4" class="accordion-collapse collapse" aria-labelledby="heading4" data-bs-parent="#faq_accordion">
    

  523.               <div class="accordion-body"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>
    

  524.             </div>
    

  525.           </div>
    

  526.           <!--Accordion ITEM END--></div>
    

  527.         <!--Accordion END--></div>
    

  528.     </div>
    

  529.   </div>
    

  530. </section>
    

  531. <!--FAQ END--><!--Contact Us START-->
    

  532. <section id="contact">
    

  533.   <div class="container"><!--Section Heading START-->
    

  534.     <div class="heading text-center mb-5">
    

  535.       <h2 class="fs-3 kayden-underline-left mb-5 fw-bold text-uppercase d-inline-block">Contact Us</h2>
    

  536.     </div>
    

  537.     <!--Section Heading END--><!--Section Body START-->
    

  538.     <div class="section-body">
    

  539.       <div class="row gy-5">
    

  540.         <div class="col-md-6">
    

  541.           <div class="d-flex flex-column justify-content-center h-100"><!--Contact Details START-->
    

  542.             <div class="contact-details d-flex flex-row align-items-center mb-3">
    

  543.               <div class="cd-icon fs-2 me-4"><i class="fas fa-envelope"></i></div>
    

  544.               <div class="cd-info fs-5 font-family-secondary"><a href="#" class="text-white"><span class="__cf_email__" data-cfemail="d5beb4acb1b0bb95b0adb4b8a5b9b0fbb6bab8">[email protected]</span></a></div>
    

  545.             </div>
    

  546.             <!--Contact Details END--><!--Contact Details START-->
    

  547.             <div class="contact-details d-flex flex-row align-items-center mb-3">
    

  548.               <div class="cd-icon fs-2 me-4"><i class="fas fa-map-marked-alt"></i></div>
    

  549.               <div class="cd-info fs-5 font-family-secondary">New York,USA </div>
    

  550.             </div>
    

  551.             <!--Contact Details END--><!--Contact Details START-->
    

  552.             <div class="contact-details d-flex flex-row align-items-center">
    

  553.               <div class="cd-icon fs-2 me-4"><i class="fas fa-phone"></i></div>
    

  554.               <div class="cd-info fs-5 font-family-secondary"><a href="#" class="text-white">+7 123 456 789 </a></div>
    

  555.             </div>
    

  556.             <!--Contact Details END--></div>
    

  557.         </div>
    

  558.         <div class="col-md-6">
    

  559.           <h3 class="mb-5 fs-4 text-center text-sm-left">Or Let's start to conversation</h3>
    

  560.           <form action="php/form.php" method="post" id="contact-form">
    

  561.             <div class="mb-4">
    

  562.               <input type="text" name="name" id="name" placeholder="Full name" class="form-control">
    

  563.             </div>
    

  564.             <div class="mb-4">
    

  565.               <input type="email" name="email" id="email" placeholder="Email" class="form-control">
    

  566.             </div>
    

  567.             <div class="mb-4">
    

  568.               <input type="text" name="subject" id="subject" placeholder="Subject" class="form-control">
    

  569.             </div>
    

  570.             <div class="mb-4">
    

  571.               <textarea placeholder="Message" name="text" id="text" class="form-control" cols="30" rows="10"></textarea>
    

  572.             </div>
    

  573.             <div class="mb-4">
    

  574.               <button type="submit" id="contact-btn" class="btn btn-primary">Send Message</button>
    

  575.             </div>
    

  576.           </form>
    

  577.         </div>
    

  578.       </div>
    

  579.     </div>
    

  580.     <!--Section Body END--></div>
    

  581. </section>
    

  582. <!--Contact Us END--> 
    

  583. <!--Footer START-->
    

  584. <footer class="kayden-footer py-4">
    

  585.   <div class="container">
    

  586.     <div class="d-flex flex-column align-items-center justify-content-center py-3"><!--Social Links START-->
    

  587.       <ul class="social-links list-inline mb-4">
    

  588.         <li class="list-inline-item"><a href="#" title="facebook"><i class="fab fa-facebook-f"></i></a></li>
    

  589.         <li class="list-inline-item"><a href="#" title="linkedin"><i class="fab fa-linkedin-in"></i></a></li>
    

  590.         <li class="list-inline-item"><a href="#" title="pinterest"><i class="fab fa-pinterest-p"></i></a></li>
    

  591.         <li class="list-inline-item"><a href="#" title="git"><i class="fab fa-git"></i></a></li>
    

  592.       </ul>
    

  593.       <!--Social Links END--> 
    

  594.       <!--Copyright START-->
    

  595.       <p class="text-center m-0">Copyright © 2021.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">网页模板</a></p>
    

  596.       <!--Copyright END--></div>
    

  597.   </div>
    

  598. </footer>
    

  599. <!--Footer END--><!--To TOP START--> 
    

  600. <a href="#" class="toTop d-inline" id="return-to-top"><i class="fas fa-chevron-up"></i></a> 
    

  601. <!--To TOP END--><!--JavaScript START--> 
    

  602. <script src="static/js/bootstrap.min.js"></script> 
    

  603. <!--JQuery--> 
    

  604. <script src="static/js/jquery.min.js"></script> 
    

  605. <!--AOS Animations--> 
    

  606. <script src="static/js/aos.js"></script> 
    

  607. <!--Jquery Easing --> 
    

  608. <script src="static/js/jquery.easing.min.js"></script> 
    

  609. <!--Jquery Appear --> 
    

  610. <script src="static/js/jquery.appear.min.js"></script> 
    

  611. <!--Kayden preloader --> 
    

  612. <script src="static/js/preloader.js"></script> 
    

  613. <!--Jquery Count To --> 
    

  614. <script src="static/js/jquery.countTo.js"></script> 
    

  615. <!--Masonry --> 
    

  616. <script src="static/js/masonry.pkgd.min.js"></script> 
    

  617. <!--Jquery Magnific Popup --> 
    

  618. <script src="static/js/jquery.magnific-popup.min.js"></script> 
    

  619. <!--OWL Carousel --> 
    

  620. <script src="static/js/owl.carousel.min.js"></script> 
    

  621. <!--Typed JS --> 
    

  622. <script src="static/js/typed.min.js"></script> 
    

  623. <!--Kayden Alert --> 
    

  624. <script src="static/js/alert.js"></script> 
    

  625. <!--Kayden Contact US --> 
    

  626. <script src="static/js/contact.js"></script> 
    

  627. <!--Kayden Custom Script --> 
    

  628. <script src="static/js/kayden.js"></script> 
    

  629. <!--JavaScript END-->
    

  630. </body>
    

  631. </html>




　　做好之后呢，把网页文件拷贝到开发板中。



　　拷贝完成后，在浏览器中输入开发板的IP地址。这样就能看到刚刚做好的网页了。



　　这样，我们的简单的网站服务器就完成了，感谢大家的阅读。







本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？注册

×
回复 赏

举报

打赏榜单

21小跑堂 打赏了 50.00 元 2022-01-13
理由：恭喜通过原创文章打赏！请多多加油哦！

相关帖子
lihui567 发表于 2022-2-11 11:42 | 显示全部楼层
这个挺小的开发板
回复 赏

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 注册

本版积分规则

qbwww Image

733

主题

4517

帖子

14

粉丝
快速回复 在线客服 返回列表 返回顶部