当青训营遇上码上掘金|个人主页

用原生三件套HTML+CSS+JS写一个个人简历网页，用到一些别人写好的样式库

code.juejin.cn/pen/7199555…

section

个人信息

姓名：罗伊斯

性别：男

年龄：34

英文名：Marco Reus

学历：保密

QQ：XXX

Wiki：Marco Reus

博客：Blog of Marco Reus

邮箱：Marco_Reus@qq.com

我是德国足球运动员，现时为德甲俱乐部多特蒙德队长，并代表德国国家足球队参加国际比赛，司职边锋或前腰。

掌握的技能

足球、领导力、创业

个人经历

• 欧冠亚军：2012-2013
• 德国超级杯冠军：2013、2014、2019
• 德国足协杯冠军：2016-2017、2020-2021
• 德国足球先生：2012、2019
• 欧洲足联年度最佳阵容: 2013–2014

团队

我的团队 - 多特蒙德是位于德国鲁尔区多特蒙德的足球俱乐部。

在德国国内赛场上，多特蒙德曾五次取得德国足球甲级联赛冠军，与门兴格拉德巴赫并列，成为拜仁慕尼黑之后夺冠次数最多的球队。多特蒙德队服上的两颗星便代表了五次冠军。在德国杯的比赛中，多特蒙德也曾四次夺冠。并在2012年取得了德甲，德国杯的“双冠王”。

在欧洲赛场上，多特蒙德曾在1997， 2013 年两度打进欧洲冠军联赛决赛，并在1997年战胜尤文图斯获得冠军。这使得多特蒙德成为拜仁慕尼黑和汉堡之后第三个获得欧洲俱乐部最高荣誉的德国球队。

团队官网： 多特蒙德

功能点

• 简历分为4个section：个人信息、技能、经历、团队

• 点击左侧侧边栏的标题，可以跳转至该section

  使用<a href="#info">标签，配合href属性，附上要跳转的section标签id

• 原生JS操作Web DOM，填入简历内容（todo）

侧边栏<aside class="sidebar">...</aside>

CSS分析

• 兼容性：不同屏幕宽度、有不同的展示效果

• sidebar moreduo.css

  宽、颜色、position fixed

   .sidebar {
       top: 0;
       left: 0;
       bottom: 0;
       color: #fff;
       width: 250px;
       position: fixed;
       overflow: hidden;
       overflow-y: auto;
       background: #4b4b4b;
   }
  

  头像：动画效果、圆角、鼠标放置效果

  侧边栏导航nav为flex布局，并且按列向布局 display: flex; flex-direction: column;

  导航栏的每一个链接标签，当鼠标放置上去，背景变色，有一个动画效果transition: background .3s, box-shadow .3s;

快要35岁了，我所在的行业35岁就要失业了。现在学习一些前端编程技能，为日后转行谋出路。