flex实现圣杯布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;padding:0;
}
.container{
display: flex;
height: 100vh;
flex-direction: column;
}
header{
background: #000;
}
section{
flex:1;
background: pink;
display: flex;
}
footer{
background: #000;
}
.left{
background: red;
flex:0 0 100px;
}
.center{
flex:1;
background: blue;
}
.right{
flex:0 0 100px;
background: red;
}
</style>
</head>
<body> <div class='container'> <header>头部</header>
<section>
<div class='left'>左</div>
<div class='center'>中</div>
<div class='right'>右</div>
</section>
<footer>底部</footer> </div> </body>
</html>
flex实现圣杯布局的更多相关文章
- flex的圣杯布局记录 （flex : 0 0 80px）
- CSS布局-圣杯布局
圣杯布局 圣杯布局很完美(兼容所有浏览器,包括IE6),但是使用了相对定位,布局有局限性,宽度控制要改的地方也多. 第一种方法公用部分: .lgyz, .lzrg, .lrzcg, .lcgrz, . ...
- flex 圣杯布局
基本思路 圣杯布局分为3段:上.中.下. 中段被分为:左.中.右3块. 1:采用flex布局时,先把弹性容器主轴设置为垂直方向(flex-direction:column) 2:上.中.下3块弹性项 ...
- flex做的圣杯布局
now,给大家分享一个用flex写的圣杯布局,大家可以参考一下子 首先圣杯布局是两列固定宽度,中间自适应. 我直接说一下步骤,上图,上图 1.步骤1 2.步骤2 上面就是基本的步骤,下面我把代码给大家 ...
- 【CSS-flex】圣杯布局（Holy Grail Layout）、输入框的布局、悬挂式布局、固定的底栏
1.圣杯布局(Holy Grail Layout) 其指的是一种最常见的网站布局.页面从上到下,分成三个部分:头部(header),躯干(body),尾部(footer).其中躯干又水平分成三栏,从左 ...
- vue-cli中圣杯布局失效问题
众所周知vue2在前端框架越来越流行,vue-cli这个脚手架工具是我们前端开发必用的,大大的提升了我们的开发效率.当然对于前端小白来说,有些遇到的问题需要和大家分享一下. 移动端页面经常都是需要圣杯 ...
- css布局 -双飞翼布局&圣杯布局
一,双飞翼布局 左右两边固定,中间可以随着浏览器放大和缩小 <!DOCTYPE html> <html lang="en"> <head> &l ...
- css——圣杯布局
圣杯布局要求 header和footer各自占领屏幕所有宽度,高度固定 中间dontainer部分为左中右三栏式布局 三栏布局中左右两侧宽度固定,中间部分自动填充 实现方式 1.浮动 先定义heade ...
- css两栏布局、圣杯布局、双飞翼布局
最近几个月一直用vue在写手机端的项目,主要写业务逻辑,在js方面投入的时间和精力也比较多.这两天写页面明显感觉css布局方面的知识有不足,所以复习一下布局方法. 两栏布局 1.浮动 .box1 .l ...
- CSS布局 -- 圣杯布局 & 双飞翼布局
按照我的理解,其实圣杯布局跟双飞翼布局的实现,目的都是左右两栏固定宽度,中间部分自适应. 但在这里实现起来还是有一些区别的 [圣杯布局] 在这里,实现了左(200px) 右(220px) 宽度固定,中 ...
随机推荐
- JavaWeb4
1. Filter 1.1 概述 Filter:过滤器 Servlet.Filter和Listener称为Web的三大组件 生活中的过滤器:净水器.空气净化器.土匪 web中的过滤器:当访问服务器的资 ...
- jmeter接口自动化-通过csv文件读取用例并执行测试
最近在公司测试中经常使用jmeter这个工具进行接口自动化,简单记录下~ 一.在csv文件中编写好用例 首先在csv文件首行填写相关参数(可根据具体情况而定)并编写测试用例.脚本可通过优先级参数控制执 ...
- 第2-1-5章 docker安装MinIO实现文件存储服务-springboot整合minio-minio全网最全的资料
目录 1. MinIO介绍 2. MinIO应用场景 2.1 单主机单硬盘模式 2.2 单主机多硬盘模式 2.3 多主机多硬盘分布式 3. MinIO特点 4. 存储机制 5. docker安装Min ...
- wiki搭建详细过程及步骤
wiki搭建详细过程及步骤 1.查看yum库中jdk的版本 2.选择java-1.8.0安装 3.配置环境变量 4.环境变量生效 5.查看jdk是否安装成功 6.启动mysql服务 7.下载confl ...
- 为什么Linux需要虚拟内存 [转载好文]
操作系统中的 CPU 和主内存(Main memory)都是稀缺资源,所有运行在当前操作系统的进程会共享系统中的 CPU 和内存资源,操作系统会使用 CPU 调度器分配 CPU 时间1并引入虚拟内存系 ...
- .NET 6 实现滑动验证码（二）、基本数据
上一节,介绍了滑动验证码的基本情况,也创建了一个.NET 6的工程.本节内容是创建一些基础类. 目录 CaptchaData.cs CaptchaValidateData.cs ImageCaptch ...
- day14 I/O流——序列化与反序列化 & 计算机网络五层架构 & TCP的建立连接与断开连接
day 14 序列化与反序列化 序列化 将对象转化成特定格式的字符串文件(字节文件)叫做序列化 1.一个类要想实现序列化,必须实现serializable接口 2.序列化用途 1)把对象的字节序列 ...
- windows简单使用Jenkins遇到的一些坑
简言: 闲来没事干,最近身边的小伙伴都在谈论CI/CD.自动化等等,耳朵都磨出茧了.这不闲着研究下jenkins.下面将自己遇到的一些坑分享出来. 首先介绍下Jenkins.Jenkins 是一个基于 ...
- 一文聊透Apache Hudi的索引设计与应用
Hudi索引在数据读和写的过程中都有应用.读的过程主要是查询引擎利用MetaDataTable使用索引进行Data Skipping以提高查找速度;写的过程主要应用在upsert写上,即利用索引查找该 ...
- 论文解读丨【CVPR 2022】不使用人工标注提升文字识别器性能
摘要:本文提出了一种针对文字识别的半监督方法.区别于常见的半监督方法,本文的针对文字识别这类序列识别问题做出了特定的设计. 本文分享自华为云社区<[CVPR 2022] 不使用人工标注提升文字识 ...