后台管理系统的布局框架

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Junpaopao/article/details/78022532

1、HTML部分

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>后台管理系统的布局框架</title>
    <link rel="stylesheet" href="../css/test.css" type="text/css">
</head>
<body>
<div class="top"></div>
<div class="main">
    <div class="mainLeft"></div>
    <div class="mainContent">
        正文内容
    </div>
</div>
<div class="foot"></div>
</body>
</html>
2、less部分

html,body,p{
  margin: 0;
  padding: 0;
}
.top{
  width: 100%;
  position: fixed;
  top:0;
  z-index: 1;
  height:60px;
  background:darkred;
}
.main{
  .mainLeft{
    position: fixed;
    top:60px;
    left: 0;
    bottom: 0;
    background: #2a6496;
    width: 200px;
    z-index: 9;
  }
  .mainContent{
    margin-top:60px;
    padding-bottom: 100px;
    /*height: 120%;*/
    margin-left: 200px;
    background: #2aabd2;
  }
}
.foot{
  position:fixed;//页面内容不足屏幕高度时
  //position:relative;//页面内容高度大于屏幕高度时
  width: 100%;
  z-index: 1;
  bottom: 0;
  height: 100px;
  background: #3c3c3c;
}

展开阅读全文

没有更多推荐了,返回首页