Skip to content

Latest commit

 

History

History
103 lines (67 loc) · 6.29 KB

advancedresume.md

File metadata and controls

103 lines (67 loc) · 6.29 KB
Raw

高级简历

** 难度 ** ⭐ 基本基本的HTML、CSS、JavaScript基础

练习介绍

通过实现一个个人网站，练习 HTML、CSS 的布局与样式，并可根据自我掌握情况简单实践 JavaScript

可以参考线框图。

用例描述：

整个页面分为 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. 在用例中未描述的样式均可自定义实现。