发表于: 2017-03-21 22:12:40
2 561
今天完成的事情:开始任务15的代码编写,有些高估自己的速度了,一天只大致完成了顶部和底部导航栏的代码,顶部响应式导航栏的效果实现花费了一上午的时间,但是顶部导航栏下拉菜单还有些问题没有很好的解决。底部导航栏相对简单一些,就直接分了三列,768px以下修改宽度为100%就解决了!
明天计划的事情:处理好顶部导航栏的问题,然后开始主体内容部分的代码编写,回顾任务12的使用css实现轮播图的效果,开始任务15轮播图的实现。
遇到的问题:
第一个是顶部导航栏在768px以下顶部的客服电话和三个图标消失,然后出现登陆和注册的文字链接,这个就仿照bootstrap框架中响应式工具中的类,使用媒体查询设置display属性就实现了,只是在位置和显示的样式上做统一调整,用了点时间,比如右侧的图标位置,居中效果如何和登陆注册的代码能公用起来等等。
第二个是下拉菜单和按钮的实现,仿照上边的情况,实现按钮的显示和四个导航的显示倒不是很难,还能和上边共用代码。主要是下拉菜单的内容怎么搞,是不是要写两个导航,纠结了很久,最后是参照任务12的下拉菜单,和任务9框架下理想的按钮菜单,两个对比,才只用了一组导航实现的,但是有个问题,就是下拉菜单出来后,无法点击,还有就是下拉菜单的出现,底下的布局位置没有变,倒是内容相应的下去了,没有达到理想的要求。调整了一晚上也没搞好!如图所示,footer的顶部位置还在下拉菜单和顶部导航栏交接的位置,而footer的内容自己下移了,破坏力copyright的高度。
收获:发现不使用框架重做任务9没自己原想的那么简单,今天的进度也很不理想,原以为已经熟悉的下拉菜单也好像全忘了似的。在做顶部的那部分时本来很简单的东西,也是来回调了半天,对自己有点不满意!附上今天做的顶部和底部的导航栏!
评论