发表于: 2018-06-29 22:31:39

1 688


今天完成的:

        完成了任务八3个页面的样式修改,提交了任务8、9。

        任务十开了个头。

明天计划的:

        看一下任务八、九的深度思考。

        了解一下bootstrap的常用组件,以及幻灯片效果的实现。

        开始码任务十。

遇到的问题:

   >>下拉菜单下的内容不能跟随下拉菜单的动画滑动。

        解决办法:经过一点点排查发现,是因为将导航栏设置了固定宽度,导致动画无法实现。将固定高度设置为最小高度即可即可解决。

   >>在屏幕宽度接近断点的时候,右边会出现一点白边。

        问题原因:因为导航栏的ul为了跟顶部的按钮对齐,向右移动了一段距离,超出了导航栏。

        解决办法:导航栏设置overflow:hidden。

   >>轮播图的两边跳转的箭头,在下拉菜单出现的时候高度会变高包住下拉菜单。之前尝试了一种粗暴的方法,将下拉菜单的z-index值设的非常高,就会浮在其他层之上,盖住轮播图的两边的箭头。不过,效果很差,又寻找了其他解决办法。

        问题原因:bootstrap框架默认属性会带有before、after伪元素。而我在设置样式时将其删掉了,破坏了bootstrap框架,导致出现bug。

        解决办法:将before、after的display:none;样式去掉即可解决。

   >>关于在段落中出席那连续的英文字符的时候,浏览器默认不进行打断,会导致段落中可能会有大量留白。

        解决办法:使用 word-break 进行打断,使单词(长段英文)在行结束强行打断。(在本次任务中我使用了空格将连着的几个词用空格间隔了,虽还会有少许空白,不过影响不大,感觉效果还行。)

今日收获:

        解决了昨天遗留的疑问,找到了问题所在。

        了解了一下flex的兼容性,在旧版IE(10之前)不支持flex,IE10需要加私有前缀-ms-。在一些属性上,新老版本浏览器也有不同。

        (可参考:https://www.cnblogs.com/zhongfufen/p/6424189.html)

任务总结:

    任务名称:CSS任务8/9

    成果链接:http://118.126.113.248/jnshu830/Task8.html

    任务耗时:6.24~6.29  共计6天

    技能脑图:

        个人脑图:

        

        官方脑图:

        

    任务总结:

        a.符合预期,没有延期。写任务的时候,还是要多动手,多多实践才能发现并解决问题。

        b.关于HTML5新标签、属性,css3的新功能,以及自适应布局需要多多了解一下。

        c.在这个任务中了解了媒体查询的用法,了解了一些HTML&css常用的布局,学习了一些关于自适应的知识。因为此次任务中用了不少flex进行布局,更熟悉了flex布局的使用。学习了一下编码规范,还有师兄的教诲,之后要把类名整理清晰,写样式的时候条理也会清晰一些,之后调整也会轻松很多。

         遇到的问题有“职业”页面的职业信息有个表格制作,在制作的时候绕了些弯路,都使用了栅格系统、table布局以及div,期间主要遇到的问题就是分格的问题,有几个格子占比不一样。在了解了一下栅格系统后,还是使用了栅格进行布局。

          在做响应式的时候,为了让内容在屏幕宽度较窄的时候也能有个良好的阅读体验,需要将内容换行来保持内容的大小。解决换行的问题时,使用了flex的换行属性 wrap 。

          还是这个“职业”页面。因为需要设置一个hover样式,出现一段内容。这个地方,想了两种方法,一种是display:none ,一种是用高度变化展示一个动画效果。为了体验稍好一点使用了地儿个,不过碰到个小问题,因为开始设置里面的内容时,使用的padding来控制的样式,然后想让height变成0的时候,就无法实现。最后用margin来控制段落的显示位置。

          还有别的几个问题在上边的日报里已经写明了。



返回列表 返回列表
评论

    分享到