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:; 控制整个网格在父元素里面的对齐方式.