发新帖本帖赏金 50.00元(功能说明)我要提问
返回列表

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

[复制链接]
629|0
手机看帖
扫描二维码
随时随地手机跟帖
qbwww|  楼主 | 2022-1-9 21:27 | 显示全部楼层 |阅读模式
本帖最后由 qbwww 于 2022-1-9 21:27 编辑
#申请原创#   @21小跑堂 用Quark开发板做一个网站服务器



  大家好,我是qbwww。

      先看看效果图。
Snipaste_2022-01-09_20-49-49.jpg

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

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

IMG_1019.JPG

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

Snipaste_2022-01-08_18-17-58.jpg

Snipaste_2022-01-08_18-18-29.jpg


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

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

Snipaste_2022-01-08_18-21-18.jpg

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

IMG_1012.JPG

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

Snipaste_2022-01-08_18-21-45.jpg

Snipaste_2022-01-08_18-25-45.jpg

Snipaste_2022-01-08_18-26-41.jpg

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

Snipaste_2022-01-08_21-35-51.jpg

Snipaste_2022-01-08_21-55-23.jpg

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

IMG_1015.JPG

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

  切换到root用户:
su root

  开启Wi-Fi:
nmcli r wifi on

  扫描附近的Wi-Fi:
nmcli dev wifi

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

  重启网卡设备
sudo ifconfig wlan0 down
sudo ifconfig wlan0 up

  这样就连接好WiFi了。

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

Snipaste_2022-01-08_23-05-32.jpg

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

Snipaste_2022-01-08_23-07-43.jpg

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

Snipaste_2022-01-08_23-08-16.jpg

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

Snipaste_2022-01-08_23-14-54.jpg

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

  下面做一个简单的静态网页。
      静态网页代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>参加创作打卡挑战赛,瓜分万元现金大奖</title>
<!--Usefull Meta-->
<meta name="description" content="A slick, customizable CV, Resume or Portfolio template, perfect for photographers, freelancers or designers.">
<meta name="keywords" content="angus, resume, cv, vCard, portfolio, html template, template, responsive">
<!--Google Fonts-->
<link href="static/css/css2.css" rel="stylesheet">
<link href="static/css/css21.css" rel="stylesheet">
<!--AOS Animation Stylesheet-->
<link rel="stylesheet" href="static/css/aos.css">
<!--Font Awesome-->
<link rel="stylesheet" href="static/css/all.min.css">
<!--Magnific Popup-->
<link rel="stylesheet" href="static/css/magnific-popup.css">
<!--OWL Carousel-->
<link rel="stylesheet" href="static/css/owl.carousel.min.css">
<!--Keyden Styelsheet with Bootstrap 5-->
<link rel="stylesheet" href="static/css/kayden_1.css">
</head>
<body data-offset="102">
<!--PRELOADER START-->
<div id="preloader">
  <div class="text-center w-100">
    <div class="loader"></div>
  </div>
</div>
<!--PRELOADER END-->
<!--Header START-->
<header class="kayden-header sticky-top">
  <div class="header-inside transparent_header">
    <div class="d-flex flex-row justify-content-between align-items-center">
      <!--Header Toggler START-->
      <div class="kayden-menu-toggler"><a class="kayden-toggler text-reset" data-bs-toggle="offcanvas" href="#kaydenOffCanvas" role="button" aria-controls="kaydenOffCanvas">
        <div class="kt-r"><span></span><span></span><span></span></div>
        <div class="kt-t">目录 </div>
        </a></div>
      <!--Header Toggler END--><!--Header Logo START-->
      <div class="kayden-logo"><a href="#"><img src="static/picture/logo1.png" height="30" alt="kayden"></a></div>
      <!--Header Logo END--><!--Header Info START-->
      <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>
      <!--Header Info END--></div>
  </div>
