week5 day4 移动端案例，以及网格布局

week5 day4 移动端案例，以及网格布局

移动端案例

今日从网上找到一个案例来做，效果如图

代码实现

@charset "utf-8";
html,body{
    height:100%;
}
#app{
    width:100%;
    height:100%;
}
/*toubu*/
header{
    width:100%;
    height:.88rem;
    background:linear-gradient(to right,#ed7261,#d9362e);
    position:fixed;
    top:0;
    padding:0 .3rem;
    display:flex;
    justify-content: space-between;
    align-items: center;
}
header h2{
    font-size:.26rem;
    color:#fff;
    display:flex;
    align-items: center;
}
header h2 .iconfont{
    font-size:.46rem;
}
header div{
    width:4.62rem;
    height:.72rem;
    background:#f5f5f5;
    border:1px solid #e6e6e6;
    border-radius: 0.1rem;
    padding:0 .28rem;
    display:flex;
    align-items: center;
}
header div .iconfont{
    margin-right:.26rem;
    font-size:.4rem;
    color:#999;
}
header div span{
    font-size:.24rem;
    color:#d7d7d7
}
header .info_btn{
    font-size:.42rem;
    color:#fff;
}
/*main*/
main{
    width:100%;
    height:100%;
    padding:.88rem 0 .9rem;
}
section{
    width:100%;
    height:100%;
    /* 产生滚动条 */
    overflow-y:auto;
}
/*收付款*/
.shoufukuan{
    width:100%;
    height:2.22rem;
    background:linear-gradient(to right,#ed7261,#d9362e);
    padding:0 .61rem;
    display:flex;
    justify-content: space-between;
}
.shoufukuan li{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.shoufukuan li span{
    width:.86rem;
    height:.86rem;
    background:#fff;
    border-radius: 100%;
    text-align: center;
    line-height: .86rem;
}
.shoufukuan li span .iconfont{
    font-size:.38rem;
    font-weight:bolder;
    color:#d9362e;
}
.shoufukuan li em{
    font-size:.26rem;
    margin-top:.24rem;
    color:#fff;
}
/*坐公交到更多*/
nav{
    padding-top:.3rem;
}
nav .daohang{
    display:flex;
}
nav .daohang li{
    flex:1;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom:.38rem;
}
nav .daohang li span{
    width:.84rem;
    height:.84rem;
    background:#fdf3f3;
    border-radius: 50%;
    text-align: center;
    line-height:.84rem;
    position: relative;
}
nav .daohang li span strong{
    display:block;
    width:.84rem;
    height:.24rem;
    background:#d14954;
    border-radius: .1rem;
    text-align: center;
    line-height:.24rem;
    color:#fff;
    font-size:.14rem;
    position: absolute;
    bottom: -0.11rem;
}
nav .daohang li span i{
    font-size:.4rem;
    color:#ed867a;
}
nav .daohang li em{
    font-size:.22rem;
    color:#333;
    margin-top:.18rem;
    line-height:.22rem;
}
/*lunbotu*/
.lunbotu{
    width:6.77rem;
    height:2.01rem;
    margin:0 auto;
}
.lunbotu img{
    width:100%;
    height:100%;
}
/*热门推荐*/
.tuijian{
    padding:0 .35rem;
    margin-top:.47rem;
}
.tuijian h2{
    font-size:.28rem;
    color:#333;
    line-height:.28rem;
}
.case{
    margin-top:.22rem;
}
.case figure{
    width:50%;
    display:flex;
    margin-bottom:.24rem;
}
.case figure img{
    width:.96rem;
    height:.96rem;
    margin-right:.2rem;
}
.case figcaption{
    display:flex;
    flex-direction: column;
    justify-content: center;
}
.case figcaption h4{
    font-size:.24rem;
    color:#333;
    line-height:.24rem;
}
.case figcaption span{
    font-size:.2rem;
    line-height:.2rem;
    color:#666;
    margin-top:.1rem;
}
.case{
    display:flex;
    flex-wrap: wrap;
}
/*footer*/
footer{
    width: 100%;
    height: .99rem;
    position: fixed;
    bottom: 0;
    padding-left: .69rem;
    padding-right: .69rem;

}
.foot{
    display: flex;
    justify-content:space-between;
    align-items: center;
}

.foot li{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: .16rem;
}
.foot li span{
    width: .38rem;
    height: .38rem;
    background: white;
    text-align: center;
    line-height: .38rem;
}
.foot li span .iconfont{
    font-size: .38rem;
    font-weight: bolder;
    color: #999;
}
.foot li em{
    font-size: .21rem;
    margin-top: .17rem;
    color: #999;
}

网格布局

grid布局 针对的是子元素布局。
1：形成一个网格结构(父元素添加)：
display:grid;

2: 划分行和列
grid-template-columns:
grid-template-rows:

如果是3个值 代表3行或3列 能接受具体的px 也能是百分比

划分行和列的时候的关键字 和 方法:

a: repeat(重复的次数,重复的值)

b: auto-fill关键字( 自动填充 )

c: fr关键字(列宽片段)

d: minmax(最小值,最大值)

3: grid-gap:20px 30px; 简写形式

4: 指定某个项目所在的区域:
grid-template-areas:
‘a a a’
‘. . b’
‘. c c’;

注: grid-template-areas 必须和 grid-area共同使用
grid-area放在具体某个项目里面的,指定项目名称.

5:指定顺序:
grid-auto-flow:row/column

6: 内容在项目里面的对齐方式:
place-items:

注: 网格内部的内容固定的大小 百分比的时候 左右的对齐方式会产生BUG

7: place-content:; 控制整个网格在父元素里面的对齐方式.