【CSS-flex】圣杯布局(Holy Grail Layout)、输入框的布局、悬挂式布局、固定的底栏
1、圣杯布局(Holy Grail Layout)
其指的是一种最常见的网站布局。页面从上到下,分成三个部分:头部(header),躯干(body),尾部(footer)。其中躯干又水平分成三栏,从左到右为:导航、主栏、副栏。
2、输入框布局
3、悬挂布局
4、固定的底栏
有时,页面内容太少,无法占满一屏的高度,底栏就会抬高到页面的中间。这时可以采用Flex布局,让底栏总是出现在页面的底部。
vh单位:vh
等于viewport高度的1/100
.例如,如果浏览器的高是900px
,1vh
求得的值为9px
。同理,如果显示窗口宽度为750px
,1vw
求得的值为7.5px
。
代码及详解参考:http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
【CSS-flex】圣杯布局(Holy Grail Layout)、输入框的布局、悬挂式布局、固定的底栏的更多相关文章
- Bootstrap页面布局16 - BS导航菜单和其响应式布局以及导航中的下拉菜单
代码: <div class='container-fluid'> <h2 class='page-header'>导航</h2> <!-- .navrbar ...
- 轻轻松松学CSS:Flex布局
Flex布局就是"弹性布局",它可以简便.完整.响应式地实现各种页面布局.引入弹性布局的目的,当页面需要适应不同的屏幕大小确保元素拥有恰当的布局方式,对一个容器中的子元素进行排列 ...
- Android 布局学习之——Layout(布局)具体解释二(常见布局和布局參数)
[Android布局学习系列] 1.Android 布局学习之--Layout(布局)具体解释一 2.Android 布局学习之--Layout(布局)具体解释二(常见布局和布局參数) ...
- Android 布局学习之——Layout(布局)详解二(常见布局和布局参数)
[Android布局学习系列] 1.Android 布局学习之——Layout(布局)详解一 2.Android 布局学习之——Layout(布局)详解二(常见布局和布局参数) 3.And ...
- CSS响应式布局到底是什么?
响应式布局是最近几年在前端开发中非常火热的词,它是相对于固定像素大小的网页而言的,那么CSS响应式布局到底是什么?顾名思义,响应式布局就是网页能够响应各种各样不同分辨率大小的设备,能够将网页很好的呈献 ...
- Android 自定义View修炼-Android中常见的热门标签的流式布局的实现
一.概述:在日常的app使用中,我们会在android 的app中看见 热门标签等自动换行的流式布局,今天,我们就来看看如何 自定义一个类似热门标签那样的流式布局吧(源码下载在下面最后给出哈) 类似的 ...
- 前端框架bootstrap(响应式布局)入门
Bootstrap,是基于HTML,CSS.javascript的前端框架 该框架已经预定义了一套CSS样式和与样式相对应的js代码(对应的样式有对应的特效.) 开发人员只需要编写HTML结构,添加b ...
- web前端学习(二)html学习笔记部分(9)-- 响应式布局
1.2.23 响应式布局基础 1.2.23.1 响应式布局介绍 1.响应式布局是2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多终端 -- 而不是为每个终端做一个特定的版本.这个概 ...
- 【Win10开发】响应式布局——AdaptiveTrigger
接触过Windows10的童鞋已经知道Universal app不仅可以运行在pc上,还可以运行在mobile或者其他平台上.那么这样势必会带来一个问题,如何针对不同屏幕来进行布局适配.所以微软提供了 ...
随机推荐
- SecureCRT远程连接Linux下的sqlplus中退格键不能使用之解决方法
^H不是H键的意思,是backspace 主要是当你的终端backspace有问题的时候才需要设置 在linux环境下使用sqlplus,在回删(backspace)时往往会出现 一串的乱码.出现 ...
- python安装后无法用cmd命令pip 装包
出现问题: 原因:没有添加环境变量. 解决方法:将python安装目录下的Script目录添加进环境变量,其中有pip.exe,在cmd中输入pip install命令时要运行pip.exe. win ...
- luogu P2801 教主的魔法
题目描述 教主最近学会了一种神奇的魔法,能够使人长高.于是他准备演示给XMYZ信息组每个英雄看.于是N个英雄们又一次聚集在了一起,这次他们排成了一列,被编号为1.2.…….N. 每个人的身高一开始都是 ...
- JavaScript如何比较两个数组的内容是否相同【转】
比较2个数组是否相等的. 不能像字符样 简单的用 == === 比较 ([]==[]); // false ([]===[]); // false 都是false -------------- ...
- IPtables中SNAT和MASQUERADE的区别
问题 iptables中snat和MASQUERADE的区别 解决方案 iptables中可以灵活的做各种网络地址转换(NAT) 网络地址转换主要有两种:snat和DNAT snat是source n ...
- Search Insert Position 查找给定元素在数组中的位置,若没有则返回应该在的位置
Given a sorted array and a target value, return the index if the target is found. If not, return the ...
- 小程序-报错 xxx is not defined (已解决)
小程序-报错 xxx is not defined (已解决) 问题情境: 这样一段代码,微信的小程序报错 is not defined 我 wxml 想这样调用 //wxml 代码 <view ...
- leetcode Ch6-Data Structure
1. Sliding Window Maximum class Solution { public: vector<int> maxSlidingWindow(vector<int& ...
- 关于webWorker的理解和简单例子
一.理解 当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成. web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能.您可以继续做任何愿 ...
- 安装Xcode主题
安装Xcode主题 下载地址 https://github.com/YouXianMing/Xcode-Themes 安装教程 1. 安装文件夹中的字体 2. 如下图,执行 ./cp_themes.s ...