后台管理系统的布局框架

最新推荐文章于 2024-07-23 19:14:21 发布

泡泡菌

最新推荐文章于 2024-07-23 19:14:21 发布

阅读量7.6k

点赞数

分类专栏： CSS 文章标签： CSS 布局框架

本文链接：https://blog.csdn.net/Junpaopao/article/details/78022532

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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;
}

泡泡菌

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
后台管理系统的布局框架

1、HTML部分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"
复制链接

扫一扫

专栏目录