今天完成的事件

@import的引用

代码如下：

这个意思就是引用 我我们创建好的css文件里面的属性。

比如之前我们需要

<link rel="stylesheet" href="css/base.css">引用 但用@import可以直接在类里面进行引而不用在重新写也就是说写一份就可以用好多次不用每次创建新的HTML在重新赋值属性。

重新写的导航栏的如图

代码如下：

  之前我在写这个导航栏需要写2遍  一边是没有按钮的导航栏然后用媒体查询 显示出按钮 隐藏之前写好的，在重新写个一下拉框菜单，而这个我只用用媒体查询 然它从上到下布局推下去然后用我之前学到的，input type="checkbox属性 代码如下：

通过上面的代码我们可以看到，当分辨率到达768的时候nav-menu-warp属性值是从上到下排列居中，如开始那张图片一样，然后在通过checked 选择符

来达到下拉菜单。

轮播图：

新学到的animation 用来制作动画

这个很代码很重要 第一个是名字 到后面需要用这个名字进行联系用来让图片进行动画效果， 10s是设置的时间一共用10s播放完图片， linear理解速度这个是可以改变的 但这里是均速行驶 infinte 最重要的一个就是播放次数 但这个单词表示无限播放，这里可以设置数字来用来设置播放几次，图片

参考：https://www.cnblogs.com/TLSF/p/9067466.html

  首先要用HTML给轮播图写个容器 代码如下

接下来就是最重要的 写出上面那个代码  这里要注意 图片的大小一定要跟设置的动画大小宽度一样：代码如下

@keyframes 就是用来播放图片的 而soap是我写的那个名字， 百分比可以理解为时间 我是3个图片 在百分百可以理解为全部刚好5秒结束然后重新播放这里的事件播放百分比需要自己进行微调。

明天计划 做轮播可以点击的。