</header>
<!--Header END--><!--Off Canvas START-->
<div class="offcanvas offcanvas-start" id="kaydenOffCanvas">
  <!--Off Canvas Header START-->
  <div class="offcanvas-header">
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"><i class="fas fa-times"></i></button>
  </div>
  <!--Off Canvas Header END--><!--Off Canvas Body START-->
  <div class="offcanvas-body">
    <div class="kayden-offcanvas-nav-container d-flex flex-column justify-content-center align-items-center"><!--Off Canvas Navigation START-->
      <ul class="kayden-offcanvas-nav list-inline">
        <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>
        <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>
        <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>
        <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>
        <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>
      </ul>
      <!--Off Canvas Navigation END-->
    </div>
  </div>
  <!--Off Canvas Body END-->
</div>
<!--Off Canvas END--><!--Home Section START-->
<section id="home" class="home vh-100"><!--Home Background START-->
  <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>
  <!--Home Background END--><!--Home Container START-->
  <div class="container h-100 position-relative">
    <div class="home-details text-center text-sm-end w-100 h-100 d-flex align-items-center">
      <div class="home-details-inner w-100">
        <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>
        <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>
      </div>
    </div>
  </div>
  <!--Home Container END-->
  <!--Scroll Down START-->
  <div class="scroll-down"> <a href="#about" class="kayden_scrollspy scroll-down-link text-center">
    <div class="scroll-title">向下滚动</div>
    <div class="scroll-mouse">
      <div class="whell"></div>
    </div>
    </a> </div>
  <!--Scroll Down END-->
</section>
<!--Home Section END-->
<!--About Section START-->
<section id="about" class="min-vh-100">
  <div class="container h-100">
    <div class="about_inside w-100 h-100 d-flex justify-content-center align-items-center">
      <div class="row w-100">
        <!--About Section Picture START-->
        <div class="offset-md-1 col-md-4">
          <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>
        </div>
        <!--About Section Picture END-->
        <!--About Section Details START-->
        <div class="offset-md-1 col-md-6 mt-5 mt-md-0">
          <div class="h-100 d-flex align-items-center justify-content-center">
            <div class="about-details">
              <h2 class="fs-3 fw-bold mb-5">I'm Kayden Morris</h2>
              <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>
              <!--Social Links START-->
              <ul class="social-links list-inline mb-5">
                <li class="list-inline-item"> <a href="#" title="facebook"> <i class="fab fa-facebook-f"></i> </a> </li>
                <li class="list-inline-item"> <a href="#" title="linkedin"> <i class="fab fa-linkedin-in"></i> </a> </li>
                <li class="list-inline-item"> <a href="#" title="pinterest"> <i class="fab fa-pinterest-p"></i> </a> </li>
                <li class="list-inline-item"> <a href="#" title="git"> <i class="fab fa-git"></i> </a> </li>
              </ul>
              <!--Social Links END-->
              <a href="#" class="btn btn-outline-primary" title="Download CV">Download CV</a> </div>
          </div>
        </div>
        <!--About Section Details END-->
      </div>
    </div>
  </div>
