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

一、要求和主题

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

二、部分成果展示

三、开发过程

1.主题的选择

正逢学校70周年校庆，就用CSS、MDB以及JavaScript框架来进行页面设计，大致主要将网页分为学校发展过程、学校校友和荣誉、学校图片等部分组成。

2.导航栏设计

这里我简单的设置了导航的CSS属性，然后通过按钮点击，可以实现快速的页面跳转

这部分代码：

<div class="dao_hang">
      <ul>
        <li id="to_page0"><i>回到顶部</i></li>
        <li id="to_page1"><i>发展概要</i></li>
        <li id="to_page2"><i>学校荣誉</i></li>
        <li id="to_page3"><i>重交图集</i></li>
        <li id="to_page4"><i>写在最后</i></li>
      </ul>
    </div>

3.主体页面设计

首先是封面设计，这里选择了两张学校校徽的logo，并进行背景透明化处理，使得整体感观上能够通顺，同时设置一个倒计时

代码部分：

<div class="page cur">
          <div id="page1" class="page_tran page1">
            <div class="page1_top_wrapper clearfix">
              <div class="top_logo">
                <img src="./img/xiaohui.png" alt="" />
              </div>
              <div class="top_logo1">
                <img src="./img/logo.png" />
              </div>
              <div class="time_count">
                <div class="time_count_desc">C</div>
                <div class="time_count_desc">Q</div>
                <div class="time_count_desc">J</div>
                <div class="time_count_desc">T</div>
                <div class="time_count_desc">U</div>
                <div class="time_count_desc">校</div>
                <div class="time_count_desc">庆</div>
                <i class="fa fa-birthday-cake"></i>
              </div>
              <div id="time_count_days">
                <h1 class="time-count" id="time-count">倒计时</h1>
                <div><span id="days">00</span><span>Days</span></div>
                <div><span id="hours">00</span><span>Hours</span></div>
                <div><span id="minutes">00</span><span>Minutes</span></div>
                <div><span id="seconds">00</span><span>Seconds</span></div>
              </div>
          </div>
        </div>

其次是发展概要页面，利用时间线展示学校的发展过程，都是一些简单的文字编辑，因一部分的样式比较简陋。

代码部分：

<div class="page">
          <div id="page2" class="page_tran page2">
            <div class="school_desc">
              <div class="school_desc_total">
                <h1 class="line">