一、选题简介

时间过得很快，这门课马上也要结课了，想了很多选题，最后我还是想做一个导航相关的网页。自己断断续续花了快一周的时间做了一个网页导航的网页作为我的期末大作业，也是对我所学过知识的总结与应用。

二、设计理念

从互联网时代到移动互联网时代，一直流传着一句话，得入口者的天下，入口是指用户寻找信息、解决问题的方式，成为入口意味着获得巨量的用户。虽然掌握用户并不直接等同于商业变现，但如果失去这个阵地，也就同时失去了成为行业巨头的机会。从微软做windows占领了PC的桌面，google做Android占领了手机的搜索框，到现在的浏览器、网址导航、手机桌面、手机应用市场，其初衷还是占领入口。

作为学生，我们每天都在打开浏览器，在互联网上寻觅我们想要的信息，所以一个好的网页导航作为我们的入口，这应该是非常不错的。

但是随着现在互联网的发展，很多网址导航变得很臃肿，还有很多广告，用户体验非常不好，有的流氓软件甚至自动更改我们的主页，真的让用户很恶心。所以自己学习了网页设计这门课，最后就想自己弄一个简约、没有广告、页面美观的网页导航，设计理念就是：简约、没有广告、美观。

三、用户市场分析

学生和公司职员是网址导航的主力用户，性别男性居多，在年龄层面偏年轻化，由于网址导航的便利性，低龄用户群体将会越来越多。所以这个市场还是非常大的，一个好的网页导航，只要能站在用户角度思考问题，帮助用户解决问题，做出让用户满意的产品，后续的市场肯定是不小的。

互联网在日益成熟，网民的理解程度和需求也相应的在提高，普通的网址推荐已经很难满足用户的需求，那么网址导航类网站该如何改进呢，我觉得有下面几点：

实用简约+年轻时尚化+个性化定制。

四、案例分析

1999年，网络在中国逐渐普及，当时中文网站不仅内容不够丰富，数量也较少，而且复杂的英文域名很难记忆，对于那时候连打字都困难的网民来说，在网上找资料的确不是件易事。此时，第一代网址导航应运而生，仅仅是以网站收录归类为主，便获得了广大网民的青睐，国内比较早的是李兴平创建的hao123导航和后来蔡文胜创建的265导航，而后分别被百度和谷歌两家巨头纳入旗下。

说到发展史，不得不提到hao123，于1999年5月由李兴平创建，不仅是国内网址导航的鼻祖，也是第一个被互联网巨头百度认可并收购的网站；蔡文胜是笔者到现在都非常崇拜的一个草根创业者，当年卖域名赚得了人生第一桶金，就是这样一个具有慧眼的创业者创办的265导航也足足比hao123晚了4年，不过在2008年也被谷歌中国斥巨资收购了。http://www.biyezuopin.vip

这两个网页导航为什么能做得如此成功，我觉得就是抓住用户的痛点，真真实实为用户解决问题。

五、网站介绍及使用

我的网页导航大体分三部分，左边的导航栏、右边的主内容栏、还有最下面的版权信息声明，当然我也加入了一些有用的功能，提升用户体验。

先看一下进去的页面吧：

页面很清爽，右边主体部分上面是一个搜索框，我们可以输入我们想要搜索的文字，按回车或者点击 百度一下 就会链接到百度的相关搜索页面，如下GIF图所示：

主体部分除了上面的搜索框外，下面基本上都是超链接，比如我们点一下知乎那个框，那么浏览器就会为我们增加一个新的页面跳转到知乎的首页。我们来通过一个GIF图片看一下效果：

左边是分类的导航，可以帮助用户更好的进行定位查找。我是运用了锚点链接这一技术，当用户点击左边的分类导航时，右边的页面就会上下自动滑动滑动到于之相对应的位置。还是通过GIF图片来更好的看一下：

还有最下面的版权，我们看下面的图：

这是我自己的相关信息，当然，我还为用户设计了返回顶部的小按钮，它可以帮助用户更好的返回到顶部。http://www.biyezuopin.cc

