[真传弟子]JS-江吉仪|2018年05月28日的日报-技能树.IT修真院

发表于： 2018-05-28 23:22:44

5 624

今天完成的事情：

把原本的导航栏删掉，重新写了一个。没什么大问题的导航栏。

修改若干个小bug。比如顶部的图片溢出，，原本不知道，后来才找到。

页面三的hover效果。页面的的连接居中。

使用CSS动画做了一个轮播图。然后使用label，CheckBox做了一个可以查看具体轮播图的效果。

明天计划的事情：

可能需要改下任务的代码，看下js任务一的资料，做一下js任务一的HTML和CSS。

遇到的问题：

设置了右浮动，发现，会从第一元素开始浮动。

但是不设置浮动的话

会变成这样，

解决办法是不设置浮动，display flex

设置浮动，然后在HTML里面把要排在页面前面的元素，放到后面。

收获：

今天有一个元素没有加上col-xs-12，其他元素显示正常，宽度不同，具体原因不明。

解决办法是下次需要的话就加上col-xs-12，以免出现各种奇怪的bug

如果有元素被顶下来了，应该是上面的元素影响了，查看一下元素即可。如果确认，就可以在该元素加上高度和overflow；hidden。

深度思考：

task1

4.如何使用浏览器的F12调试页面？

Windows按f12即可调试，或者在设置里面的开发者工具哪里进入调试。

常用的有点击上面的指针，可以定位元素，进行修改。也可以在指针旁边点击手机，查看在不同手机的显示效果。

选中具体元素之后可以看到盒子模型，在盒子模型下面有元素的具体样式，还可以查看样式的具体来源。

task15

5.HTML5的离线储存怎么使用？

<html manifest = "cache.manifest">只需要加上这句话即可，第一次打开的时候，会根据manifest的内筒进行下载，并且存储，等下次离线的时候也可以进行访问。

7.知道css有个content属性吗？有什么作用？有什么应用？

可以使用:before以及:after伪元素生成内容。

使用after{ content：URL（）}即可在某元素后面加上一个图片内容。

10.描述一个你在实际使用中有用过什么比较好的布局方式（不拘泥于页面整体布局，页面中某一小版块也行），深入讲解下其中的原理？

任务八中的第二个页面有一个盒子，盒子里面有很多元素，假如用传统的div，ul布局，要写很多东西。我使用了grid布局。

只需要在一个容器写上display：grid，即可开始布局。grid布局主要是使用行和列来进行页面布局。在一开始就设置多少列，行，然后设置行列的宽高。使用时，直接开始用行和列组成我们需要的格子即可。

任务开始时间：5.24

任务结束时间：5.29

任务用时5天。原本就给了自己很多时间，然后没有超出预期。

返回列表