发表于: 2018-07-13 19:07:25

1 687


今天完成的事情:(今天开始做任务十的内容:

首先header有个hover变色。变大效果。我本来的想法是利用hover覆盖的办法。用另一个盒子,在hover的时候覆盖原盒子,可以达到效果,但是太麻烦了。师兄告诉我可以直接用hover变宽的效果就可以,简单快捷。代码如下

.join:hover {
width: 10rem;
color: #000;
background-color: #fff;
text-align: center;
padding: 0 2rem;
}

考虑事情比较喜欢往复杂了去考虑,有时候往往可以有很多简单的解决办法。

然后对整个布局引入栅格,对每个大的div添加一个class名 container,让页面整体处于一给左右对齐的布局下,

布局步骤条的时候由于考虑到,hover后面的进度的时候,前面的进度条都得变色,所以把第一个进度条固定了颜色,hover第二个的时候是有效果的,但是hover第三个的时候,第二个不会变色,这时候想到用hover+,其实是不行的,hover+只能影响相邻的兄弟元素,并且是紧靠的。这里不满足要求,所以目前做不到效果。、

然后就是设置单选框,网上搜索到了很多改变原有样式的办法,我使用label。慢慢尝试做了出来,但是要实现UI图效果,hover效果,代码如下:

<span class="box3">
<input type="radio" id="right-mouse" class="box4" name="right-mouse">
<label for="right-mouse"></label>
<span class="box11">对口箱</span>
</span>

css代码:

.box3 label {
width: 1.5rem;
height: 1.5rem;
position: absolute;
top: 1rem;
left: 0;
background: #fff;
border:1px solid #ccc;
border-radius: 50%;
/* cursor: pointer; */
}

.box3 input:checked+label::after {
content: '';
width: 1.5rem;
height: 1.5rem;
position: absolute;
border: 5.5px solid #1d7ad9;
background-color: #fff;
border-radius: 50%;
left: -1px;
top:-1px;
}


学习select的用法,去除原有样式,覆盖,做出任务需要效果

) 
明天计划的事情:(明天计划完成任务十) 
遇到的问题:(遇到的问题就是设置hover效果的时候,不知道怎么设置出中间白色,周五蓝色的效果,我一直以为是设置一个伪元素,把背景颜色变成蓝色,然后不知道中间怎么变成白色,想在添加伪元素,可惜做不到,纠结很久,师兄一下电通了。。。可以用蓝色的border颜色。背景色设置白色就可以达到。。) 
收获:(学习表单界面)


返回列表 返回列表
评论

    分享到