后台管理----首页布局分析1
1.常见的后台管理布局如下
2.使用elementPlus 组件库的 container 组件进行布局
3. 代码展示
相关代码的样式
.main {position: fixed;top: 0;left: 0;width: 100%;height: 100%;
}.main-content{height: calc(100% - 48px);
}
.el-aside {background-color: #001529;overflow-x: hidden;overflow-y: auto;color: #333;text-align: center;line-height: 200px;text-align: left;cursor: pointer;
}
.main-content,.page{height: 100%;
}
.el-header,
.el-footer {display: flex;color: #333;text-align: center;align-items: center;
}
.el-header {height: 48px !important;
}
.el-main {background-color: #e9eef3;color: #333;text-align: center;
}最终效果如下：
后台管理----首页布局分析1相关推荐
- 后台管理页面布局（左侧导航长度根据右侧内容无限延伸）
2019独角兽企业重金招聘Python工程师标准>>> 如图为标准后台管理页面布局,左侧导航布局一般是设置高度100%来适应所有尺寸的显示器打开的浏览器高度. 但是这种布局会 ...
- layui后台管理首页配置
layui后台管理首页配置 项目SSM整合,参考我之前的笔记视频 layui后台管理首页配置 导入layui index.html <div class="layui-side lay ...
- Web前端第二季(CSS):十:第5章:案例开发:505-SiKi学院首页布局分析+506-开发右侧学习中心链接样式+507-切分SiKi学院的布局+508-开发SiKi学院的导航按钮
目录 一.目的 1.想:学习前端知识 2.想:记录笔记,下次不用看视频,直接看笔记就可以快速回忆. 二.参考 1.我自己代码的GitHub网址 1.SIKI学院:我参考此视频实操 1.w3school ...
- Web之后台管理页面布局
1.页面布局 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF ...
- 小码哥-玩转【斗鱼直播APP】系列之首页布局分析实现
本帖最后由 王红元老师 于 2016-9-14 21:25 编辑 布局首页分析实现 完成最终效果 这个效果还是挺常见的哈 效果分析: 顶部是一个工具类,并且为了该工具类可以复用.(其他界面也用到)最好 ...
- 前端入门之——后台管理页面布局 学习 day10
1.滚动滑轮事件监听 2.内容到窗口的距离 3.position:absolute 定位置:右下角 滚动:不固定 ===========================后天管理页面的布局======= ...
- 后台管理页面布局、web页面布局
做一个简单的页面布局 演示地址:https://genin.gitee.io/web-demo/web-layout.html 基本结构如下 <body> <!-- svg图标 -- ...
- web后台管理页面布局
1.上层标签块: 2.左侧菜单块: 3.中部内容显示块: 需求:要求上层标签块.左侧菜单快固定不动,滚动条只对中部显示块作用: <div class="all" style ...
- 页面布局 - 后台管理页面布局
需要制作出如下图片的效果 : <!DOCTYPE html><html lang="en"><head> <meta charset=&q ...
最新文章
- android使用webview上传文件,Android项目中如何在webview页面中上传文件
- 合种樟子松、云杉和胡杨
- 【Visual Studio 扩展工具】使用 ComponentOne迷你图控件，进行可视化数据趋势分析...
- 01 java 编程基础
- go get报错：unrecognized import path “golang.org/x/net/context”…
- go设置后端启动_为什么 Rubyists 应该考虑学习 Go
- linux跟踪内存块,在Linux程序中跟踪活动使用的内存
- 前台等待事件 oracle,Oracle等待事件之buffer busy waits
- SQLi LABS Less-31
- Vegas导入PSD格式文件（素材）的方法
- feign调用https接口_SpringCloudFeign远程调用
- 苹果个人开发者账号如何升级成公司账号
- 斐讯k2路由器刷固件一条龙——从小白到大神
- 微前端 Micro-Frontnds - Single-SPA Application API
- python import文件后 core dumped_python numpy包调用core dumped、Linux VDSO机制
- 数组12:激光与巧克力
- 预测和评价----学习反馈
- selenium抓取斗鱼直播平台数据
- 判断字符串是否为回文串
- 需求与商业模式创新-需求6-涉众分析与硬采样