- 頁面效果圖  - 頁面結構代碼 ~~~html <header class="header">header</header> <div class="main"> <div class="main-content">content</div> <div class="main-sidebar">sidebar</div> </div> <footer class="tabbar-container"> <ul class="tabbar"> <li class="tabbar-item tabbar-item-active"> <a href="###" class="tabbar-link"> <i class="iconfont icon-home"></i> <span>首頁</span> </a> </li> <li class="tabbar-item"> <a href="###" class="tabbar-link"> <i class="iconfont icon-category"></i> <span>分類頁</span> </a> </li> <li class="tabbar-item"> <a href="###" class="tabbar-link"> <i class="iconfont icon-cart"></i> <span>購物車</span> </a> </li> <li class="tabbar-item"> <a href="###" class="tabbar-link"> <i class="iconfont icon-personal"></i> <span>個人中心</span> </a> </li> </ul> </footer> ~~~ - 頁面樣式代碼 ~~~css * { box-sizing: border-box; padding: 0; margin: 0; } body { background-color: #e2e2e2; color: #595B66; } a { font-size: 12px; color: #686868; text-decoration: none; } li { list-style: none; } html { height: 100%; } body { display: flex; flex-direction: column; min-height: 100%; } .header { width: 100%; height: 50px; background-color: rgba(222, 24, 27, 0.9); color: #fff; display: flex; justify-content: center; align-items: center; } .main { flex: 1; color: #fff; display: flex; } .main-content { flex: 1; background-color: green; display: flex; justify-content: center; align-items: center; } .main-sidebar { order: -1; width: 150px; background-color: pink; display: flex; justify-content: center; align-items: center; } .tabbar-container { width: 100%; height: 50px; background-color: #fff; } .tabbar { display: flex; height: 100%; } .tabbar-item { flex: 1; } .tabbar-link { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; } .tabbar-link .iconfont { font-size: 24px; } .tabbar-item-active .tabbar-link { color: #de181b; } ~~~