</section>
<!--About Section END-->
<!--Services Section START-->
<section id="services">
  <div class="container">
    <!--Section Heading START-->
    <div class="heading text-center mb-5">
      <h2 class="fs-3 kayden-underline-left mb-5 fw-bold text-uppercase d-inline-block">Services</h2>
    </div>
    <!--Section Heading END-->
    <!--Section Body START-->
    <div class="section-body">
      <!--Gradient Grid START-->
      <div class="kayden-gradient-grid">
        <!--Gradient Grid ROW START-->
        <div class="row g-0">
          <!--Gradient Grid Item START-->
          <div class="col-lg-4 text-center">
            <div class="p-5">
              <div class="fs-2 mb-3"> <i class="fas fa-server"></i> </div>
              <h4 class="mb-3">Development</h4>
              <p class="text-secondary">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            </div>
          </div>
          <!--Gradient Grid Item END-->
          <!--Gradient Grid Item START-->
          <div class="col-lg-4 text-center">
            <div class="p-5">
              <div class="fs-2 mb-3"> <i class="fas fa-mobile-alt"></i> </div>
              <h4 class="mb-3">Responsive</h4>
              <p class="text-secondary">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            </div>
          </div>
          <!--Gradient Grid Item END-->
          <!--Gradient Grid Item START-->
          <div class="col-lg-4 text-center">
            <div class="p-5">
              <div class="fs-2 mb-3"> <i class="fas fa-mug-hot"></i> </div>
              <h4 class="mb-3">UX / UI Design</h4>
              <p class="text-secondary">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            </div>
          </div>
          <!--Gradient Grid Item END-->
        </div>
        <!--Gradient Grid ROW END-->
        <!--Gradient Grid ROW START-->
        <div class="row g-0">
          <!--Gradient Grid Item START-->
          <div class="col-lg-4 text-center">
            <div class="p-5">
              <div class="fs-2 mb-3"> <i class="far fa-clone"></i> </div>
              <h4 class="mb-3">User Friendly</h4>
              <p class="text-secondary">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            </div>
          </div>
          <!--Gradient Grid Item END-->
          <!--Gradient Grid Item START-->
          <div class="col-lg-4 text-center">
            <div class="p-5">
              <div class="fs-2 mb-3"> <i class="far fa-heart"></i> </div>
              <h4 class="mb-3">Lovely</h4>
              <p class="text-secondary">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            </div>
          </div>
          <!--Gradient Grid Item END-->
          <!--Gradient Grid Item START-->
          <div class="col-lg-4 text-center">
            <div class="p-5">
              <div class="fs-2 mb-3"> <i class="fas fa-rocket"></i> </div>
              <h4 class="mb-3">Bootstrap 5</h4>
              <p class="text-secondary">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            </div>
          </div>
          <!--Gradient Grid Item END-->
        </div>
        <!--Gradient Grid ROW END-->
      </div>
      <!--Gradient Grid END-->
    </div>
    <!--Section Body END-->
  </div>
