0%

利用响应式布局搭建自己的个人简介网站(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绘图吧! 以上算是个人心得,也算是一个个人日记,也希望能给读者带来一些帮助!