发表于: 2017-06-01 22:18:18
1 1136
今天完成的事情:
完成最新职位和推荐职位的静态页面,使用iconfont修改以前使用的小图标,基本能够找到一样的图标,然后修改一下字体大小就可以了,清晰度也高于从ui图中切出来的图片。找网上找了一下午关于竖向轮播图的方法,后来尝试使用bootstrap的轮播图,进行修改,看看能不能改成竖向进出动作的,但是受于自己的能力,失败了。网上找了一个Swiper插件,目前觉得可以实现,编写了一个简单的demo,竖向轮播可以使用,不过是图片的,明天尝试进行项目嵌套,然后修改相关的选择器样式。
明天计划的事情:开始从首页路由跳转着手,开始js代码部分的编写。实践竖向轮播图的实现。
遇到的问题:
今天通过调整公司详情和职位详情页中中间的边框线的位置,对margin的负值状态和padding,有了更多的理解。起初没有注意到这个边框的问题,但是在看到拉勾网上的一个公司招聘信息列表时,感觉和目前做的很相似,然后查看了其样式,后来就回头把这个问题摆出来,尝试进行解决,通过调整html文件(又考虑使用路由进行底部展示区域数据变化的问题)和样式中margin值和padding值的设置,完成了和ui图一样的显示效果。
竖向轮播图的实现,下午一直在找一个可以比较方便进行修改就能实现由水平向轮播变成上下轮播的效果。网上插件其实很多,不过大部分是用jquery的方法进行实现的。js部分的代码还挺多,不方便理解。觉得时间上也不可能像在任务中那样花很长时间去理解,剖析一个东西。最后,又回头想试试把bootstrap中的轮播图修改成上下轮播的效果,但是失败了。后来在网上找到一个Swiper插件,就和富文本编辑器一样,通过js进行控制,可以通过简单修改属性值就能够到达上下轮播图的实现。编写了一个demo,感觉还可以,明天尝试套入到项目中。
收获:对margin负值的使用有了更多认识,以前以为是个鸡肋的设置,现在懂了。对竖向轮播图的实现,有点束手无策,知道如果使用纯css的话,我可以花时间进行实现,但是代码过多,就想着找相关的插件,最终算是找到了一个不错的插件,明天在项目中实践一下。
评论