我的新导航页

2015年3月8日 // 导航 网站 HTML5 Bootstrap

以前曾经给自己制作了一个导航页,托管在新浪云计算上,只是有一天当上面的免费云豆耗光无法访问的时候,竟然有好几个以前的同事打电话问我怎么你的导航页不能用了。这倒让我非常惊讶,那个页面我自己早就不用也不维护了,于是赶紧告诉他们新的地址。

开学前几天,不想工作,于是就寻思着把自己以前的导航页给更新了。主要是自己Firefox书签栏中收藏的网址越来越多了,以至于许多时候,自己以往的导航页都成了摆设了,因为在里面找不到自己经常上的网站,而如果只是简单地往里面加内容,则会把页面拉得很长。于是就把最新的 Bootstrap 下载下来,试着做一个宽版的导航页。

这个本来应该是个非常简单的事情,但对于我这个前端门外汉,则显得有点困难。反正是照葫芦画瓢,花了大概三天时间,最后还是弄成了,请看这里。样子有点丑,但我自己用起来,还挺顺手。页面包含载的链接是多了,但主要的不爽点则是页面还是不可避免地变得太长了,以至于有时候想要打开一个网站,就不得不在这个页面中点击两次(顶部导航›网站链接),真是有得必有失。不过好处就是通过这个让我了解了使用 BootstrapLESS 的正确姿势。

该导航页的主页特色如下:

  • 轻便:页面的设计非常简洁,没有跳动的广告,加载迅速。整个页面甚至连一张图都没有,首页需要传输的数据量不足200kb,即便你用手机浏览此网站,也不会费多少流量。
  • 全面:收录的网站非常多,尤其是多了一些一般的导航网站所不具备的科研类、煤炭类及英文网站。
  • 顺手:
    • 响应式设计:可在普通电脑、平板电脑和智能手机等各种尺寸的屏幕上完美显示,请在你的电脑上改变浏览器的宽度来查看对于不同大小屏幕的显示效果。
    • 集成搜索:顶部的搜索框具有强大的搜索功能,可在该搜索框中输入内容,点击不同的搜索引擎进行搜索。
    • 常用链接触手可及: 由于页面较长,采取了两项措施来方便找到对应的链接:一是单击顶部的导航条可在页面内不同位置快速切换;二是将常用的链接固定在左侧边栏位置,并不随页面滚动。

喜欢的小伙伴就请放心使用吧!