頁面佈局
實現方法:
1.文本說明
先給body和html設置 winth : 100%; height : 100%; 屬性，再給大盒子all設置 display : flex; 屬性和 flex-direction : column;屬性，子盒子nav和footer設置固定高度。main盒子設置flex:1屬性。
2.代碼實現
html,body{
width:100%;
height:100%
}
#all{
display:flex;
flex-direction:column;
}
#nav,#footer{
width:100%;
height:70px;
}
#main{
width:100%;
flex:1;
}
相關動畫屬性：
animation：動畫名稱 動畫所需時間 動畫播放方式 動畫開始時間 循環次數 播放方向 播放狀態 動畫時間外屬性
animation-name:動畫名稱-----聲明的動畫名稱
animation-duration:動畫所需時間---完成0%-100%動畫所需時間
animation-timing-function:動畫播放方式 ----同過渡
step-start 馬上跳到動畫每一結束楨的狀態
animation-delay:等待動畫的時間
animation-iteration-count:循環次數----默認為1，infinite循環播放
animation-direction:播放方向----默認normal，向前播放；alternate，播放次數為偶數則向前播放，為奇數時向反方向播放；
animation-play-state:播放狀態-----running播放和pause暫停
animation-fill-mode:動畫時間外屬性----forwards動畫結束後保持最後狀態；backforwards會向元素應用動畫樣式時迅速應用動畫初始值。
關鍵幀聲明動畫@keyframes:
@keyframes name{
from{
css樣式；
}
percentage{
css樣式；
}
to{
css樣式；
}
}
@keyframes name{
0%{
css樣式；
}
percentage{
css樣式；
}
100%{
css樣式；
}
}
調用@keyframes聲明的動畫：
animation:run 1s infinite alternate forwards;
閱讀更多 千鋒H5 的文章
