一、今天完成的事情

1、完成任务15三个页面的调试。

2、用css完成导航栏：写了两个样式：横向和纵向，通过@media控制。

在module.less的代码:

/*nav*/

.nav {

    width: 100%;

    background: #29b078;

    font-size: 0;

    .nav-img {

        padding: 0.27rem 0;

        vertical-align: middle;

        .logo1 {

            width: 1.05rem;

            cursor: pointer;

        }

        .logo2 {

            float: right;

            width: 0.3rem;

            padding-top: 0.1rem;

            cursor: pointer;

        }

        .navbar2 {

            margin-top: 0.14rem;

            .cat2 {

                padding: 0.36rem 0.32rem;

                border-bottom: 4px solid #29b078;

                color: #fff;

                font-size: 0.16rem;

                &:hover {

                    border-bottom: 4px solid #fff;

                }

            }

        }

    }

    .navbar1 {

        display: none;

        .cat1 {

            color: #fff;

            font-size: 0.16rem;

        }

        li {

            border-bottom: 4px solid transparent;

            line-height: 0.3rem;

            text-align: center;

        }

        & li:hover {

            border-bottom: 4px solid #fff;

        }

    }

}

二、明天计划的事情

1、解决导航栏和轮播图遗留问题。

2、学习js语法。

三、遇到的问题

1、在写导航栏的时候，想给图标一个鼠标事件，点击出现垂直下来的菜单，想法是挺好的，不过写了好几个demo都没有实现。

2、如何用css实现轮播图？

通过动画实现，不过没有添加控制按钮。明天继续。

html代码没有什么可说的，样式的话首先必定slider的大盒子必定是相对定位，另外我们采用在li标签中添加background-image，因为这样才有可能用纯的css实现响应式，另外背景图为了在响应式中看清全貌，必然使用background-size:100%，另外就是高度问题了，显然slider-container必需是和li的高度一致，因为响应式中必然这个高度不能固定死，所以使用height属性显然不行，padding属性可以解决这个问题，一是background-image可以显示在padding中，二是padding中以%为单位是以父元素宽度为基准的。

/*slider start*/

.slider-contaner{

    width:100%;

    position:relative;

}

.slider-item + .slider-item{

    opacity:0;

}

.slider-item{

    width:100%;

    position:absolute;

    animation-timing-function: linear;

    animation-name:fade;

    animation-iteration-count: infinite;

    background-size:100%;

}

.focus-container{

    position:absolute;

    z-index:7;

    margin:0 auto;

    left:0;

    right:0;

}

.focus-container li{

    width:10px;

    height:10px;

    border-radius:50%;

    float:left;

    margin-right:10px;

    background:#fff;

}

.focus-item{

    width:100%;

    height:100%;

    border-radius:inherit;

    animation-timing-function: linear;

    animation-name:fade;

    animation-iteration-count: infinite;

}

.focus-item2,.focus-item3,.focus-item4,.focus-item5{

    opacity:0;

}

.focus-container ul{

    margin-left:46%;

}

/*设置轮播焦点的位置*/

.focus-container{

    bottom:2%;

}

/*设置当前图片焦点的颜色*/

.focus-item{

    background:#29b078;

}

/*设置动画，请根据实际需要修改秒数*/

.slider-item,.focus-item{

    animation-duration: 12s;

}

.slider-item1,.focus-item1{

animation-delay: -1s;

}

.slider-item2,.focus-item2{

    animation-delay: 3s;

}

.slider-item3,.focus-item3{

    animation-delay: 7s;

}

@keyframes fade{

    0%{

        opacity:0;

        z-index:2;

    }

    5%{

        opacity:1;

        z-index: 1;

    }

    20%{

        opacity:1;

        z-index:1;

    }

    25%{

        opacity:0;

        z-index:0;

    }

    100%{

        opacity:0;

        z-index:0;

    }

}

/*设置背景，响应式请利用媒体查询根据断点修改路径*/

.slider-item1{

    background-image:url(banner-1.png);

}

.slider-item2{

    background-image:url(banner-2.png);

}

.slider-item3 {

    background-image: url(banner-3.png);

}

/*设置图片的高度，请根据具体需要修改百分比，响应式及时修改此值*/

.slider,.slider-item{

    padding-bottom:40%;

}。

淡入淡出效果肯定是使用opacity，首先整体来看所有图片的淡入淡出都是同一个动画，只是时间不一样而已，这肯定是利用animation-delay来控制，动画无限轮换肯定使用animation-iteration-count: infinite，

四、收获

    1、学会用css写响应式导航栏。

2、如何用css实现轮播图。