</section>
<!--Services Section END-->
<!--Facts Section START-->
<section id="facts">
  <!--Section Body START-->
  <div class="section-body">
    <div class="container">
      <div class="row gy-5">
        <div class="col-md-6">
          <div class="row gx-3 gy-5">
            <div class="col-6">
              <!--Facts Item START-->
              <div class="fact d-flex flex-column align-items-center align-items-md-start">
                <h3 class="fs-2 d-inline-block"><span class="tmcounter" data-from="0" data-to="9" data-speed="1500">0</span><sup>+</sup></h3>
                <p class="fs-4 d-inline-block text-center text-md-left">Years Experience</p>
              </div>
              <!--Facts Item END-->
            </div>
            <div class="col-6">
              <!--Facts Item START-->
              <div class="fact d-flex flex-column align-items-center align-items-md-start">
                <h3 class="fs-2 d-inline-block"><span class="tmcounter" data-from="0" data-to="100" data-speed="1500">0</span><sup>+</sup></h3>
                <p class="fs-4 d-inline-block text-center text-md-left">Happy Clients</p>
              </div>
              <!--Facts Item END-->
            </div>
            <div class="col-6">
              <!--Facts Item START-->
              <div class="fact d-flex flex-column align-items-center align-items-md-start">
                <h3 class="fs-2 d-inline-block"><span class="tmcounter" data-from="0" data-to="8963" data-speed="1500">0</span></h3>
                <p class="fs-4 d-inline-block text-center text-md-left">Downloads</p>
              </div>
              <!--Facts Item END-->
            </div>
            <div class="col-6">
              <!--Facts Item START-->
              <div class="fact d-flex flex-column align-items-center align-items-md-start">
                <h3 class="fs-2 d-inline-block"><span class="tmcounter" data-from="0" data-to="2569" data-speed="1500">0</span></h3>
                <p class="fs-4 d-inline-block text-center text-md-left">Projects done</p>
              </div>
              <!--Facts Item END-->
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <h2 class="fs-3 mb-5 fw-bold">My Skills</h2>
          <div class="skills_container">
            <!--Progress Bar START-->
            <div class="mb-4">
              <label class="mb-3 fs-6">Web Design 75%</label>
              <div class="progress">
                <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>
              </div>
            </div>
            <!--Progress Bar END-->
            <!--Progress Bar START-->
            <div class="mb-4">
              <label class="mb-3 fs-6">Web Development 90%</label>
              <div class="progress">
                <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>
              </div>
            </div>
            <!--Progress Bar END-->
            <!--Progress Bar START-->
            <div class="mb-4">
              <label class="mb-3 fs-6">Wordpress development 70%</label>
              <div class="progress">
                <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>
              </div>
            </div>
            <!--Progress Bar END-->
            <!--Progress Bar START-->
            <div class="mb-4">
              <label class="mb-3 fs-6">Front end development 95%</label>
              <div class="progress">
                <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>
              </div>
            </div>
            <!--Progress Bar END-->
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--Section Body END-->
</section>
<!--Facts Sectrion END-->
<!--Portfolio Section START-->
<section id="portfolio">
  <div class="container">
    <!--Section Heading START-->
    <div class="heading text-center mb-5">
      <h2 class="fs-3 kayden-underline-left mb-5 fw-bold text-uppercase d-inline-block">Portfolio</h2>
    </div>
    <!--Section Heading END-->
    <!--Section Body START-->
    <div class="section-body">
      <!--Masonry Grid Container START-->
      <div class="row gy-5 grid">
        <!--Masonry Grid Item START-->
        <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">
          <div class="portfolio-thumbnail"> <img src="static/picture/portfolio1.jpg" class="img-fluid img-grayTransition" alt=""> </div>
          <div class="portfolio-description my-3">
            <h3 class="fs-5 underline_text fw-bold d-inline-block">Man in Neon</h3>
            <span class="d-block fw-light small-font-size">Street</span> </div>
          </a> </div>
        <!--Masonry Grid Item END-->
        <!--Masonry Grid Item START-->
        <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">
          <div class="portfolio-thumbnail"> <img src="static/picture/portfolio2.jpg" class="img-fluid img-grayTransition" alt=""> </div>
          <div class="portfolio-description my-3">
            <h3 class="fs-5 underline_text fw-bold d-inline-block">Girl in Yellow</h3>
            <span class="d-block fw-light small-font-size">Neon</span> </div>
          </a> </div>
        <!--Masonry Grid Item END-->
        <!--Masonry Grid Item START-->
        <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">
          <div class="portfolio-thumbnail"> <img src="static/picture/portfolio3.jpg" class="img-fluid img-grayTransition" alt=""> </div>
          <div class="portfolio-description my-3">
            <h3 class="fs-5 underline_text fw-bold d-inline-block">Blue words</h3>
            <span class="d-block fw-light small-font-size">Neon</span> </div>
          </a> </div>
        <!--Masonry Grid Item END-->
        <!--Masonry Grid Item START-->
        <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">
          <div class="portfolio-thumbnail"> <img src="static/picture/portfolio4.jpg" class="img-fluid img-grayTransition" alt=""> </div>
          <div class="portfolio-description my-3">
            <h3 class="fs-5 underline_text fw-bold d-inline-block">Blue words</h3>
            <span class="d-block fw-light small-font-size">Neon</span> </div>
          </a> </div>
        <!--Masonry Grid Item END-->
        <!--Masonry Grid Item START-->
        <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">
          <div class="portfolio-thumbnail"> <img src="static/picture/portfolio5.jpg" class="img-fluid img-grayTransition" alt=""> </div>
          <div class="portfolio-description my-3">
            <h3 class="fs-5 underline_text fw-bold d-inline-block">Blue words</h3>
            <span class="d-block fw-light small-font-size">Neon</span> </div>
          </a> </div>
        <!--Masonry Grid Item END-->
        <!--Masonry Grid Item START-->
        <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">
          <div class="portfolio-thumbnail"> <img src="static/picture/portfolio6.jpg" class="img-fluid img-grayTransition" alt=""> </div>
          <div class="portfolio-description my-3">
            <h3 class="fs-5 underline_text fw-bold d-inline-block">Blue words</h3>
            <span class="d-block fw-light small-font-size">Neon</span> </div>
          </a> </div>
        <!--Masonry Grid Item END-->
        <!--Masonry Grid Item START-->
        <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">
          <div class="portfolio-thumbnail"> <img src="static/picture/portfolio7.jpg" class="img-fluid img-grayTransition" alt=""> </div>
          <div class="portfolio-description my-3">
            <h3 class="fs-5 underline_text fw-bold d-inline-block">Blue words</h3>
            <span class="d-block fw-light small-font-size">Neon</span> </div>
          </a> </div>
        <!--Masonry Grid Item END-->
        <!--Masonry Grid Item START-->
        <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">
          <div class="portfolio-thumbnail"> <img src="static/picture/portfolio8.jpg" class="img-fluid img-grayTransition" alt=""> </div>
          <div class="portfolio-description my-3">
            <h3 class="fs-5 underline_text fw-bold d-inline-block">Blue words</h3>
            <span class="d-block fw-light small-font-size">Neon</span> </div>
          </a> </div>
        <!--Masonry Grid Item END-->
      </div>
      <!--Masonry Grid Container END-->
    </div>
    <!--Section Body START-->
  </div>