下面是我用谷歌浏览器一个工具截的这个网站的全图，如下：

六、开发总结

对了，为了快捷开发，我引入了 jquery 的库，然后下面记录一下我在开发过程中遇到的一些问题以及解决方法。

6.1 页面左右分栏

开发第一个难题就是怎样让左右两栏分开并且右边的高度是不定的，左边的高度要自适应。我试过用flex布局，但是左栏会出现问题，最终的解决方法是让左边栏浮动，定位fixed固定并设置最小高度为100vh。然后右边栏设置一个margin值，left-margin的值正好设置成左栏的宽度即可，右边栏width设置成100%。这样就能做成这样的效果了。

6.2 右边栏的复用

右边栏是网站的主要内容，它们的样式基本都一样。所以我们通过设置相同的class类名，这样会简便我们css代码的编写，其实我们前期只用设置一个栏目就行，后面增加的那些html元素，全部和我们的第一栏设置成一样的，只用把超链接的地址和网站名和介绍改一下就可以了。

6.3 css选择器权重问题

有的时候我在样式的css文件中设置相关的属性，就比如我们常用的颜色属性，我想改一下然后设置了，但是在浏览器就是没有用，还是原来的颜色。经过一些排查，发现是css选择器权重的问题。相关的原理如下：

权值等级划分， 一般来说是划分4个等级：

• 第一等级：代表 内联样式，如 style=""，权值为 1,0,0,0；

• 第二等级：代表 ID选择器，如 #id="", 权值为 0,1,0,0；

• 第三等级：代表 calss | 伪类 | 属性 选择器，如 .class | :hover,:link,:target | [type], 权值 0,0,1,0；

• 第四等级：代表 标签 | 伪元素 选择器，如 p | ::after, ::before, ::fist-inline, ::selection, 权值 0,0,0,1；

此外，通用选择器（*），子选择器（>）， 相邻同胞选择器（+）等选择器不在4等级之内，所以它们的权值都为 0,0,0,0；

权值计算公式：

权值 = 第一等级选择器个数，第二等级选择器个数，第三等级选择器个数，第四等级选择器个数；

所有如果出现了我们在css文件中更改了颜色等属性，但是没有生效的话，我们要设置一下它的选择器，让这个选择器的权重比本来的更大，就能解决这个问题。

6.4 左侧栏锚点的显示及更改

网页左侧我们点击锚点的时候，要把这个锚点的颜色改变，给出用户提示，右侧页面并转到对应的地点。有一个小细节就是我们前一个锚点的颜色要变回来，并把当前点击的锚点高亮显示。这个怎么解决？

我的解决方法就是通过设置一个 active 的class类名，哪个是点击的锚点就把这个类增加这个 active 类名，原来的具有 active 的那个类，并把它取消 active 就可以了。

说白了就是，遍历那个列表，类名全部设置成空，然后再给点击的那个增加 active 类名就可以了。

七、不足与后续展望

当然，网站基本上就是这样了，也花费了自己不小的时间和精力。但是由于自己本身知识的欠缺，这个网站也存在一些不足之处，或者需要后续完善的地方。自己现阶段所掌握的知识还不足以让我把这些问题一一解决，下面我把后续需要自己改进的地方列出来，等待自己有了一些后端开发的学习之后再看看能不能解决。

• 页面的利用率还不高，缺少一些天气信息、热榜信息、或者日历相关的展示等。

• 网页左侧栏和右侧栏是固定的，还不能动态的添加和删除一些网站。

• 没有后端以及服务器，不能让用户个性化定制并保存其修改的信息。

大概想到的也就这么多，可能需要后端的一些设置才能弥补这些不足，这个也是我目前的知识所不能支撑的。

总而言之，选了这个课学到了很多有用的知识，自己也在课下查看了很多网页设计的知识并学习，这个过程可能不是那么容易，但是真的学到了很多知识，感谢老师，祝老师身体健康、万事如意。

这门课结束了，但是希望自己对网页的学习不会结束，后续再加油吧！