通信软件开发与应用课程结业报告

一. 任务要求

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

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

A. 题目为《通信软件开发与应用》课程结业报告；

B. 报告需阐述：做的什么、开发过程、遇到的问题、如何解决、哪些未解决、总结；

C. 该报告需表现为HTML格式，从你上面的网站中可访问到。

二. 效果展示

1.主页面

2.子页面设计

（1）人物介绍子页面

通过背景动态视频，以及文字描述，介绍人物

其余两个人物介绍界面类似

（2）主题曲介绍子界面

上方为主题曲视频，并附上了原作者地址

下方设置为主题曲的歌词，右下方固定了主题曲的mp3的音源

三. 实现过程

1.主页面

主页面是基于MDB模板更改的

(1)导航条以及首页全屏图片显示

导航条

导航条中可以快速滑动到目标点，采用的标签为< nav >, 通过在头部引用的bootstrap的css类，我们可以利用< li >里的item类。

为导航条里设置上超链接，从而实现主页面内容定位的功能

具体代码如下：

<!--Main Navigation-->
    <header>
        <!--Navbar-->
        <nav class="navbar navbar-expand-lg navbar-dark scrolling-navbar fixed-top">

            <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 smooth-scroll">
                        <li class="nav-item">
                            <a class="nav-link" href="#intro">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#introduce">Introduction</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#Characters">Characters</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#others">Others</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#stills">Stills</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#comment">Comment</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#theme">Theme</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#report">Report</a>
                        </li>
                    </ul>
                    <!-- Links -->

                    <!-- Social Icon  -->
                    <ul class="navbar-nav nav-flex-icons">
                        <li class="nav-item">
                            <a class="nav-link"><i class="fab fa-weixin"></i></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link"><i class="fab fa-twitter"></i></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link"><i class="fab fa-instagram"></i></a>
                        </li>
                    </ul>
                </div>
                <!-- Collapsible content -->

            </div>

        </nav>
        <!--/.Navbar-->
       
    </header>
    <!--Main Navigation-->

全屏页面设计

其功能是通过在css中定义的intro类，放上图片的源地址，再利用view作为背景图片的封装器，实现阴影的效果

具体代码如下：

html:

 <!--Mask-->
        <div id="intro" class="view">

            <div class="mask rgba-black-strong">

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

                    <div class="row d-flex justify-content-center text-center">

                        <div class="col-md-10">

                            <!-- Heading -->
                            <h2 class="display-3 font-weight-bold white-text pt-5 mb-2">鬼滅の刃
                                <h4 class="white-text my-4">“我要守护那些生命，再也不让蛮不讲理的单方面掠夺发生，再也不让任何人体会到和我们一样的悲伤！”——灶门炭治郎.
                                </h4>
                                <!-- Divider -->
                                <hr class="hr-light">
                                <!-- Description -->
                                <h4 class="white-text my-5">
                                </h4>
                                <a href="https://kimetsu.com/" target="_blank" btton type=