结课大作业报告

最新推荐文章于 2021-11-21 10:53:28 发布

通信1班陈港

最新推荐文章于 2021-11-21 10:53:28 发布

阅读量357

点赞数

本文链接：https://blog.csdn.net/qq_50780641/article/details/118004051

版权

本文档详细记录了一位学生在《通信软件开发与应用》课程中的结课大作业——构建静态网站的过程。选择了MDB模板，创建了包括主页面和多个子页面的网站，并部署到GitHub。报告中描述了模板选择、导航条建立、全屏视频背景、剧情简介部分及其他页面元素的实现，以及遇到的视频播放、图片加载等问题及其解决方案。最后，作者总结了通过本次作业学到的HTML和CSS知识，并提出未来如何处理大文件播放的问题。

摘要由CSDN通过智能技术生成

一.期末结业作业任务

构建一个静态态网站，可使用你喜欢的任何CSS框架如BootStrap、MDB、tailwind等，页面不少于5个，最后一个页面放置结业报告的超链接。网站需部署到你喜欢的托管服务器上如github等。
撰写结业报告，要求如下：
A. 题目为《通信软件开发与应用》课程结业报告；
B. 报告需阐述：做的什么、开发过程、遇到的问题、如何解决、哪些未解决、总结；
C. 该报告需表现为HTML格式，从你上面的网站中可访问到。

网页链接

二.页面展示

1.主页面展示

在这里插入图片描述

2.子页面展示

在这里插入图片描述

三.操作过程

1.模板的选择

我选择的是MDB模板。代码为MDB 官方提供的5个教程中3个教程模板代码。其足以支持我们平常的网站构建。

2.导航条的建立

导航条可以使我们快速锁定我们想要观看的内容，其是网页开发极其重要的内容。导航条使用了< nav >标签，其内容包括包括< a >链接，< href>作为锚点，用来实现网页的快速跳转；< button >按钮实现点击。
在这里插入图片描述
代码

<nav class="navbar navbar-expand-lg navbar-dark rgba-white-slight  fixed-top scrolling-navbar">
      <div class="container">
        <a class="navbar-brand" href="#">首页</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02"
          aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
          <ul class="navbar-nav mr-auto smooth-scroll">
            <li class="nav-item">
              <a class="nav-link" href="#intro" ></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#about" >剧情简介</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#projects" >主要人物</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#gallery" >剧情截图</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#testimonials">幕后制作</a>
            </li>
           
          </ul>
          <!-- Social Icon  -->
          <ul class="navbar-nav nav-flex-icons">
            <li class="nav-item">
              <a class="nav-link">
                <i class="fab fa-facebook-f light-green-text-2"></i>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link">
                <i class="fab fa-twitter light-green-text-2"></i>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link">
                <i class="fab fa-