[无名弟子]PM-斐师妹|2018年05月10日的日报-技能树.IT修真院

发表于： 2018-05-10 20:55:38

1 574

今天完成的事情：任务8的三个页面
明天计划的事情：完善这三个页面

遇到的问题：呵呵，自适应时格式崩了以及

页面三：

锚点

hover

header格式

响应式

页面一：

数字行格式居中

图片栏图片大小、

手机软件栏拆成多列

header

收获：

1）anchor锚点实现页面内容跳转：

http://www.jb51.net/web/118579.html

锚点是网页制作中超级链接的一种，又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接，运用相当普遍。
英文名：anchor
使用命名锚记可以在文档中设置标记，这些标记通常放在文档的特定主题处或顶部。然后可以创建到这些命名锚记的链接，这些链接可快速将访问者带到指定位置。

代码：
<a href="#001">跳到001</a>
...文字省略
<a name="001" id="001" ></a>
...文字省略

2）hover+transition实现鼠标悬停出现图片

-------------------------------------------------------------------------------------------------------------------------------------------------

任务6和7的任务总结没有放在日报里，问过师兄了，一起放在今天的日报里补一下～

任务名称：CSS=TASK6

成果链接：https://hipicklerick.github.io/gitskills/

任务耗时：1天

任务总结：

header部分依旧使用固定定位实现header始终出现

按钮组使用两个盒子部分重叠实现，首先设置成行内块元素使他们在一行，对右边的按钮使用相对定位right使盒子相对正常位置向右移动实现重叠

下来菜单栏套用bootstrap下拉菜单框架，删除/重写部分样式

护工雇主详细信息依旧使用无序列表，与任务5不同的是任务6的小图标开始使用雪碧图加快页面访问加载速度;内部文字使用flex布局分散在两端。需要注意的是所有的p元素都设置：overflow: hidden超出部分隐藏； white-space: nowrap禁止换行；text-overflow: ellipsis出现省略号。价格信息不随页面缩放而消失，需要设置flex:none禁止收缩。

footer依旧同任务5：固定定位+flex布局。

重点学习了如何制作复杂的无序列表，制作无序列表时逻辑一定要清晰，要找出各行各元素的共同点节省代码。

header的按钮组原先是用 boostrap按钮组来做的，后来发现样式修改很难和psd图相一致，且修改时也很繁琐，最后经师兄指点最后用两个层叠的div完成的。

雪碧图的原理、制作、如何在html中使用。