利用响应式布局搭建自己的个人简介网站（CV）

之前一直想搭建一个个人 CV，用来展示自己的详情，技能树，项目经历等等。从网上看了许多模板，发现扁平化设计的单页模板非常适合，不过下载了几个之后，直接拿来修改用了感觉没有什么可以学到的东西，现在扁平化趋势这么流行，加上网页的响应式布局也越来越火，何不自己尝试一把？ 2015 年 1 月 23 日，寒假正式结束了，处理完一些小事，就开始着手搭建个人 CV 了。四五天的时间，从学习相关 BootStrap 知识，响应式布局的相关了解，美工切图，代码实际编写，差不多搭建完毕，不过还有好多地方需要完善，欢迎访问 我的个人简介 搭建此网页需要具备的相关知识有：

• Media Query 相关了解
• BootStrap 框架布局的了解
• jQuery 相关语法的了解
• font owesome 图标框架的了解
• Canvas 绘图的了解

1.Media Query 关于响应式布局，首先要了解的是 Media Query 的相关知识，翻译过来就是媒体查询的意思，它可以使不同大小的网页适应几套不同的 CSS 布局。比如笔记本电脑，屏幕宽度大都在 1300px 以上，可以匹配最高分辩率对应的 CSS 布局；又如平板电脑，屏幕宽度 750px 左右，可以适配中等分辨率对应的 CSS 布局；至于手机，则适配最小分辨率的 CSS 布局。这样，一次编写网站，多种终端可以看到不同的效果，不过代码只有一份，这就是响应式布局。 传送门：Media Query 简介 2.BootStrap BootStrap 是一款非常有名的前端框架，只需要写非常少的代码即可，如果你只会了 Media Query，自己编写完全没有问题，不过代码的复杂度会大大增加，而且不一定可以适配多种浏览器，可能你在 Chrome 里面是正常的，跑到 IE 你会惊呆的！所以，BootStrap 是你的最好选择，简化的代码加多种浏览器适配，还有栅格化布局是相当给力，值得一试。 3.jQuery 毕竟是自己完全编写整个网页，有些适配或者动画处理还是需要 JS 来实现，如果涉及到 CSS 样式的应用，jQuery 是你最好的选择。 强大的 JS 框架，各种动画效果均可以通过 jQuery 实现。当然前期的搭建不需要过多的 jQuery 特效，如果你想让自己的个人 CV 变得更炫，推荐一用。 4.Font Awesome 如果你需要用到各种图标，那么你还在苦苦地用 PS 抠图绘制吗？你错了，利用 Font Awesome 图标框架，只需要添加一句代码，即可轻松插入你想要的图标，比如新浪微博，人人网等等，素材应有尽有。 传送门：Font Awesome 框架 5.Canvas 绘图 如果你想要自己的网站更炫酷，有各种动画效果。例如制作一个圆形的进度条，那么 Canvas 是不二选择。不过稍微有些复杂，我在创建圆形进度条的时候就偷懒直接抠了四张进度条图，是不是很机智？哈哈。不过，如果你想修改了，不能继续抠图吧？那就用 Canvas 绘图吧！ 以上算是个人心得，也算是一个个人日记，也希望能给读者带来一些帮助！

文章来源: cuiqingcai.com，作者：崔庆才，版权归原作者所有，如需转载，请联系作者。

原文链接：cuiqingcai.com/782.html