前端笔记-CSS布局使得网页分成3部（头，内容，脚）

css代码如下：

<style>* {margin: 0;padding: 0;}.top {width: 100%;height: 40px;background-color: #2fa8ec;font-size: 20px;line-height: 25px;}.middle {position: absolute;top: 0px;bottom: 40px;width: 100%;/*background-color: yellow;*/font-size: 35px;/*text-align: center;*/}.bottom {position: absolute;bottom: 0;width: 100%;height: 40px;line-height: 40px; /*行高与高度相等，内容垂直居中*//*background-color: chartreuse;*/text-align: center;}
</style>

应用代码如下：

<template>
<div><div class="middle"><div class="ui container"><div class="ui stackable grid"><div class="six wide column"><xxxxxxxx></xxxxxxxx></div><div class="six wide column"><xxxxxxxx></xxxxxxxx></div><div class="four wide column"><xxxxxxxx></xxxxxxxx></div></div></div></div><div class="bottom"><MainFunctionTool></MainFunctionTool></div>
</div>
</template>

运行截图如下：

前端笔记-CSS布局使得网页分成3部（头，内容，脚）相关推荐

Pink老师前端笔记-CSS第七天
Pink老师前端笔记-CSS第六天 # day09-前端基础CSS第七天学习目标: 能够使用精灵图能够使用字体图标能够写出 CSS 三角能够写出常见的 CSS 用户界面样式 ...
Pink老师前端笔记-CSS第六天
Pink老师前端笔记-CSS第六天 # day08-前端基础CSS第六天今日目标能够说出为什么要用定位能够说出定位的 4 种分类能够说出 4 种定位各自的特点能够说出为什么常用子绝父相 ...
[前端笔记——CSS] 12.处理不同方向文本
[前端笔记--CSS] 12.处理不同方向文本 1.书写模式 2.书写模式.块级布局和内敛布局 3.逻辑属性和逻辑值 1.书写模式 CSS 中的书写模式是指文本的排列方向是横向还是纵向的.writin ...
[前端笔记——CSS] 10.层叠与继承+选择器
[前端笔记--CSS] 10.层叠与继承+选择器 1.层叠与继承 1.1 冲突规则 1.2 继承 1.3 层叠 1.4 CSS位置的影响 2.选择器 2.1 选择器是什么? 2.2 选择器列表 2.3 ...
python制作网页样式与布局_python之路_前端之CSS布局1
CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力.CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化. ...
前端基础——CSS布局
前端基础学习第三天文章目录前端基础学习第三天一.CSS布局 1.margin(外边距) 2.padding(内边距) 3.position 4.float 二.布局实例 1.浮动布局 2.弹性布 ...
前端学习——CSS布局
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.正常布局流 `display`属性弹性盒子(Flexbox) Grid布局浮动定位技术前言提示:这里可以 ...
CSS布局模型/网页布局基础
CSS布局模型清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又 ...
前端基础——CSS 选择器、网页美化
什么是CSS Cascading Style Sheet 层叠级联样式表 CSS:表现和美化网页字体,颜色,边距,高度,宽度, 背景图片,网页定位,网页浮动发展史: CSS1.0 CSS2.0: ...

前端笔记-CSS布局使得网页分成3部（头，内容，脚）

前端笔记-CSS布局使得网页分成3部（头，内容，脚）相关推荐

最新文章

热门文章