</section>
<!--Portfolio Section END-->
<!--Education Section START-->
<section id="education">
  <div class="container">
    <!--Section Heading START-->
    <div class="heading text-center mb-5">
      <h2 class="fs-3 kayden-underline-left mb-5 fw-bold text-uppercase d-inline-block">Education</h2>
    </div>
    <!--Section Heading END-->
    <!--Section Body START-->
    <div class="section-body">
      <div class="table-responsive">
        <!--Educational Table START-->
        <table class="table">
          <tbody>
            <tr>
              <td class="d-table-cell d-sm-none"><div class="mb-3 fw-light">2010-2016</div>
                <div class="mb-3 fw-bold">Univercity of Boston, Computer Science</div>
                <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy</div></td>
              <td class="w-25 d-none d-sm-table-cell"><span class="fw-light fs-5">2010-2016</span></td>
              <td class="w-50 d-none d-sm-table-cell"><span class="fw-bold fs-5">Univercity of Boston, Computer Science</span></td>
              <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>
            </tr>
            <tr>
              <td class="d-table-cell d-sm-none border-0"><div class="mb-3 fw-light">2010-2016</div>
                <div class="mb-3 fw-bold">Univercity of Boston, Computer Science</div>
                <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy</div></td>
              <td class="w-25 d-none d-sm-table-cell border-0"><span class="fw-light fs-5">2010-2016</span></td>
              <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>
              <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>
            </tr>
          </tbody>
        </table>
        <!--Educational Table END-->
      </div>
    </div>
    <!--Section Body END-->
  </div>
</section>
<!--Education Section END-->
<!--Testimonials START-->
<section id="testimonials">
  <div class="container">
    <!--Section Heading START-->
    <div class="heading text-center mb-5">
      <h2 class="fs-3 kayden-underline-left mb-5 fw-bold text-uppercase d-inline-block">Testimonials</h2>
    </div>
    <!--Section Heading END-->
    <!--Section Body START-->
    <div class="section-body">
      <div class="testimonials-header mb-5">
        <div class="row">
          <div class="col-10 offset-1">
            <div class="text-primary fs-1"> <i class="fas fa-quote-right"></i> </div>
          </div>
        </div>
      </div>
      <div class="row">
        <!--OWL Slider START-->
        <div id="client_slider" class="owl-carousel owl-theme">
          <!--OWL Slider Item START-->
          <div class="offset-1 col-10">
            <div class="row">
              <div class="col-md-6 order-2 order-md-1">
                <div class="testimonial_details">
                  <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>
                  <span class="font-family-secondary fs-5 fw-light fst-italic">--Emma Watson</span></div>
              </div>
              <div class="col-md-6 order-1 order-md-2">
                <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>
              </div>
            </div>
          </div>
          <!--OWL Slider Item END--><!--OWL Slider Item START-->
          <div class="offset-1 col-10">
            <div class="row">
              <div class="col-md-6 order-2 order-md-1">
                <div class="testimonial_details">
                  <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>
                  <span class="font-family-secondary fs-5 fw-light fst-italic">--Linzi Landry</span> </div>
              </div>
              <div class="col-md-6 order-1 order-md-2">
                <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>
              </div>
            </div>
          </div>
          <!--OWL Slider Item END-->
          <!--OWL Slider Item START-->
          <div class="offset-1 col-10">
            <div class="row">
              <div class="col-md-6 order-2 order-md-1">
                <div class="testimonial_details">
                  <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>
                  <span class="font-family-secondary fs-5 fw-light fst-italic">--Maksim Mckenna</span></div>
              </div>
              <div class="col-md-6 order-1 order-md-2">
                <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>
              </div>
            </div>
          </div>
          <!--OWL Slider Item END--></div>
        <!--OWL Slider END--></div>
    </div>
    <!--Section Body END--></div>
