发表于: 2022-02-16 21:08:31

0 1915



今天完成的事情,今天再看js的基础知识,昨天和前天完成任务14和15,今天开始看关于js。在完成任务14和15时主要是在轮播图和响应式导航菜单栏花费时间,在做响应式导航菜单栏因为要利用纯css且不使用bootstrap的css与js的条件下,自己单独实验通过input【type=checkbox 】模拟点击事件来做下拉点击,然后设置点击后下来菜单出现的方式,以及在不同分辨率下导航按钮的显示

//导航

.dh{

    width: 100%;

    height: auto;

    position: relative;

    top: 0;

    left: 0;

    right: 0;

    background-color: green;

    z-index: 3;

}

.dh > div.bggreen{

    float: left; 

    height: 40px;

    margin-bottom: -40px;  

    width: 100%; 

    background-color: #008000;

}

.dh > label > div.menu > div.a > a,

.dh > div.menu2 > div.a1 > a{

    font-family: monospace;

    text-decoration: none;

    color: #fff;

}

//div.dh下的元素div.menu2

div.dh > div.menu2{

    margin-top: -150px;

    //transition: .5s ease-out;

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    width: 100%; 

    height: 120px; 

    background-color: green;

    z-index: 2;

}

//input[type=checkbox]可以对所有带有 type=checkbox 属性的input应用样式

input[type=checkbox] {

    display: none;

}

@media (min-width:680px) {

    .dh{

        min-height: 40px;

   }

    .menu{

        width: 100%; 

        background-color: green; 

        .a{

            width: 50px;  

            float: right; 

            line-height: 40px;

            font-size: 16px;

            color: #fff;

            margin-right: 20px;

            position: relative;

            text-align: center;

            &:hover .border5{

                display: block;

            }

        }

    }

  .b{

      display: none;

  }

}

@media (max-width:680px) {

    .dh{

         min-height: 40px;

    }

    .menu{

        display: none;

    }

    //相邻兄弟选择器使用了加号(+),即相邻兄弟结合符 用一个结合符只能选择两个相邻兄弟中的第二个元素

    #checkbox1:checked + .menu2{

            // margin-top: 40px;

            .menu2{

                display: block;

            }

            position: relative;

            top: 0;

            left: 0;

            right: 0;

            width: 100%; 

            height: 160px; 

 

Diandian_zy:

padding-top: 40px;

            margin-top: 0px;

            z-index: -99999999;

    }  

    // div.dh label > div.menu > div{

    //     display: none;

    // }

    div.dh label > div.menu {

        display: none;

    }

    .menu{

        width: 100%;

        height: 40px; 

        background-color: green;  

        z-index: 4;

    }

    .b{

        display: block;

        float: right;

        position: relative;

        top: 0;

        right: 30px;

        margin: 5px 30px -35px 0;

        width: 30px; 

        height: 30px; 

        background-color: rgba(240, 240, 240, .1);

        background-image: url(../img/菜单.png);

        background-size: 35px;

        background-position: center;

        z-index: 4;

        border-radius: 2px;

        border: 1px solid rgba(240, 240, 240, .1);

    }

    .b:hover{

        border: 1px solid rgba(240, 240, 240, .3);

    }  

    .menu2{

        position: absolute;

        top: 0;

        left: 0;

        right: 0;

        width: 100%; 

        height: 120px; 

        background-color: green;

        z-index: -1;

        .a1{

            width: 100%; 

            height: 30px; 

            text-align: center;

            font-size: 16px;

            line-height: 30px;

            color: #fff;

            z-index: 1;

        }

    }

来实现下拉,过程中出现很多的问题,比如下拉出的菜单项会覆盖下面的轮播图,然而有同时不能改变菜单的absolute属性 所以只能给导航设置一个小的高度 .dh{

        min-height: 40px;

   }

使之能挤压下面元素达到不遮挡的条件,然后还要解决小分辨下导航键的独立性,不能点击整个导航就出现下拉菜单 所以要把点击的判断项缩小为相对小的导航按键,然后由于太多的元素块叠加造成布局变型,后面在一点一点的实验中完善。

对于轮播图响本来是需要js来控制轮播但不使用bootstrap后基本无法使用后面经过对网上搜索引擎搜索的结果做参考,

//轮播图

.slide {

    position: relative;

    top: 0;

    left: 0;

    right: 0;

    width: 100%;

    height: auto;

    text-align: center;

    font-family: Arial;

    color: #000;

    overflow: hidden;

    z-index: -2;

      ul {

        margin: 0;

        padding: 0;

        width: 400%;

        transition: all 3s;

      }

  }

  //自动播放

  .slide .slide-auto {

    animation: marginLeft 20s infinite;

  }   

  .slide li {

    float: left;

    width: 25%;

    height: auto;

    list-style: none;

    font-size: 36px;

  }

  //动画时间

  @keyframes marginLeft {

    0% {

        margin-left: 0;

    }

    20% {

        margin-left: 0;

    }

    30% {

        margin-left: -100%;

    }

    50% {

        margin-left: -100%;

    }

    60% {

        margin-left: -200%;

    }

    80% {

        margin-left: -200%;

    }

    90% {

        margin-left: -300%;

    }

    100% {

        margin-left: -300%;

    }

  }


本来轮播老是出现轮播到最后一幅图,会有一个反向轮播跳到第一副图的情况,经过改进在最后一副图后加入第一副图,把轮播时间设置极限小,会看起来是不停的轮播,然后通过调整轮播的图片数改变轮播的宽度 达到轮播图的效果,两个任务大约花费4天半,


明天计划看任务js任务1


遇到的问题,在导航栏上出现问题,经过很多的测试,也没有找到结果, 在大分辨率上



小分辨率下



在小分辨率下显示



转到大分辨率下下拉菜单消失,但是再切换为小分辨率菜单会自己打开还没解决


收获,独立通过自己尝试完成轮播图,导航,在学习中收获很多。



返回列表 返回列表
评论

    分享到