发表于: 2017-07-11 22:54:38
1 934
今日所做:
1.使用轮播图插件搞公司推荐的轮播图,由水平方向滑动转为竖直
方向的滑动设置起来很容易,改一个参数就可以,但是修改样式非常
费时间,比如轮播图地下的小圆圈的样式修改,以及将图片改成div
之后需要做的各种bug修改,样式调整
2.完成轮播图的部分后继续往下做,完成剩下的页面
3.之前有的地方的响应式还没有做,比如最上面的banner部分,当
屏幕宽度缩小时,仿照官网,把职位搜索面板隐藏掉;此外还有各种
公司的推荐图片等,也分别做了响应式
明日计划:
完善一下找职位页面的响应式部分以及其他页面的细节样式修改
遇到的问题:
修改轮播图的样式,最开始不知道怎么去修改轮播图默认的小圆圈样式,
因为它使用的方法是往div里面加content,后来想了一下,通过将div
的fontsize设置为0,使content不起作用,然后设置div的长宽以及
border-radius等将div本身的做成psd图中的样式,同时设置圆圈属于
激活状态下的样式;
此外还有不少问题,比如轮播图默认接受的是图片,当我把将设置好样式的
div放在img的位置后,轮播起来会出现bug,轮播图每次会显示当前div的一部分
以及下一个div的一小部分,后来发现是因为原因貌似是插件默认接受的标签是
需要有高度的,所以给div设置了一个定高,这个bug就消失了;
此外还有将图片渲染出来后,每个轮播的图背后都会出现一个奇怪的背景,这个
bug也改了一段时间,后来通过给组件的自带样式中预留给图片的部分加定高解决
了这个问题
今日收获:
找职位页面基本上算是完成了
学会了灵活地使用轮播图组件去展示div
评论