</section>
<!--Testimonials END--><!--FAQ START-->
<section id="faq">
  <div class="container">
    <div class="row">
      <div class="offset-md-3 col-md-6"><!--Section Heading START-->
        <div class="heading text-center mb-5">
          <h2 class="fs-3 kayden-underline-left mb-5 fw-bold text-uppercase d-inline-block">FAQ</h2>
        </div>
        <!--Section Heading END--><!--Accordion START-->
        <div class="accordion" id="faq_accordion"><!--Accordion ITEM START-->
          <div class="accordion-item">
            <h2 class="accordion-header" id="headingOne">
              <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>
            </h2>
            <div id="accordion1" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#faq_accordion">
              <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>
            </div>
          </div>
          <!--Accordion ITEM END-->
          <!--Accordion ITEM START-->
          <div class="accordion-item">
            <h2 class="accordion-header" id="headingTwo">
              <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>
            </h2>
            <div id="accordion2" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#faq_accordion">
              <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>
            </div>
          </div>
          <!--Accordion ITEM END--><!--Accordion ITEM START-->
          <div class="accordion-item">
            <h2 class="accordion-header" id="heading3">
              <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>
            </h2>
            <div id="accordion3" class="accordion-collapse collapse" aria-labelledby="heading3" data-bs-parent="#faq_accordion">
              <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>
            </div>
          </div>
          <!--Accordion ITEM END-->
          <!--Accordion ITEM START-->
          <div class="accordion-item">
            <h2 class="accordion-header" id="heading4">
              <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>
            </h2>
            <div id="accordion4" class="accordion-collapse collapse" aria-labelledby="heading4" data-bs-parent="#faq_accordion">
              <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>
            </div>
          </div>
          <!--Accordion ITEM END--></div>
        <!--Accordion END--></div>
    </div>
  </div>
