後臺管理頁面基本佈局方式
阿新 • • 發佈:2019-01-08
經典頁面佈局
簡易後臺管理頁面佈局
- 1 左邊選單欄固定
- 2 header固定高度(寬度自適應)
- 3 主體統計列表(寬度自適應)
程式碼如下
html
<div class="main">
<header class="header">頭部</header>
<div class="leftMenu">左邊選單欄</div>
<div class="mainContent">主體</div>
</div>
css
.main{ position: absolute; top:0; left:0; right:0; bottom:0; } .header{ position:absolute; left:200px; top:0; right:0; background-color: #eeffcd; height: 80px; } .leftMenu{ position: fixed; left:0; top:0; bottom:0; background-color: #d43eff; width:200px; height:100%; overflow: hidden; } .mainContent{ position: absolute; left:200px; top:80px; bottom:0; background-color: #37ff42; right:0; }
結果如下圖
二、簡易後臺管理頁面佈局
- 1 左邊選單欄固定
- 2 header固定高度(寬度自適應)
- 3 主體統計列表(寬度自適應)
- 4.右邊選單欄固定
程式碼如下
html
<div class="main"> <header class="header">頭部</header> <div class="leftMenu">左邊選單欄</div> <div class="mainContent">主體</div> <div class="rightmenu">右邊選單</div> </div>
css
.main{ position: absolute; top:0; left:0; right:0; bottom:0; } .header{ position:absolute; left:200px; top:0; right:0; background-color: #eeffcd; height: 80px; } .leftMenu{ position: fixed; left:0; top:0; bottom:0; background-color: #d43eff; width:200px; height:100%; overflow: hidden; } .mainContent{ position: absolute; left:200px; top:80px; right:150px; bottom:0; background-color: #37ff42; } .rightmenu{ width:150px; background-color: red; position: fixed; right: 0; bottom:0; top: 80px; }