[深圳|结业弟子]JS-徐炜|2018年05月13日的日报-技能树.IT修真院

发表于： 2018-05-13 00:02:01

2 643

一、今日完成的情况

1、基本做完了任务八的首页页面，还有一些地方需要优化调整。

2、上午听了沁修长老的课程，对着课程的内容，对之前不是很明白的地方查漏补缺。

3、修改了首页页面，做了职业介绍的页眉和页脚。

二、明天的计划

继续做任务，设置职业推荐页面。

三、遇到的问题

1、 ul列表使用 display: inline-block;横过来以后，li前面的圆点无法显示。

解决办法：。

2、li使用伪类hover的text-decoration: underline设置的下划线颜色没法单独设置，只能和文字保持同一种颜色。

解决办法：不使用text-decoration: underline来设置下划线，选择设置下边框即可解决。

3、对使用hover伪类来添加边框效果的元素，当鼠标指到该元素上时，会对附近的元素造成位移。

解决办法：调整后发现是原来的元素没有加上边框，加上边框后，再使用鼠标来指到该元素上时，便不会造成元素位移。

四、收获

听了上午沁修长老的课，下来回顾了一下display: inline-block和position的知识点。

1、根据定义，display: inline-block规定元素生成一个行内块元素。用通俗的话讲，就是不独占一行的块级元素。之前用浮动用的较多，但是浮动会造成高度塌陷等问题。所以我们根据实际情况有时候也使用display: inline-block来进行布局，但display:inline-block有时也会带来一些问题。例如：设置了display:inline-block的两个DIV中间有空白间隔，但代码显示没有设置margin，这是由于换行导致的间隔。解决办法：设置父元素font-size：0；即把空白字符设置为0，即可消除间隔。

2、position ="absolute" position="fixed" ，1>.相同点：（1）完全脱离标准文档流，不占据空间；（2）未设置偏移量时，都定位在父元素左上角。（3）默认会覆盖到非定位元素上。2>.不同点：（1）设置偏移量时，偏移量的基准，absolute如果无已定位的祖先元素，以<html>为基准，如果有已定位的祖先元素，以最近的父元素的为基准偏移。而对于fixed来说，有无已定位的祖先元素都以浏览器的可视窗口为基准偏移；（2）滚动时，absolute:位置会随滚动条变化，而fixed:位置不会随滚动条变化。