发表于: 2017-03-17 21:44:56
2 568
今天完成的事情:今天主要是研究怎么用css实现轮播图的效果了,虽然以前璐瑶师兄讲过这个的小课堂,感觉很简单,也是计划上午就能搞定开始就在网上找了一个感觉可以理解又相对逻辑清楚,且没有使用js代码,然后下载下来后对其进行仿写,一边写,一边看效果的变化,期间也遇到不少问题,一时没能迅速解决,晚饭后才真正把效果做出来。目前对于css实现轮播图的效果有了更清晰的认识,只是花费的时间有些长,超出了计划不少时间。任务13的投票也目前还没有开始写。
明天的计划:试试不使用框架任务13的投票页如何实现,调整代码,完成自适应的效果,将任务13的代码做完。
遇到的问题:
今天在用css实现轮播图上花费了不少时间,就遇到的问题汇总一下:
首先是下方四个白点的实现,参考网上找到的模板,使用的是label标签,设置宽高得以实现,并不是我开始想的使用div,添加一个circle的类。然后对它进行了定位,但又出现了问题,label标签的父级并没有设置高度情况的下,label标签的父级却有了一个固定高度,远远大于小白点的宽高,相对应的,模板的设置和我写的一样,高度确实有小白点撑起来的,研究了半天也没有发现问题,只是设施display:inline-block;又设置高度,高度才有所改变,但小白点却并不在父级框里,而是在父元素的下边一定距离。最终还是用了相对定位的方法,一点点调整top的百分比值对应到底部设计的位置。
其次,由于所见模板的小白点和左右导航按钮都是用label标签实现的,我开始对它的结构不是很了解,就改成了div去仿写了,后来发现它的结构主体是radio标签,只能写label标签然后设置for属性关联radio才能实现要的效果,使用div无法和radio标签相关联。
再者就是轮播图主体部分的编写,昨天已经写好了,这次原以为只是简单的复制粘贴一下分成四份,但后来发现并不像模板的那样主体就排成一排了,结果是一列排下来的,点击换页时也是上边消失,下边显示的,位置占据了。并没有实现效果,后来反复对比自己和模板的代码,发现可能使用了相对加绝对定位的方法能实现,所以后来就去试了,自然是成功了,但又有了一个新的问题,父元素的高度不能由子元素撑起来了,塌到让隐藏的input来支撑,反复使用其他方法实现定位,但最后还是给父元素设置了一个固定的高度才实现,虽然感觉问题没有完美解决,但目前而言还算能够实习要求的效果。
收获:不成想研究了一天轮播图,感觉轮播图无论用css实现还是再加js实现,在html页中始终分三部分,一个是底部的多个小白点,第二是左右的导航跳转箭头图标,第三就是轮播的主体了。目前没有发现有其他的东西,至于css中的难点和要点,其实是点击左右导航图标或者小白点如何实现同步和轮播主体的变化,开始我以为必须得用js不可,但后来网上确实有许多只用css就就能实现的模板,我找了一个,其中的主要思想是通过input的radio标签,让它做一个媒介,通过它的跳转来带动所有for它的标签的跳转。目前就理解到这步!分享一下我使用的模板:http://www.jq22.com/jquery-info8926
评论