记一次计算机网络上机报告实现过程---web网页制作（一）

起因

这不是计算机网络就要结课了吗，就有了一个上机实验，前几个我看的云里雾里，但到了这第七个web网页，却让我眼前一亮。
要求是跟下图要求一致，必须div+css，JavaScript，jQuery。
然后是效果图：

说实话有点辣眼睛，我好歹也写过几个网页，这种风格，有点难以接受啊。
我决定自己优化一下，做出一份好的上机报告！

创建项目

传统老三项，建立项目文件夹，创建index.html文件，css文件夹，img文件夹，js文件夹。
如图：

准备工作

这老师要求jQuery，因为太久没有写前端项目，再加上电脑重装过，jQuery在我的电脑上是没有的，只好去重新下载一个。网址是https://jquery.com/download/。如果没办法下载，可以完全复制下来然后粘贴到一个新文件里面的。
然后上面还有一个导航栏，是不是使用bootstrap更为方便简单呢？那就再下载一个bootstrap。网址：http://getbootstrap.com/。我下载的版本是3.4.1的
然后呢，就是一些图片了，随手找了一两张。logo没找到，就用了长江大学的校徽，嘿嘿嘿。

HTML部分

我使用的编译器是VS code，感觉使用的很舒服，把项目拖到vscode打开，开始编辑我们的HTML部分。
从效果图中不难看出，他有一个页眉部分，然后是主体，主体是在中间的，上面是一个logo图，然后是一个导航栏，然后加载一个图片。最下面的部分是三种不同的颜色分割占据的一个地方。

---

我们可以使用两个div组成页眉和主体部分，既然要优化一下，那就加一个页尾。然后用一个整体的div包裹起来。 大致就是这样：

 <div class="hyc">
        <div class="top"></div>
        <div class=