task5

思路：定义头部、底部div，背景图div，专业技能等6个div每个栏根据需

要再在内部定义div。

每个栏根据实际需求设置宽高，如果不设置高度，则由内部内容撑起高度。

内部内容如果使永浮动属性，需要加上clear：both实现撑起高度目的。

头部：使用fixed定位，配合z-index属性然头部栏底部栏始终固定定位，

不随页面化冻而滑动，文字居中。返回图标放置在div内，设置左浮动。

背景图：定义div放置背景图片，图片100%铺满。在背景图片上定义div，放置头

像和地址姓名信息。头像和地址信息div都使用绝对定位，将它们决定在页面的固

定位置，同时使用页边距控制距离。

专业技能六个栏：六个栏使用同样的css样式，根据需要在内部定义小div，放置

栏左边的内容，使用绝对定位，使用top: 50%; transform: translateY(-50%);

实现水平垂直居中；定义竖线，使用浮动；定义div放置描述信息，使用浮动。使

用了浮动需要添加clear属性，使其能撑开父级div。特殊：因为父div（即bar div）

定义了line-height，所以自我介绍部分的具体内容需要另外定义行距，让多行内容

时也能显示美观。

底部：width定义95%，不铺满。使用fixed定位，z-index属性让其始终保持在页

面最前端。内部定义两个div放置留言和打电话，分别使用左右浮动，使用

border-radius画出框弧度。

画布画五角星：在div栏内引用js代码画星，画布后面使用div放置文字，两者均使

用浮动，使其处于同一行。将js代码写成循环，需要画几个星就引用几次。