</section>
<!--FAQ END--><!--Contact Us START-->
<section id="contact">
  <div class="container"><!--Section Heading START-->
    <div class="heading text-center mb-5">
      <h2 class="fs-3 kayden-underline-left mb-5 fw-bold text-uppercase d-inline-block">Contact Us</h2>
    </div>
    <!--Section Heading END--><!--Section Body START-->
    <div class="section-body">
      <div class="row gy-5">
        <div class="col-md-6">
          <div class="d-flex flex-column justify-content-center h-100"><!--Contact Details START-->
            <div class="contact-details d-flex flex-row align-items-center mb-3">
              <div class="cd-icon fs-2 me-4"><i class="fas fa-envelope"></i></div>
              <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>
            </div>
            <!--Contact Details END--><!--Contact Details START-->
            <div class="contact-details d-flex flex-row align-items-center mb-3">
              <div class="cd-icon fs-2 me-4"><i class="fas fa-map-marked-alt"></i></div>
              <div class="cd-info fs-5 font-family-secondary">New York,USA </div>
            </div>
            <!--Contact Details END--><!--Contact Details START-->
            <div class="contact-details d-flex flex-row align-items-center">
              <div class="cd-icon fs-2 me-4"><i class="fas fa-phone"></i></div>
              <div class="cd-info fs-5 font-family-secondary"><a href="#" class="text-white">+7 123 456 789 </a></div>
            </div>
            <!--Contact Details END--></div>
        </div>
        <div class="col-md-6">
          <h3 class="mb-5 fs-4 text-center text-sm-left">Or Let's start to conversation</h3>
          <form action="php/form.php" method="post" id="contact-form">
            <div class="mb-4">
              <input type="text" name="name" id="name" placeholder="Full name" class="form-control">
            </div>
            <div class="mb-4">
              <input type="email" name="email" id="email" placeholder="Email" class="form-control">
            </div>
            <div class="mb-4">
              <input type="text" name="subject" id="subject" placeholder="Subject" class="form-control">
            </div>
            <div class="mb-4">
              <textarea placeholder="Message" name="text" id="text" class="form-control" cols="30" rows="10"></textarea>
            </div>
            <div class="mb-4">
              <button type="submit" id="contact-btn" class="btn btn-primary">Send Message</button>
            </div>
          </form>
        </div>
      </div>
    </div>
    <!--Section Body END--></div>
</section>
<!--Contact Us END-->
<!--Footer START-->
<footer class="kayden-footer py-4">
  <div class="container">
    <div class="d-flex flex-column align-items-center justify-content-center py-3"><!--Social Links START-->
      <ul class="social-links list-inline mb-4">
        <li class="list-inline-item"><a href="#" title="facebook"><i class="fab fa-facebook-f"></i></a></li>
        <li class="list-inline-item"><a href="#" title="linkedin"><i class="fab fa-linkedin-in"></i></a></li>
        <li class="list-inline-item"><a href="#" title="pinterest"><i class="fab fa-pinterest-p"></i></a></li>
        <li class="list-inline-item"><a href="#" title="git"><i class="fab fa-git"></i></a></li>
      </ul>
      <!--Social Links END-->
      <!--Copyright START-->
      <p class="text-center m-0">Copyright © 2021.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">网页模板</a></p>
      <!--Copyright END--></div>
  </div>
</footer>
<!--Footer END--><!--To TOP START-->
<a href="#" class="toTop d-inline" id="return-to-top"><i class="fas fa-chevron-up"></i></a>
<!--To TOP END--><!--JavaScript START-->
<script src="static/js/bootstrap.min.js"></script>
<!--JQuery-->
<script src="static/js/jquery.min.js"></script>
<!--AOS Animations-->
<script src="static/js/aos.js"></script>
<!--Jquery Easing -->
<script src="static/js/jquery.easing.min.js"></script>
<!--Jquery Appear -->
<script src="static/js/jquery.appear.min.js"></script>
<!--Kayden preloader -->
<script src="static/js/preloader.js"></script>
<!--Jquery Count To -->
<script src="static/js/jquery.countTo.js"></script>
<!--Masonry -->
<script src="static/js/masonry.pkgd.min.js"></script>
<!--Jquery Magnific Popup -->
<script src="static/js/jquery.magnific-popup.min.js"></script>
<!--OWL Carousel -->
<script src="static/js/owl.carousel.min.js"></script>
<!--Typed JS -->
<script src="static/js/typed.min.js"></script>
<!--Kayden Alert -->
<script src="static/js/alert.js"></script>
<!--Kayden Contact US -->
<script src="static/js/contact.js"></script>
<!--Kayden Custom Script -->
<script src="static/js/kayden.js"></script>
<!--JavaScript END-->
</body>
</html>


Snipaste_2022-01-09_20-45-20.jpg

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

Snipaste_2022-01-09_20-47-50.jpg

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



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

21ic.zip (2.25 MB)

使用特权

评论回复

打赏榜单

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

相关帖子

返回列表 发新帖 本帖赏金 50.00元(功能说明)我要提问
您需要登录后才可以回帖 登录 | 注册

本版积分规则