今天完成的事件

遇到问题：

中间的这个圆圈，给的绝对定位 left给的50%但总感不是在中间，通过师兄的讲解是因为 它是以最左边为起点也就是说不是圆的中心位置而是圆的最左边的线为中心会多出一点。圆给的宽是20px,所以要减去直径的一半才是中心位置，calc(50% - 10px).

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

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

导航栏我没用CSS框架尝试自己做了一边对媒体查询有了更深的理解。

首先导航栏的 4个按钮如图

首先需要用到button按钮标签 在里面写样式通过hovr来完成 鼠标移动到那变化背景颜色和字体颜色，最主要的就是在媒体查询的时候，代码如下：

就是在900分辨率的时候标签里面的属性是也媒体查询里面的类为主，之前设置的类都自动覆盖，如果没有覆盖的类就自动继承有点像子类继承父类的属性。这里要注意一点display: none，以前一直以为是直接隐藏，该属性才是真正意义上的隐藏元素,当元素的display属性为none时,元素就会就会从视觉中消失,并且连盒模型也不生成.也不会在页面占据任何位置,不但如此,就连它的子元素也会一同从盒子模型中消失。给他和它的子元素添加的任何动画效果交互效果都会不起作用，最主要的是它不会对布局有影响。

而我之前用的是Opacity总感觉布局有点问题网上查了下了解到，该属性的意思是检索或设置对象的不透明度当他的透明度为0的时候,视觉上它是消失了,但是他依然占据着那个位置,并对网页的布局起作用。它也将响应用户交互。添加了该属性的元素,它的背景和元素内容也是会跟着变化的.

也就是说你用Opacity只是看不到而已透明了但它的还是站在那个布局里面影响我下拉框的布局。在网上查到一些其他隐藏属性。

百度查到其他隐藏属性介绍：

Visibility

 该属性类似opacity属性，该属性值为hidden的时候，元素将会隐藏，也会占据着自己的位置，并对网页的布局起作用，与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏。这个属性也能够实现动画效果，只要它的初始和结束状态不一样。这确保了 visibility 状态切换之间的过渡动画可以是时间平滑的

Clip-path

该属性很少见，该属性是通过裁剪的方法实现隐藏的。被隐藏的内容依然占据着那个位置，它周围的元素的行为就如同它可见时一样。记住用户交互例如鼠标悬停或者点击在剪裁区域之外也不可能生效。此外，这个属性能够使用各种过渡动画来实现不同的效果。

注意：clip-path之所以没有很普及，是因为其浏览器兼容问题。在IE中是完全不支持的，所以，建议用的时候一定要加上内核前缀。

参考：https://www.cnblogs.com/cythia/p/5981306.html。

所以用媒体查询让它消失然后显示出自己做的下拉框，这是自己画的：

代码如下：

直接在900分辨的时候让导航栏按钮直接消失，让自己做的下拉框在900分辨的时候出现，差不多就模仿CSS框架的导航栏组件的样式。

总结：通过这个自己做加深了 了解到媒体查询在不同分辨率下里面的类属性的变化，而这个变化只有在里面写的属性值进行原来的属性值进行覆盖而没有写到的属性值，是直接拿来用不会影响到。好像就值会影响到相同的属性值比如 高的参数，宽的参数以及外边框margin,内边框padding 等。