今天完成的事件。

总结任务10

以及导航栏的布局 我是用媒体查询来实现导航栏转换成按钮的，在分辨率达到多少的时候让导航栏里面的属性值全部消失display: none，该属性才是真正意义上的隐藏元素,它是值让里面的属性消失并且不会影响到布局就相当于重新在那个分辨率写一个按钮下拉框不会影响到在页面全屏的时候设计是导航栏。

注意一点Opacity该属性的意思是检索或设置对象的不透明度当他的透明度为0的时候,视觉上它是消失了,但是他依然占据着那个位置,并对网页的布局起作用。它也将响应用户交互。添加了该属性的元素,它的背景和元素内容也是会跟着变化的.也就是说你用Opacity只是看不到而已透明了但它的还是站在那个布局里面影响我下拉框的布局。

中间的这个圆圈，给的绝对定位 ，要减去直径的一半才是中心位置，calc(50% - 10px).

calc():函数用于动态计算长度值。

• 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
• 任何长度值都可以使用calc()函数进行计算；
• calc()函数支持 "+", "-", "*", "/" 运算；
• calc()函数使用标准的数学运算优先级规则；

同时这里要注意下就是 2边是没有角的并且在hover的一边要覆盖另一边的长度，代码如下：

把hover效果里面的属性宽值设置成100%给个优先级就可以覆盖2边的图案了。

按钮的设计：

focus来实现的代码如下：

它的自带外形是这样的 如果需要更改 我们需要用到新的伪类checkbox：来实现

首先input 与label这2个标签是要一起用的他们之间是有联系的特别是要改样式。

首先要生成一个伪类元素来美化默认状态下代码如下：

生成图片：

这里注意下 name是每一行组可以点击一个如果有3个name2 那么他们的效果就是点击一个 点击另一个消失如果不想让另一个消失那么就不能组成同一个名字

id就相当于他们单独的身份，如果同一组有3个ID一样会发生你不管点击第几个都是第一个生效。

通过checked的联系让点击画出的来的图像变色。而且如果你不加这行代码 那么你点击图片是没有任何效果的checked就像联系input与label桥梁有点类似与hover 你把鼠标移动上去就出发hover效果原理差不多。

接下来就是隐式原有的默认图片代码如下：

这样就会和默认按钮效果一样点击会发生变化同时改变了默认按钮的样式。

这里了解下：

input标签：是规定用户可以进行输入，而它的样式有很多。

具体代码写法<input type="" name=""

这里要注意下  type这里比如写 radio 那么这里的样式就是个按钮，你要是写text就相当于输入框和做任务4那个 手机输入框一样，而它的样式有很多。

参考：https://www.runoob.com/tags/tag-input.html

百度checked属性是：

checked：带有一个预选定复选框的 HTML 表单

定义和用法

checked 属性规定在页面加载时应该被预先选定的 input 元素。

checked 属性 与 <input type="checkbox"> 或 <input type="radio"> 配合使用。

checked 属性也可以在页面加载后，通过 JavaScript 代码进行设置。

这个东西之前用过类似下拉框，<select>标签属性有自带的原版，倒三角是可以消除的。代码如下：

-webkit-appearance: none; 这个代码就是消除原有的倒三角，然后利用背景图片把切到图片贴进去移动位置把消除的位置覆盖掉就OK了。

这里要注意下 不是所以浏览器用这个代码就可以消除，网上查了下说明不同浏览器好像代码是不一样的

百度查询：

以下所有属性兼容当前主流浏览器：appearance:none; -moz-appearance:none; -ms-appearance:none; -o-appearance:none; -webkit-appearance:none;

总结：这个任务主要难点就在于导航栏的设计，要对媒体查询的应用加深了解在多少分辨率下应用的属性值是不一样的，而且在变化按钮的时候子类对父类的影响是怎么影响的也加深了了解，并且知道如何应用input这个标签，他不仅可以当做输入框还可以做成按钮它的属性值有很多都需要自己去了解下以及如果改变它们的默认的外观。