大二的时候是学院计算机协会的会长，当时就上线了协会的网站，不过使用的是 WordPress 自带的主题，然后定制了一个子主题，就这样放了两年。最近心血来潮，一是觉得网站这样下去不好，可以做得更加精致好看；二是想试着用 Bootstrap 框架来写网页，借此练下手。有了这个心，接下来就是动手了。

　　首先了解了一下 Bootstrap 的一些小知识，发现这种比较流行的东西有一点非常好，就是教程非常全面，基本上每一个点都涉及到了，而且中文翻译非常全，阅读起来很方便。

　　在对 Bootstrap 有一定了解之后，就是开始写新的主题了，使用了框架之后，布局的 CSS 代码基本就不用写了，省下了很多时间。因为自己也对想要的效果在心里边有了一些构想，而且一直以来都有手敲代码的习惯，所以写起来得心应手。不得不说 WordPress 的主题机制非常好，总的写下来也用不了多少个文件，就把整个网站的主题都更换好了。这一次的改版，从第一天晚上10点左右开始写，到第二天下午4点左右，就已经将新版本上线了，效率还是超乎意料的。

　　随后的两天，用来做细节的优化、移动端自适应的修改，以及 IE 的兼容。其实 Bootstrap 是默认支持响应式布局的，之所以要做修改最主要的原因在于后台编辑器会自动将图片加上宽高，这样在移动端浏览时图片就会将整个页面撑大，自适应就会失效。搜索了很久之后，终于找到一个教程，可以在文章内容输出时自动将其中图片的 width 以及 height 参数去除。这个问题一解决，自适应很快就修改完成了。

　　其实细节的优化和移动端自相应的修改都还比较简单，最大的难题在于 IE 的兼容。Bootstrap v3 是不支持 IE8 的，至于万年老古董 IE6 和 IE7 就更别说了。心里想着呀，不管如何 IE8 还是要让他能够显示得正常一点才行，于是这两天的大部分时间都花在了如何兼容 IE 上，这东西真是害死人，每一次写网页都要骂 IE 一次，这杀千刀的。。。

　　关于这点还有个小插曲，在国内浏览器的市场里，360的极速浏览器和安全浏览器算是占了大半个江山，这种“双核浏览器”如果能够自动启用极速模式的话，就可以确保大部分普通用户都可以拥有更好的网站浏览体验。360自己定制了一个 meta ，将这段代码加到网页中，据说他们家的浏览器都会自动启用 webkit 内核进行渲染，试过不生效。之后到360的官方论坛发帖，得到客服的回应，说已经登记了，下周可以生效，估计是有一个白名单每周更新的。

　　经过了三天多的努力，新版本终于敲定了，看到新版的效果，自己还是非常满意的，这可能是开始做网站以来，最满意的一个作品了。其实很多事情想起来很难很麻烦，但是做起来往往是很简单的。

　　最后来大致列举一下新版本的特点：

• 采用 HTML5+CSS3 编写，使用 Bootstrap 框架进行开发。
• 响应式布局，完美适配各种不同分辨率的屏幕以及移动端浏览器。
• 对 IE6/7/8 做了一定的兼容，尽可能保证网页内容完整显示。
• 半透明效果、新计协蓝色主调等结合运用，使页面更具特色，同时提升了观感。
• 首页 BANNER 与页面背景图共有九套，在网页载入时随机配套显示，在增加设计感的同时，很好地展现了新计协的青春活力。

　　如果你有时间的话，可以打开网站浏览一下效果。记得多刷新几次看一下哟，集齐九套 BANNER 未来的一个月就会有好事发生哟，哈哈。如果发现了 BUG ，或者有更好的意见或者建议，可以在文章下边留言告诉我，先谢谢大家了。
　　
　　惠州学院计算机协会：https://www.hzuca.com/

　　文章的最后，放出九套主题的截图，在你浏览的时候，他们都出现了么？