/* #####################################
作者:Rebecca
联系:wyyklh123@126.com
日期:2020-06-20
me的菜单样式
####################################### */

/*01.结构化框架容器的样式*/
html {
    background-image: url(../images/fei.png);
}

body {
    text-align: center;
}

main {
    margin-top: 20px;
    text-align: center;
    padding: 10px;
    background-repeat: repeat-x;
}

aside {
    font-family:
        STKaiti, "华文行楷", Microsoft YaHei, "微软雅黑", sans-serif;
    font-size: 120%;
    text-align: center;
}

div {
    border: 1px solid black;
    border-radius: 10px;
    background-color: rgba(82, 132, 205, .2);
    margin: 50px;
    padding: 50px;

}

footer {
    border-top: 1px solid #8b8989;
    margin-top: 60px;
    text-align: center;
    padding: 20px;
    font-size: 100%;
    font-family: STKaiti, "华文行楷", Microsoft YaHei, "微软雅黑", sans-serif;
}

/*02.Inline Elements 的样式*/
footer a {
    color:black;
}

/*03.自定义class或id的样式*/
p#one,
p#two{
    background-color: rgba(255, 255, 255, .7);
    font-size: 110%;
    padding: 20px;
    text-align: center;
    margin-right: 20px;  
}

p#three{
    background-color: rgba(255, 255, 255, .7);
    font-size: 110%;
    padding: 20px;
    text-align: center;
} 

ul#me {
    background-color: ;
    display: flex;
    flex-direction: row;
    flex-flow: wrap;
    padding: 100px;
}

ul#me li {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: calc(100% / 2 - 20px);
    margin: 10px;
    border-radius: 5px;
    opacity: 1;
    box-shadow: 0px 2px 2px 1px rgba(5, 15, 24, .2);
}


/*04. 网页flex分栏排版*/
#flex {
    display: flex;
    flex-flow: row nowrap;
}

p#one {
    flex: 1;
}

p#two {
    flex: 1;
}

p#three {
    flex: 1;
}

/*05. 自适应样式*/

/* 炒鸡小屏手机 (phones, 600px and down) */

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

    #flex {
        display: block;
        flex-basis: auto;
    }

    p#one,
    p#two,
    p#three {
        margin-bottom: 10px;
    }
    
    p#three{
        margin-right: 20px;
    }

    /* 中等手机以及竖屏平板 (portrait tablets and large phones, 600px and up) */
    @media only screen and (min-width: 600px) {
        #flex {
            flex-basis: calc(100% / 1 - 40px);
        }

        /* 横屏平板 (landscape tablets, 768px and up) */

        @media only screen and (min-width: 768px) {}

        /* 中小型笔记本电脑及台式机 (laptops/desktops, 992px and up) */

        @media only screen and (min-width: 900px) {
            ul#spring li {
                flex-basis: calc(100% / 3 - 60px);
            }
        }

        /* 宽屏笔记本及台式机 (large laptops and desktops, 1200px and up) */

        @media only screen and (min-width: 1200px) {}