/* https://www.bilibili.com/video/BV14J4114768?p=404&vd_source=f1f283d1bc4b954943a9148eb6f545f9 */
body{
    /* 页面宽度占满手机 100% */
    width: 100%;
    /* 最小页面缩放，手机分辨率小于这个值，页面就不再缩放了 */
    min-width: 320px;
    /* 最大页面不超过 */
    max-width: 640px;
    margin: 0 auto;
    font-size: 20px;
    line-height: 2;
    color: #000;
}


ul{
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}
ul li h1{
    color: #9e8201;

}
ul li.blank{
    border: #020202;
    margin: 50% 10%;
}

/* 后代元素选择器
语法： 祖先 后代 后代
*/
/* .app ul li{
    // 靠左浮动，这样他们才可以并排一行
    float: left;
    height: 45px;
    background-color: #333333;
    // 文本居中 
    text-align: center;
    line-height: 45px;
} */

/* 伪类选择器，根据相同类型元素选择
    :first-of-type 同类型第一个子元素
    :nth-of-type(n) 同类型第n个子元素
    :nth-last-of-type(n) 同类型倒数第n个子元素
 */
/* .app ul li:nth-child(1){
    height: 45%;
} */
/* .app ul li:nth-child(2){
    width: 10%;
}
.app ul li:nth-child(3){
    width: 57%;
}
.app ul li:nth-child(4){
    width: 25%;
} */