app.css

/*

    块级标签 独占一行 不和其他元素待在同一行 能设置宽高：  div,p,h1-h6,ul,li,dl,dt,dd

    行内块标签 能和其他元素待在一行 能设置宽高：img,input,text area

    行级标签 能和其他元素待在同一行 不能设置宽高：  a，span,strong,u,em-->


    绝对定位的参考点默认是body  如果他的祖先元素也是定位流  则绝对定位的参考点是祖先元素

    固定定位和绝对定位都会脱离标准流  并且都不区分行内和块级   固定定位不随着网页滚动

    相对定位不脱离标准流 设置方向属性都是相对于自己来移动


    内边框 box-sizing: border-box; 不影响视图大小


    盒子嵌套中子元素设置margin-top会挪动父元素 此时需要给父元素设置边框来控制
    一般在盒子嵌套关系中给子元素设置边距和居中 首先应考虑在父元素设置padding
    其次考虑margin margin针对的是兄弟关系

    子元素在父元素水平居中一般用 margin: 0 auto
    文字 img元素在盒子里面水平居中用 text-align: center

    元素换行会一层层找兄弟元素 直到找到父元素 只要宽度够用就可以换行


     块级元素浮动后 他所在的行位置就是他之前标准流中的行位置

     浮动元素会把位置让给标准流元素 并覆盖标准流元素 但是浮动元素会挤开文字（左上角头像 其他位置显示文字）
     这样适合做图文混排


     900 + 900 +  400 + 800 +  1000 + 1000 +  1500  +

    5.5   +  4.5    +   10   =   20
    51       29         20

    5.5   +  2.5    +   14   =   22
    51       16         33

    5.5   +  2.5    +   10   =   18
    59       20         20

*/



/************************************************

 输入框默认文字字体设置

************************************************/


::-webkit-input-placeholder{
    color: #020D2D;
    opacity: 0.2;
}

:-moz-placeholder{
    color: #020D2D;
    opacity: 0.2;
}

::-moz-placeholder{
    color: #020D2D;
    opacity: 0.2;
}

:-ms-input-placeholder{
    color: #020D2D;
    opacity: 0.2;
}


/************************************************

设置网页的宽高等于设备宽高  #264091

************************************************/


*{
    margin: 0px;
    padding: 0px;
}


html{
    height: 100%;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}


body{
    height: 100%;
    width: 100%;
    background: white;
    font-family:'Open Sans', sans-serif;
}


/************************************************

屏幕宽度小于480  则宽度占整个屏幕的宽度  否则就显示480的宽度

************************************************/

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

    .window{
        width: 100%;
    }

    .window_nav{
        width: 100%;
    }

    .window_tabBar{
        width: 100%;
    }
}




/************************************************

 主视图渲染区

************************************************/


.window{
    width: 480px;
    height: 100%;
    background: white;
    margin: 0 auto;
    padding: 0px;
    position:  relative;

    box-sizing: border-box;
    border:1px solid rgb(245, 245, 245);
}



/************************************************

 导航栏部分

************************************************/


/* 导航栏 window_nav */
.window_nav{
    width: 480px;
    height: 64px;
    background: white;

    box-sizing: border-box;
    border-bottom:1px solid rgb(220, 220, 220);

    position: fixed;
    top: 0px;
    left: auto;
    z-index:100;

}


/* 导航栏标题 title */
.window_nav .title{
    line-height: 44px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #333333;

    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translate(-50%, 0px);
}


.window_nav button{
    background: white;
}



/************************************************

 导航栏左侧第一个按钮 left_btn1 cornsilk

************************************************/


/* 导航栏左侧第一个按钮 left_btn1   */
.window_nav .left_btn1{
    border: 0;
    width: 44px;
    height: 44px;

    position: absolute;
    bottom: 0px;
    left: 0px;
}


/* 左侧第一个按钮的图片 img */
.window_nav .left_btn1 img{
    width: 28px;
    height: 28px;
    margin: 8px auto;
}


/* 左侧第一个按钮的文字 span */
.window_nav .left_btn1 span{
    line-height: 44px;
    text-align: center;
    font-size: 14px;
    width: 44px;
    margin-top: auto;
}




/************************************************

 导航栏左侧第二个按钮 left_btn2  cornsilk

************************************************/

/* 导航栏左侧第二个按钮 left_btn2   */
.window_nav .left_btn2{
    border: 0;
    width: 40px;
    height: 44px;

    position: absolute;
    bottom: 0px;
    left: 40px;
}


/* 左侧第二个按钮的图片 img */
.window_nav .left_btn2 img{
    width: 28px;
    height: 28px;
    margin: 8px auto;

}


/* 左侧第二个按钮的文字 span */
.window_nav .left_btn2 span{
    line-height: 44px;
    text-align: center;
    font-size: 14px;
    width: 40px;
    margin-top: auto;
    margin-left: 5px;
}




/************************************************

 导航栏右侧第一个按钮 right_btn1  cornsilk

************************************************/

/* 导航栏右侧第一个按钮 right_btn1   */
.window_nav .right_btn1{
    border: 0;
    width: 44px;
    height: 44px;

    position: absolute;
    bottom: 0px;
    right: 0px;
    outline: none;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}


/* 右侧第一个按钮的图片 img */
.window_nav .right_btn1 img{
    width: 26px;
    height: 26px;
    margin: 8px auto;

}


/* 右侧第一个按钮的文字 span */
.window_nav .right_btn1 span{
    line-height: 44px;
    text-align: left;
    font-size: 14px;
    width: 40px;
    margin-top: auto;
    margin-left: 0px;
    color: black;
    outline: none;
}




/************************************************

 导航栏右侧第二个按钮 right_btn2  cornsilk

************************************************/

/* 导航栏右侧第二个按钮 right_btn2   */
.window_nav .right_btn2{
    border: 0;
    width: 44px;
    height: 44px;

    position: absolute;
    bottom: 0px;
    right: 40px;
}


/* 右侧第二个按钮的图片 img */
.window_nav .right_btn2 img{
    width: 28px;
    height: 28px;
    margin: 8px auto;

}


/* 右侧第二个按钮的文字 span */
.window_nav .right_btn2 span{
    line-height: 44px;
    text-align: left;
    font-size: 14px;
    width: 40px;
    margin-top: auto;
    margin-left: 0px;
    color: black;
}


/************************************************

 标签栏部分 cornsilk

************************************************/

.window_tabBar{
    width: 480px;
    height: 49px;
    background: white;
    position: fixed;
    bottom: 0px;
    left: auto;
    z-index:101;
    box-sizing: border-box;
    border-top:1px solid rgb(220, 220, 220);
}



.window_tabBar ul{
    list-style: none;

    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    display:flex;

}


.window_tabBar ul li{
    flex: 1;
    float: left;
    margin: 1px;
    height: 100%;
    text-align: center;
    color: #20D3B3;
    font-size: 10px;
}


.window_tabBar ul li img{
    width: 24px;
    height: 24px;
    margin: 3px auto;
}

.window_tabBar ul li .center{
    width: 36px;
    height: 36px;
    margin: 5px auto;
}


.window_tabBar ul li span{
    float: left;
    width: 100%;
    height: 15px;
    margin: -3px auto;
    color: #999999;
}


.window_tabBar ul li .selected{
    list-style: none;
    color: #264091;
}