** 难度 ** ⭐ 基本基本的HTML、CSS、JavaScript基础
通过实现一个个人网站,练习 HTML、CSS 的布局与样式,并可根据自我掌握情况简单实践 JavaScript
可以参考线框图。
整个页面分为 6 大部分,每个部分又会细分为内部的小模块
头部为线框图中最上面的一个横条,里面包含了个人姓名(或LOGO图),个人照片,锚点链接
- 背景:背景为一个和浏览器窗口保持100%一样宽度的区域,颜色自行安排,可以是纯色,也可以尝试使用渐变色,或者使用一些 CSS 的高级技巧,设置成图案填充(比如重复的斜杠条纹等)或者图片背景。
- 头部的内容区域,即包含了NAMELOGO、Link和个人照片的部分,为960px固定宽度,且整体居中
- NAMELOGO:在内容区域居左,纵向居中,可以是个人名字的文字或者是一个LOGO,如果是文字,可以挑战使用font-face来实现一个漂亮的字体LOGO,如果不想暴露个人隐私,推荐使用假名。如果使用font-face,请注意字体版权问题
- 个人照片:在内容区域居右,纵向居中,照片本身为矩形,通过 CSS 实现为带边的圆形,,推荐使用非个人图片,注意图片版权问题。
- 链接:在内容区域,距离照片40px,字号14px,每个链接中间用 | 分隔,鼠标移动到链接文字上时,有变颜色的效果,点击链接后,页面跳转到下面内容具体的锚点位置上
线框图从上往下的第二块灰色区域,包含一个背景及上面的文字。
- 整体区域:为 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% 宽
- 里面包含一段居中的文字,内容自定
- 兼容性满足PC的Chrome浏览器;
- 选择清晰、合理、富有语义化的 HTML 结构表达;
- CSS 选择器使用合理、富有语义化、维护性、可复用性强,样式代码清晰简洁;
- 布局选择的方案合理准确,尽量选择现代浏览器支持的最优方案,避免使用hack或者理解难度较大的方案;
- 不使用任何第三方框架、类库;
- 注意避免个人隐私泄露;
- 注意不要在图片、文字使用上出现版权问题。
- 在用例中未描述的样式均可自定义实现。