页面模仿——个人简历（布局）

引言

• 最近准备找个web前端的工作，但由于自己本科的专业不是计算机或者软件类的，因此在与面试官沟通过程中，很难说明自己的能力，鉴于此，我决定做两件事，其一，总结自己所学的知识，汇总成知识框架，其二，模仿一些页面制作一些demo作品，用于说明自身能力。

• 项目的模仿计划了三个部分内容，一个是模仿制作resume网页(http://www.show08.com/)，用来承载自己的简历；另一个是模仿一个博客网站，用来存放自己所写的博客(可选择：http://www.2019w.cn/) ；再一个是模仿一个自己喜欢的网站，我选择模仿B站(https://www.bilibili.com/)。

• 虽然可能无法做到每一个特效都一模一样，但我会尽量在这个过程中寻找到最适合我的编程方式以及库的使用。

resume网页

• 所选择的target网页

这是我所选markdown 缩进择的resume网站的模仿对象，整体来看，用了swiper的滑动页面，用了定时切换背景图片，用了播放背景音乐，用了图标变化，用了position定位，用了自定义字体。

• 那么先分析一下该网站首页的布局。

如上图所示，即为该网站首页的布局。

• 在此基础上，用emmet的语法生成该页面的布局：

 div.container>(div.selfBlog>div.selfPic+div.selfName)+
(div.selfIntro>div.welcome+div.motto+div.welName+div.welOccu+div.welEmail)
+(div.rightNav>div.rigBtn+div.rigLi+div.rigPlayer)+div.talkToMe 

• 在经历了一系列的css调整之后，用html+css得到了首页的布局图，如下：

• 如法炮制以上步骤，得到这些过程：

                                                                             以上为目标网页的布局图片2-7

                                        ps:由于浮动元素相同，则均使用首页布局中的内容，每页内容滚动仅为不相同元素

最后

以上就是时尚鼠标为你收集整理的页面模仿——个人简历（布局）的全部内容，希望文章能够帮你解决页面模仿——个人简历（布局）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。