详细内容

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

之前一直想搭建一个个人CV,用来展示自己的详情,技能树,项目经历等等。从网上看了许多模板,发现扁平化设计的单页模板非常适合,不过下载了几个之后,直接拿来修改用了感觉没有什么可以学到的东西,现在扁平化趋势这么流行,加上网页的响应式布局也越来越火,何不自己尝试一把?


搭建此网页需要具备的相关知识有:

  • Media Query相关了解

  • BootStrap框架布局的了解

  • jQuery相关语法的了解

  • font owesome图标框架的了解

  • Canvas绘图的了解

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绘图吧!

以上算是个人心得,也算是一个个人日记,也希望能给读者带来一些帮助!


Copyright @ 2018 . All rights reserved. 
技术支持: 建站ABC | 管理登录
seo seo