7-22：HTML学习#13

今日学习：HTML布局定位的学习和练习，导航栏CSS的学习和练习。学习时长：6h。

 

*{

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    font-family: "Micorsoft YaHei",sans-serif;

}

/*导航栏样式设置*/

nav{

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 5vw;

    height: 80px;

    background-color:rgb(239, 239, 239);

    box-shadow: 0 0 5px rgb(46, 46, 46);

}

/*LOGO样式设置*/

.logo{

    font-size: 24px;

    font-weight: 600;

    color: black;

    flex: 1;

}

/*导航栏分布*/

.nav-menu{

   flex: 1;

   display: flex;

   justify-content: space-between;

   max-width: 550px;

}

/*默认首页为选中状态*/

.nav-menu a.current{

    border-bottom: 2px solid gray;

    color: gray;

}

/*导航栏文字的样式*/

.nav-menu li{

    list-style: none;

    color: black;

    font-weight: 600;

}

/*导航栏文字底部样式*/

.nav-menu li a{

    text-decoration: none;

    color: black;

}

/*鼠标移动到导航栏文字上时效果*/

.nav-menu li a:hover{

    color: gray;

    border-bottom: 2px solid gray;

   

}

/*导航栏按钮样式*/

.burger div{

    width: 25px;

    height: 3px;

    background-color: black;

    margin: 4px;

}

/*生成框不显示*/

.burger{

    display: none;

}

/*当最小宽度小于768px时，导航栏缩成按钮*/

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

    .nav-menu{

        position:absolute;

        top: 80px;

        right: 0;

        bottom: 0;

        width:20vw;

        height: calc(100vh-80px);

        background-color:rgb(239, 239, 239) ;

        flex-direction: column;

        align-items: center;

        justify-content: flex-start;

        transform: translate(100%);

        transition: 0.4s ease-in-out;

    }

    .nav-menu.open{

        transform: translateX(0);

    }

    .nav-menu li{

        margin: 3vh;

        opacity: 0;

    }

    .burger{

        display: block;

    }

    /*导航栏按钮点击后变成×*/

    .burger.active div{

        transition: 0.3s ease-in-out 0.3s;

    }

    .burger.active .top-line{

        transform: rotate(45deg)translate(4px,6px);

    }

    .burger.active .bottom-line{

        transform: rotate(-45deg)translate(4px,-6px);

    }

    .burger.active .mid-line{

        opacity: 0;

        transform: translateX(10px);

        transition: 0.3s ease-in-out;

    }

    /*导航栏渐变样式*/

    @keyframes slideIn {

        from{

            transform: translate(20px);

            opacity: 0;

        }

        to{

            transform: translate(0);

            opacity: 1;

        }

    }

}

/*占满整个屏幕*/

header{

    position: absolute;

    top: 80px;

    width: 100%;

    height: 3000px;

    background-color: azure;

    z-index: -1; ;

}

#box{

    position:absolute;

    background-color:antiquewhite;

    width: 1200px;

    height: 2000px;

    left: 100px;

    margin: auto;

    left: 0;

    right: 0;

}

#box1{

    position: absolute;

    top: 5px;

    left: 200px;

}

#box2{

    position: absolute;

    width: 300px;

    height: 300px;

    background-color: pink;

    right: 200px;

    top: 5px;

    box-shadow: 10px 10px 5px rgb(145, 145, 145);

}

#box3{

    position: absolute;

    width: 300px;

    height: 300px;

    background-color: pink;

    left: 200px;

    top: 500px;

    box-shadow: 10px 10px 5px rgb(145, 145, 145);

}

#box4{

    position: absolute;

    width: 300px;

    height: 300px;

    background-color: pink;

    right: 200px;

    top: 500px;

    box-shadow: 10px 10px 5px rgb(145, 145, 145);

}