发表于: 2018-07-16 11:39:01
1 726
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 {
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;
}
设置hover效果的时候,不知道怎么设置出中间白色,周五蓝色的效果,我一直以为是设置一个伪元素,把背景颜色变成蓝色,然后不知道中间怎么变成白色,想在添加伪元素,可惜做不到,纠结很久,师兄一下电通了。。。可以用蓝色的border颜色。背景色设置白色就可以达到。。总结:要学会变通,要用多个角度考虑问题。
最后就是对下拉菜单的样式修改
.box2>.first-step>.dropdown-first>select {
appearance: none;
-webkit-appearance: none;
width: 13rem;
height: 4rem;
font-size: 1.4rem;
padding-left: 2rem;
outline: none;
border: 1px solid #ccc;
background: #fff;
}
使用appearance: none;去除原有的low比样式,接下来设置我们自己的样式,我使用的是绝对定位,修改完成之后覆盖上去
.dropdown-first::after {
content: '';
width: 3rem;
height: 3rem;
background: url(sanjiao.png) no-repeat center;
position: absolute;
pointer-events: none;
top: 15%;
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 属性。
评论