发表于: 2018-06-28 22:13:08
1 739
今天完成的:
完成了响应式导航栏。
基本完成了任务八三个页面的响应式设计(还有些问题)。
明天计划的:
解决遗留问题,提交任务八、九。
看一下bootstrap官方文档。
若任务八、九没问题,尽快开始进行任务十。
遇到的问题:
>>>响应式导航栏的设计:想了比较久,思路有点混乱。
解决方法:知道了可以使用插件写响应式导航栏之后,琢磨了一下,把样式调整好,写出来了。不过还是不是很明白。
>>>关于菜单按钮的hover效果:在点击之后hover效果消失,要在别的地方点一下,hover效果才会再出现。
解决办法:经排查样式表,发现是focus的效果覆盖了hover,在样式表里将focus样式放到hover前面就好了。
>>>点击菜单按钮之后,下拉菜单不显示(还是被下面内容遮住?)
解决办法:刚开始没找到原因,按钮那块儿全部样式删掉重写了一遍。(现在想想好像可能是overflow给隐藏掉了)。
>>>关于页面一的问题:
在768px 下,右边会有白边。原因是菜单栏为了跟头部的按钮对齐向右移动了一部分距离,超出了导航栏。而对导航栏设置overflow:hidden 将会在自适应出来按钮的时候,下拉菜单被隐藏。
解决方法:媒体查询啊.......
>>>关于页面二的问题:
合作企业页面banner随屏幕宽度变化会无限缩小,缩小到一定程度就看不清了。(暂时还没解决)
合作企业的链接列表对齐有点问题。
解决办法:使用wrap换行后,给每个链接加了padding,看上去效果还行。。。
>>>关于页面三的问题:
“方向”栏,“方向”在屏幕宽度缩小的时候,会竖向排列。
解决方法:给他设置一个最小宽度。
关于响应式出现下拉菜单按钮后,点击按钮,下拉菜单滑动过程中,下面的内容不能跟随下拉菜单的底部滑动。会等到下拉动画完成后,下边的内容才会归位。(本来想着先给他个z-index显示在上层,不会看着那么乱,不过在样式表上设置z-index并不生效。。。)(该问题也还没解决)
今日收获:
学会了使用插件设置响应式导航栏。
今天进行了很多样式的修改,感觉对各种样式更熟悉了一些。还有很多效果的覆盖什么的,在进行样式设置的时候,要细心一些。大概明白了媒体查询放在样式附近的原因。(设置媒体查询样式的时候滚动条都快让我拉坏了。。。)
评论