* {
    margin: 0;
    padding: 0;
}

header{
    position: fixed;

    background-color: rgb(81, 127, 255,0.8);


    width: 100%;
    height: 80px;
    z-index: 2;
}
header a{
    position:relative;
    text-decoration:wheat;
    color :antiquewhite;
    font-size: 20px;

    margin-left: 500px;
    margin: 20px;
    top: 30px;

}

/* a的hover事件已经移动到最底*/
header div{
    position:relative;
    
    margin-left: 60vw;
    margin-top:-20px;
}


header h1{
    position: relative;
    color: rgb(243, 207, 233);
    font-size: 40px;
    display: inline;
    margin-right: 35vw;
    top: 10px;
    left: 20px;
}


.sec1 h2{
    position: relative;
    color: rgb(255, 105, 180);
    z-index: 1;

    top: 120px;
    font-size: 35px;
    
}
.sec1 h3{
    position: relative;
    color: rgb(255, 125, 209);
    top: 150px;
}
.sec1 h4{
    position: relative;
    color: rgb(255, 152, 200);
    top: 180px;

}
.sec1 a{
    position: relative;
    color: rgb(4, 155, 255);
    border: 1px solid ;
    border-color: rgb(207, 107, 166);
    padding: 15px;
    top: 200px;
}
.sec1{
    width: 100%;
    height: 90vw;
    background-image: url("Background.png");
    background-color: rgb(62, 130, 255,0.8);
    background-repeat: no-repeat;
    display: flex;
    /*纵向排列*/
    flex-direction: column;
    /*对齐方式*/
    align-items: center;
    padding: 25px;

}

.sec2{
    display: none;
    
}
.CodeView{
    position: relative;
    top: 80px;
    display: flex;
    width: 100%;
    height: 2000px;
    background-color: rgb(97, 153, 255);
    flex-direction: row;
    top: 80px;
}
.CodeNav{
    position: fixed;
    height: 100%;
    width: 150px;
    display: flex;
    flex: 5;
    flex-direction:column;
    background-color: rgb(0, 119, 255);

}
.CodeNav a{
    position: relative;
    top: 30px;
    display: flex;
    margin: 10px;
    border: 1px solid;
    border-color: rgb(255, 210, 247);
    margin: 10px;
    padding: 5px;
    color: rgb(255, 187, 235)
}
.CodeContent{
    flex: 9;
    background-color: rgb(45, 171, 255);
}
.iAppCode{
    display: flex;
    flex-direction: column;
}
.JavaCode{
    display: none;
    flex-direction: column;
}
.JavascriptCode{
    display: none;
    flex-direction: column;
}



.list{
    position: relative;
    width: 100%;
    height: 300px;
    background-color: antiquewhite;
    margin: 10px;
    left: 150px;
    padding: 10px;
}
.title{
    position: relative;
    font-size: 25px;
}


.sec3{
    position: fixed;
    display: none;

}

.sec4{
    position: fixed;
    flex-direction: column;
    display: none;
}


a:hover{
    text-decoration: underline;
    color: rgb(255, 208, 147);
}




/*移动端界面*/
@media screen and (max-width:856px){
    header h1{
        font-size: 28px;
    }
    header div{
        visibility: hidden;
        .sec1{
            background-position: center;
        }
    }
    .sec1 h2{
        font-size:25px;

    }


}