发表于: 2018-07-16 11:39:01

1 724



task10  任务总结






官网脑图:


个人脑图:


任务耗时:5天。(中间请了一天假)

成果链接:https://singsad.github.io/task10/task10.html.

任务总结:首先布局的header。使用了hover效果,使得hover时候变大变色,刚开始我的想法是使用另一个盒子,在hover的时候覆盖之前的盒子,发现自己是把简单的东西复杂化了,多写了很多代码不说,效果也没有好到哪里去,

师兄说可以直接设置hover时变大,经修改,代码如下

对于接下来的响应式下拉菜单按钮,由于前期布局使用最简单的flex布局,很容易得到任务效果,但是在手机访问,界面缩小时,不会出现响应式下拉菜单,尝试写媒体查询来改变,不会写。。所以没办法只能用引入bootstrap的方法来重写这个下拉菜单,浪费了时间。

之后就是task10的难点,对于radio样式的修改。

网上搜索到了很多改变原有样式的办法,我使用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 {
width1.5rem;
height1.5rem;
positionabsolute;
top1rem;
left0;
background#fff;
border:1px solid #ccc;
border-radius50%;
/* cursor: pointer; */
}



.box3 input:checked+label::after {
content'';
width1.5rem;
height1.5rem;
positionabsolute;
border5.5px solid #1d7ad9;
background-color#fff;
border-radius50%;
left-1px;
top:-1px;
}

设置hover效果的时候,不知道怎么设置出中间白色,周五蓝色的效果,我一直以为是设置一个伪元素,把背景颜色变成蓝色,然后不知道中间怎么变成白色,想在添加伪元素,可惜做不到,纠结很久,师兄一下电通了。。。可以用蓝色的border颜色。背景色设置白色就可以达到。。总结:要学会变通,要用多个角度考虑问题。

最后就是对下拉菜单的样式修改

.box2>.first-step>.dropdown-first>select {
appearancenone;
-webkit-appearancenone;
width13rem;
height4rem;
font-size1.4rem;
padding-left2rem;
outlinenone;
border1px solid #ccc;
background#fff;
}

使用appearancenone;去除原有的low比样式,接下来设置我们自己的样式,我使用的是绝对定位,修改完成之后覆盖上去

.dropdown-first::after {
content'';
width3rem;
height3rem;
backgroundurl(sanjiao.pngno-repeat center;
positionabsolute;
pointer-eventsnone;
top15%;
right-0.8rem;
}


最后就是使用媒体查询,在结束的时候做出小屏幕访问效果。使用媒体查询改代码。因为刚开始布局代码的时候考虑的不周到,没有考虑到响应式的问题,导致后面再设置响应式比较麻烦,加上自己原来布局比较菜,乱七八糟的,所以在后面使用媒体查询要改变好多布局加盒子,真的是特别麻烦。自我谴责。以后写样式对布局一定要严格要求,把布局写好,不要乱定宽高。不把简单的东西复杂化,不强加样式。遇到的问题是:媒体查询时候无法设置,经师兄帮助。得知媒体查询一般需放在最后面,放在前面会被后面的代替。好处是对媒体查询了解加深。

然后对于深度思考

1.如何改变默认radio和select的样式?

介绍一下input元素,input元素是最重要的表单元素。

       input元素在 form元素中使用,用来声明允许用户输入数据的 input 控件。

       输入类型是由类型属性(type)定义的,输入类型至少包含23种,大多数经常被用到的输入类型如下:

       text(文本输入)、password(密码输入)、submit(提交按钮)、button(按钮)、image(图像作为提交按钮)以及checkbox(复选框)和radio(单选按钮)。

label 标签为 input 元素定义标注(标记)。label 元素不会向用户呈现任何特殊效果。

"for" 属性可把 label 绑定到另外一个元素。只需把 "for" 属性的值设置为相关元素的 id 属性的值。   也就是我们改变单选框所用的样式,把原有样式隐藏,用label显示我们自己新建的样式。

select标签用来创建下拉列表。select标签中的 option 标签定义了列表中的可用选项。

修改radio默认样式

需要用到的工具如下:

label标签;

:checked 选择器,匹配每个已被选中的 input 元素(只用于单选按钮和复选框)。

兄弟选择器:

1、+ 选择器(相邻兄弟选择器),可选择紧接在另一元素后的元素,且二者有相同父元素。

2、~ 选择器,作用是查找某一个指定元素的后面的所有兄弟结点。

修改select默认样式

appearance 属性,可以让元素看上去像标准的用户界面元素。

需要注意的是,

所有主流浏览器都不支持 appearance 属性。

Firefox 支持替代的 -moz-appearance 属性。

Safari 和 Chrome 支持替代的 -webkit-appearance 属性。



返回列表 返回列表
评论

    分享到