记一次计算机网络上机报告实现过程---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="main"></div>
        <div class="bottom"></div>
    </div>

---

先来看看这简陋的页眉部分。左边，是一个蓝色长条，右边是一个橙色短条加一个设为收藏，设为首页的两个按键。 有点简约，我就在想，你是不是好歹得加一个登录/注册？ 然后鼠标放上去就有下划线啥的。初步设想可以使用 `span>a` 实现。 鉴于这次只是一个页面，没啥后台，就弄个空链接就好了。

<div class="top">
    <div class="right">
        <span><a href="#">设为收藏</a></span>
        <span><a href="#">设为首页</a></span>
        <span><a href="#">注册</a>
		/
		<a href="#">登录</a>
		</span>
    </div>
</div>

写完之后，看一下还挺像那么一回事，但是是不是少了点什么？
没错，少了咱的CSS，层叠样式表。

CSS部分

咱也没啥取名天赋，就一个css.css文件放在css文件夹里面好了，下面开始写样式表。

页眉

这个比较简单，设置一下背景颜色，定位一下位置，然后去掉a标签的下划线，再加一个点击样式就欧克了

.top{
    background-color: #3399ff;
}

.right{
    width: 20%;
    background-color: #ff9900;
    position: relative;
    left: 80%;
}

.right span{
    margin-left: 11%;
}

.right span a{
    text-decoration: none;
}

.right span a:hover{
    text-decoration: red;
}

js部分

这个点击收藏是不是点了，就收藏一下，但是这咱也办不到啊，但是这个字变一下还是可以做到的。
然后呢，这个设为首页，那按照正常的是检测是不是首页，是的话不显示，不是显示。但是没这个实力，就不弄这么花里胡哨的东西了，就弄一个点击了他就消失了。
登录/注册的话，写个登录/注册页面？但是咱原本就这一个页面啊，是不是有点太麻烦了？算了，弄一个点击显示暂未开放此功能算了。生活不易，小猪叹气。

$('.one').click(function(){
    $('.one').find('a').text("已收藏")
})

$('.two').click(function(){
    $('.two').hide()
})

$('.three').click(function() {
    alert('此功能为开放')
})

来看看完成效果图：