1课程任务

构建一个静态或动态网站即以下要求中任选A或B，主题自选，要求如下：

A. 静态网站。可使用你喜欢的任何CSS框架如BootStrap、MDB、tailwind等，页面不少于5个，最后一个页面放置结业报告的超链接。网站需部署到你喜欢的托管服务器上如github等。

B. 动态网站。使用任何一个前端框架如Angular等进行某应用网站的开发如英雄之旅等，需要有CRUD即增删改查功能并有一定的样式，网站内放置结业报告的超链接。网站需部署到你喜欢的托管服务器上如github等（可参阅https://angular.io/guide/deployment#deploy-to-github-pages）。

我选择的是任务要求A.静态网站。

2成果展示(http://hechuang0814.gitee.io/hccyhh/)

2.1首页

2.2第二个界面

2.3第三个界面

2.4第四个界面

2.5第五个界面

3开发过程

3.1主界面代码

html,
body,
header,
#intro {
    height: 100%;
}

#intro {
    background: url("../souye.jpeg")no-repeat center center fixed;
    -webkit-background-size: cover; /* 针对Chrome, Safari, Edge等浏览器 */
    -moz-background-size: cover;    /* 针对Firefox浏览器 */
    -o-background-size: cover;      /* 针对Operallq */
    background-size: cover;         /* 通用 */
}

3.2导航条模块

<nav class="navbar navbar-expand-md navbar-dark indigo ">
  <div class="container">
    <!-- Navbar brand -->
    <a class="navbar-brand" href="#"></a>
    <!-- Collapse button -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav"
      aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="basicExampleNav">
      <!-- Links -->
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="https://a1787950096.github.io/"target="_self">
            <span class="sr-only">(current)</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="https://a1787950096.github.io/HTML-fengjing/"target="_self"></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="https://a1787950096.github.io/HTML-meishi/"target="_self"></a>
        </li>
        <!-- Dropdown -->
        <li class="nav-item">
          <a class="nav-link" href="https://a1787950096.github.io/HTML-renwen/"target="_self"></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="https://a1787950096.github.io/HTML-jieyebaogao"target="_self"></a>
        </li>
      </ul>
      <!-- Links -->
      <form class="form-inline">
        <div class="md-form my-0">
          <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
        </div>
      </form>
    </div>
    <!-- Collapsible content -->
  </div>
</nav>
<!--/.Navbar-->

解释：
我使用了一个

CSS 样式类：
.navbar ：这是导航条必须的样式。
.navbar-expand-md ：表明当处于中等屏幕及以上尺寸(>768px)时, 导航条扩展开, 否则导航超链接不显示, 而显示一个折叠按钮.
navbar-dark：将让导航条的背景与文字颜色自动高对比。
primary-color：表明导航条使用主色调(蓝色).
navbar-nav表明是导航条中的导航链接, 使得

• 的列表项不会分布于多行。
  mr-auto该样式将会把其后的项(即搜索框靠右对齐)。

• 3.3其他界面

  html,
  body,
  header,
  #intro {
      height: 100%;
  }
  
  #intro {
      background: url("../img/souye.jpeg")no-repeat center center fixed;
      -webkit-background-size: cover; /* 针对Chrome, Safari, Edge等浏览器 */
      -moz-background-size: cover;    /* 针对Firefox浏览器 */
      -o-background-size: cover;      /* 针对Operallq */
      background-size: cover;         /* 通用 */
  }
  .streak.streak-photo {
      background-attachment: fixed;
    }
  
  

  3.4全屏背景图片、遮罩和弹性盒子模块

          <!--Mask-->
  <div id="intro" class="view">
  
    <div class="mask rgba-black-strong">
      <!-- 添加了.container-fluid 容器以利用栅格进行布局 -->
      <div class="container-fluid d-flex align-items-center justify-content-center h-100">
        <!-- 新添加的 div, 表示栅格中的行 -->
        <div class="row d-flex justify-content-center text-center">
          <!-- 新添加的 div, 表示栅格中的列 -->
          <div class="col-md-10">
  
            <!-- Heading -->
            <h2 class="display-4 font-weight-bold white-text pt-5 mb-2"></h2>
  
            <!-- Divider -->
            <hr class="hr-light">
  
            <!-- Description -->
            <h4 class="white-text my-4">。</h4>
           
            <a type="button" class="btn btn-outline-white"href="#about">了解更多<i class="fas fa-book ml-2"></i></a>
  
          </div>
  
        </div>
  
        </div>
  
    </div>
  
  </div>
  <!--/.Mask-->
  
  

  4问题与解决

  4.1视频无法播放

  一开始我在第四个见面中嵌入了几个视频进行播放，然而当我要提交到gittee时遇到了问题，首先是无法提交超过10mb的文件，我又重新将视频进行裁剪，最终上传了，然而在运行时可以播放的视频，到了网页中却无法播放这个问题最终也没有得到解决。

  4.2上传gittee仓库

  我再通过git工具上传到仓库时一直报错，解决了一个问题又出现一个新的问题，最终我利用gitee界面的上传文件功能，将文件进行挨个上传。