发表于: 2017-03-06 21:56:11
1 614
今天完成的事情:上午修改了任务8的部分代码,学习了git添加文件到库里的命令。下午开始任务10代码的编写,截至到写日志时,顶部和底部导航栏已经编写完成。正在思考如何实现流程图的效果显示。
明天计划的事情:顺利的话完成任务10网页代码的编写。按照任务要求进行调整和优化代码。
遇到的问题:
第一个问题:任务10底部导航栏的右侧二维码和相邻文字的效果,开始文字是用三个span标签写的,图片加载在文字之后,父元素使用text-align:right,使文字和图片都到右边,但是图片的位置始终在文字的下边而不是效果图上展示的那样是完全占据右边的。于是设置父元素绝对定位,给图片和文字使用了相对定位,然后基本达到了想要的效果,但是文字和文字之间是有行间距的。后来想办法使用<br />标签,发现间距又太大了,不符合要求。但是对span标签设置padding或者margin又不会起效果,所以最后把span标签全改成了p标签。然后调整padding值或者margin值,效果就和效果图的差不多了。
第二个问题:流程图的实现,现在还没开始写代码,目前的想法是使用一个div包裹四个div,不设高度,或者设为1px,设置border的宽度,使用相对定位的功能实现数值圆的位置,然后想办法和下边文字进行关联,统一变色。后来去浏览bootstrap时发现有进度条的功能,感觉这个办法更直接省事一些,打算明天着手实践一下。
第三个问题:任务主体部分的实现,感觉有点像bootstrap中提到的面板的功能,打算使用它做一做,还有就是点击下一步那个按钮前的信息检索功能,虽然意识到要有这样的设置,但是如何实现,目前没有想法,明天做到那步时在具体查找一下。希望暂时不要用到js。
收获:在任务10代码编写的过程中,虽然花了一个下午和晚上的一些时间才将顶部和底部导航栏的代码,但是感觉比以前熟练了,基本上没有来回调试太多没有作用的代码来达到效果。只是目前对布局这块感觉逻辑关系上还是比较死板,希望以后有更大的进步!更快速简捷地写出代码来!
评论