个人简历模板（原生三件套）

# 高级简历 ** 难度 ** ⭐ 基本基本的HTML、CSS、JavaScript基础 ## 练习介绍 通过实现一个个人网站，练习 HTML、CSS 的布局与样式，并可根据自我掌握情况简单实践 JavaScript 可以参考[线框图](https://github.com/webmooc/webmooc-practice/blob/master/practice_chs/asset/advancedresume/advancedresumeprototype.png)。 ## 用例描述： 整个页面分为 6 大部分，每个部分又会细分为内部的小模块 ### 头部 头部为线框图中最上面的一个横条，里面包含了个人姓名（或LOGO图），个人照片，锚点链接 - 背景：背景为一个和浏览器窗口保持100%一样宽度的区域，颜色自行安排，可以是纯色，也可以尝试使用渐变色，或者使用一些 CSS 的高级技巧，设置成图案填充（比如重复的斜杠条纹等）或者图片背景。 - 头部的内容区域，即包含了NAMELOGO、Link和个人照片的部分，为960px固定宽度，且整体居中 - NAMELOGO：在内容区域居左，纵向居中，可以是个人名字的文字或者是一个LOGO，如果是文字，可以挑战使用font-face来实现一个漂亮的字体LOGO，如果不想暴露个人隐私，推荐使用假名。如果使用font-face，请注意字体版权问题 - 个人照片：在内容区域居右，纵向居中，照片本身为矩形，通过 CSS 实现为带边的圆形，，推荐使用非个人图片，注意图片版权问题。 - 链接：在内容区域，距离照片40px，字号14px，每个链接中间用 | 分隔，鼠标移动到链接文字上时，有变颜色的效果，点击链接后，页面跳转到下面内容具体的锚点位置上 ### 基本介绍及联系方式Banner 线框图从上往下的第二块灰色区域，包含一个背景及上面的文字。 - 整体区域：为 960px 定宽居中，160px 定高，上下外边距 10px，内边距 20px - 背景可自选一种纯色、渐变色或背景图，图片使用请注意版权问题 - 文案分为标题、正文和联系方式 - 联系方式可以自行增加电子邮箱及手机两个icon放在邮箱地址和电话号码之前，具体联系方式如果不想暴露个人隐私，使用不存在的虚拟内容 ### 个人技能介绍、基本经历介绍 线框图从上往下的第三块区域，包含左右两部分 - 整体第三块区域为 960px 定宽居中，高度自适应内容高度 左侧区域为一个个人技能区域，用条形图来描述各项技能的掌握情况 - 左侧区域定宽 240px，区域内内边距 10px，与右边区域边距 10px - 技能掌握标题，居中 - 技能部分，文字均居右 右侧区域为个人基本经历介绍 - 右侧区域定宽 710px - 右侧区域包含了上面的 Tab 菜单区域，及下面的内容区域 - Tab菜单区域分为当前显示Tab及未显示Tab两种状态，当前显示Tab注意文字下方无边线 - 个人经历内容区域分为左右两部分，时间区域和内容区域 - 【可选】有 JavaScript 经验的同学，可以实现点击Tab实现内容切换的功能，没有 JavaScript 经验的同学只需要实现样式即可。 ### 项目介绍模块 线框图从上往下的第四块区域，整体区域包含背景区域及内容区域 - 背景区域为一个第奇数个项目有背景色，偶数没有的设计，背景色的宽度和浏览器窗口保持100%宽，高度则根据项目内容高度自适应 项目内容区域分为中间和右边两部分 - 中间部分，为960px 定宽，包含项目标题、项目时间、项目中的角色、项目所属组织、项目具体介绍、项目涉及的技能Tag列表，以及一个项目标题图，各元素布局及样式参考线框图，可以微调 - 项目标题图为内容部分居左的方图，语义为项目的LOGO图，具体内容自定义 - 右边部分为一个项目配图，语义为项目的DEMO图，距离中间部分20px边距，宽度随着屏幕大小自适应调整，但有一个最大宽度（值自定），当屏幕宽度过小时（阈值自定），配图消失。配图的高度随着宽度一同自适应变化，但有一个最大高度（值自定） ### 互动部分 线框图从上往下的第五块区域，整体区域左右两部分 - 整体区域为960px 定宽，高度为 370px 定高 左侧为个人额外的介绍图集，语义上可以是项目图集，作品图集或是个人照片图集，实际内容自定不限制 - 左侧区域宽度为630px，每一个子元素宽度为150px，之间间距为10px - 每一个图片元素，包含一个背景图，一个名称，和一个点赞按钮 - 【可选】点赞按钮可以实现点击按钮后变化按钮的效果，比如从空心点赞按钮变为实心点赞按钮，也可以做一个点赞后心形飞出的效果 右侧为留言板区域 - 留言板标题，标题居中 - 留言板内容区域，区域定高定宽，里面内容可内部滚动 - 留言板内容区域的留言内容包括一个头像、留言人名称和具体留言内容，按照线框图所示，头像和内容的排列左右按照内容奇偶进行交叉排列 - 头像内容自定义，可以使用留言名字的首字母（首字）放大显示 - 留言发言区域包含留言内容，留言人名字，及发表留言按钮三个元素，使用placeholder属性进行输入提示 - 【可选】具备 JavaScript 基础的同学，可以实现输入留言内容，点击发布留言按钮后，把新的留言内容显示到留言内容区域的最上方第一个，注意对留言内容进行基本校验，如是否为空，如长度约束，如XSS验证等，具体规则自定，不做统一要求。没有 JavaScript 基础的同学只需要实现布局和样式即可 ### 页脚部分 线框图从上往下的最下方区域 - 背景色为深色背景，和浏览器窗口保持 100% 宽 - 里面包含一段居中的文字，内容自定 ## 要求 1. 兼容性满足PC的Chrome浏览器； 2. 选择清晰、合理、富有语义化的 HTML 结构表达； 3. CSS 选择器使用合理、富有语义化、维护性、可复用性强，样式代码清晰简洁； 4. 布局选择的方案合理准确，尽量选择现代浏览器支持的最优方案，避免使用hack或者理解难度较大的方案； 5. 不使用任何第三方框架、类库； 6. 注意避免个人隐私泄露； 7. 注意不要在图片、文字使用上出现版权问题。 8. 在用例中未描述的样式均可自定义实现。