html+css实现一个响应式管理平台架构模板

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

文本将会带你使用html+css实现一个响应式的管理平台架构模板目前来说市面上的管理平台架构模板大同小异文本的知识点都会符合场景所需。

1、管理平台的架构内容

1、管理平台的架构内容

管理平台的架构内容一般包含顶部用来布局Logo广告语右侧用于布局登录信息如头像用户名等可能还会有一个下拉小三角用于展示用于的一些快捷入口

然后是左侧用于布局一级和二级菜单有一部分平台会有三级菜单

然后是右侧主体部分在采用vue react技术栈之前大家采用jquery技术栈比较多那个时候左侧的菜单点击后会触发所属链接然后右侧的主体部分是一个隐藏边框的iframe。当点击左侧菜单便把链接赋值给iframe容器产生不同的页面而现在使用了v / r 技术栈呢左侧点击菜单调用了不同的路由而路由的指向就是当前所需展示的组件。

2、顶部的布局

顶部一般设置height为60px设定一个蓝色背景并且当网页滚动的时候顶部是吸到浏览器顶部的不会随着纵向滚动条而滚动代码如下

<div class="top">顶部区域</div>

.top {
   position: fixed;
   width: 100%;
   height: 60px;
   background: #0269b7;
}

3、下半部分布局

下半部分的特点是距离顶部正好60px但为了自适应高度通过calc计算实现当前浏览器高度减去顶部的60px高度

为了满足左右布局的场景之前是采用float布局方式但容易造成的问题是一旦右侧宽度超出可能会使左右2个div纵向布局不易管理实现代码如下

<div class="body-box"></div>

.body-box {
   position: absolute;
   margin-top: 60px;
   width: 100%;
   height: calc(100vh - 60px);
   background: #AAA;
   display: flex;
}

4、左侧菜单区域实现

左侧菜单区域可以设定一个宽度200px不过有些UI组件会使左侧可以拉伸或者实现隐藏而高度为了达到自适应目的可以设定100%满足body-box的高度填满代码如下

<div class="left-nav">菜单区域</div>

.left-nav {
   width: 200px;
   height: 100%;
   background: yellow;
}

5、右侧主体区域实现

右侧主体区域的实现特点是高度自适应父容器高度宽度自适应与浏览器宽度减去200再减去一个边距并且管理系统一定会遇到高度超出的情况所以给此区域设定overflow-y: auto的属性值代码如下

<div class="right-content">
主体<br/>主体<br/>主体<br/>主体<br/>
主体<br/>主体<br/>主体<br/>主体<br/>
主体<br/>主体<br/>主体<br/>主体<br/>
主体<br/>主体<br/>主体<br/>主体<br/>
主体<br/>主体<br/>主体<br/>主体<br/>
主体<br/>主体<br/>主体<br/>主体<br/>
主体<br/>主体<br/>主体<br/>主体<br/>
区域</div>

.right-content {
   width: calc(100vw - 200px - 20px);
   height: 100%;
   margin-left: 20px;
   background: #FFF;
   overflow-y: auto;
}

6、calc属性注意项

calc是css的一项非常大的进步创新项证明css已经可以做一些简单的计算了而通过sass等css辅助甚至可以在css中做一些稍微复杂的计算。我一直畅享某一天css能发ajax了然后再通过一些DOM操作优化妥妥的将什么V/R全部颠覆了。

而calc有个注意项就是括号内的计算符号左右一定要有空格不带空格就不起作用例如 calc(x - y)而不是calc(x-y)

7、完整源代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>管理平台架构</title>
        <style>
            html, body, * {
                margin: 0;
                padding: 0;
            }
            body {
                overflow-y: hidden;
            }
            .top {
                position: fixed;
                width: 100%;
                height: 60px;
                background: #0269b7;
            }
            .body-box {
                position: absolute;
                margin-top: 60px;
                width: 100%;
                height: calc(100vh - 60px);
                background: #AAA;
                display: flex;
            }
            .left-nav {
                width: 200px;
                height: 100%;
                background: yellow;
            }
            .right-content {
                width: calc(100vw - 200px - 20px);
                height: 100%;
                margin-left: 20px;
                background: #FFF;
                overflow-y: auto;
            }
        </style>
    </head>     
    <body>
        <div class="top">顶部区域</div>
        <div class="body-box">
            <div class="left-nav">菜单区域</div>
            <div class="right-content">
                主体<br/>主体<br/>主体<br/>主体<br/>
                主体<br/>主体<br/>主体<br/>主体<br/>
                主体<br/>主体<br/>主体<br/>主体<br/>
                主体<br/>主体<br/>主体<br/>主体<br/>
                主体<br/>主体<br/>主体<br/>主体<br/>
                区域</div>
        </div>
    </body>
</html>

实现结果如图