发表于: 2018-07-13 19:07:25
1 686
今天完成的事情:(今天开始做任务十的内容:
首先header有个hover变色。变大效果。我本来的想法是利用hover覆盖的办法。用另一个盒子,在hover的时候覆盖原盒子,可以达到效果,但是太麻烦了。师兄告诉我可以直接用hover变宽的效果就可以,简单快捷。代码如下
考虑事情比较喜欢往复杂了去考虑,有时候往往可以有很多简单的解决办法。
然后对整个布局引入栅格,对每个大的div添加一个class名 container,让页面整体处于一给左右对齐的布局下,
布局步骤条的时候由于考虑到,hover后面的进度的时候,前面的进度条都得变色,所以把第一个进度条固定了颜色,hover第二个的时候是有效果的,但是hover第三个的时候,第二个不会变色,这时候想到用hover+,其实是不行的,hover+只能影响相邻的兄弟元素,并且是紧靠的。这里不满足要求,所以目前做不到效果。、
然后就是设置单选框,网上搜索到了很多改变原有样式的办法,我使用label。慢慢尝试做了出来,但是要实现UI图效果,hover效果,代码如下:
css代码:
学习select的用法,去除原有样式,覆盖,做出任务需要效果
)
明天计划的事情:(明天计划完成任务十)
遇到的问题:(遇到的问题就是设置hover效果的时候,不知道怎么设置出中间白色,周五蓝色的效果,我一直以为是设置一个伪元素,把背景颜色变成蓝色,然后不知道中间怎么变成白色,想在添加伪元素,可惜做不到,纠结很久,师兄一下电通了。。。可以用蓝色的border颜色。背景色设置白色就可以达到。。)
收获:(学习表单界面)
评论