投稿    登录
  博主录制的Python3爬虫视频教程已发布!详情请戳Python3爬虫视频教程!希望大家支持!非常感谢!

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

HTML 崔庆才 5452浏览 4评论

之前一直想搭建一个个人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绘图吧!

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

 

转载请注明:静觅 » 利用响应式布局搭建自己的个人简介网站(CV)

喜欢 (24)or分享 (0)

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请狠狠点击下面的

想结交更多的朋友吗?

来进击的Coder瞧瞧吧

进击的Coder

QQ群号 99350970 立即加入

进击的Coder灌水太多?

这里是纯粹的技术领地

激进的Coder

QQ群号 627725766 立即加入

想找人聊天解闷?想要学习干货?

微信公众号进击的Coder为你打造

进击的Coder

微信公众号 扫一扫关注