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