今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin） 

开始继续昨天的导航栏的学习、

继续昨天的思路。

通过label标签绑定input的checked点击事件

首先利用media 媒体查询，在576px的时候隐藏导航栏文字。显示label标签的按钮样式。而后通过

input：checked~text{

display:block；

}

来让之前隐藏的文本显示。

这里首先要对整个导航栏外层盒子设置flex布局- -然后设置flex-wrap：wrap；

来设法让显示的隐藏文本到下一行。

而后通过

设置，让文本单独占据一行。

通过对文本的ul设置flex布局，更改其主轴，来让文字标签垂直显示..

- -这里基本上就完成了..

但是由于设置的隐藏方式是display：none..

就导致了transition的过度效果无法显示。。

通过更改将其媒体查询触发的效果改为height：0；- -点击事件触发高度。来产生渐变的导航栏。

 @media screen and (max-width: 575px) {

        #nav-button:checked~.nav-text {

            transition: height 1s;

            height: 2.4rem;

        }

    }

首先是学习了css实现轮播图的方法。

 <!-- 残疾轮播图 -->

        <div class="loop-wrap">

            <div class="loop-images-container">

                <img src="./images/task8-1/p1.png" alt="" class="loop-image">

                <img src="./images/task8-1/p2.png" alt="" class="loop-image">

                <img src="./images/task8-1/p3.jpg" alt="" class="loop-image">

            </div>

            <div class="focus-container">

                <ul class="focus-box">

                    <li>

                        <div class="focus-item focus-item1"></div>

                    </li>

                    <li>

                        <div class="focus-item focus-item2"></div>

                    </li>

                    <li>

                        <div class="focus-item focus-item3"></div>

                    </li>

                </ul>

            </div>

        </div>

首先图片的父元素盒子设置宽度为图片的数量*每张的宽度。

这里设置了每张图片为100vw。然后外部的盒子为300vw。

通过对最外层的盒子设置overflow：hidden来隐藏横向平铺的超出屏幕的盒子大小。

- -css实现轮播图的原理主要是利用css的 animation。

animation 属性是一个简写属性，用于设置六个动画属性：

animation-name 规定需要绑定到选择器的 keyframe 名称。。

animation-duration 规定完成动画所花费的时间，以秒或毫秒计。

animation-timing-function 规定动画的速度曲线。

animation-delay 规定在动画开始之前的延迟。

animation-iteration-count 规定动画应该播放的次数。

animation-direction  规定是否应该轮流反向播放动画。

通过animation: loop 10s linear infinite;绑定下面的动画效果。

@keyframes loop {

    0% {

        transform: translate(0, 0);

    }

    30% {

        transform: translate(0, 0);

    }

    35% {

        transform: translate(-33.3%, 0);

    }

    60% {

        transform: translate(-33.3%, 0);

    }

    65% {

        transform: translate(-66.6%, 0);

    }

    95% {

        transform: translate(-66.6%, 0);

    }

    100% {

        transform: translate(0, 0);

    }

    /* 复位到第一张图片 */

}

这里用了三张图、所以三张图的定位是0 33.3% 66.6%；

然后三张图的时间总共是10s，从0~100%

- -这里图片逗留时间是30%。切换时间是5%。

明天计划的事情：（一定要写非常细致的内容） 

继续任务14
遇到的问题：（遇到什么困难，怎么解决的） 

轮播图的切换
收获：（通过今天的学习，学到了什么知识）

学习- -