html的布局demo
header section footer 都是水平,垂直居中,文本内容居中
section的高度是根据文本内容自适应的,footer会一直在最下面
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body,p{
margin: 0;
}
p {
width: 1000px;
margin: 0 auto;/**容器水平居中**/
text-align: center;/**容器里面文本居中**/
background-color: red;
}
header, footer{
min-height: 60px;
line-height: 60px;
background-color: #ddd;
}
section {
position: relative;
height: calc(100vh - 120px);/**100vh 视口的高度- 头的高度和尾的高度*/
background-color: #005aa0;
display:flex;
align-items:center;
} </style>
</head>
<body>
<header>
<p>文字介绍2</p>
</header>
<section>
<p>主题内容的文字介绍</p>
</section>
<footer>
<p>底部文字介绍</p>
</footer>
</body>
</html>
html的布局demo的更多相关文章
- jqm的多列布局demo,html5的多列布局demo,多列布局的具体解说,html5开发实例具体解释
因为移动设备屏幕宽度较小,所以一般不建议使用多列布局.但有时你可能须要并排放置一些元素(如button之类的). jQuery Mobile通过约定的类名ui-grid来提供了一种基于css的多列布局 ...
- 前端切图:手机端自适应布局demo
手机端自适应布局demo原型如下: 图片发自简书App 要求如下:适应各种机型源码如下: <!DOCTYPE html > <html> <head> <me ...
- css+html简单的布局demo
于html介绍css作风.可以改变html块状布局,局更加美观.接下来看一个基础布局的小样例: <html> <head> <meta http-equiv=" ...
- 响应式布局 —— Demo
响应式布局实例演示What is 响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这 ...
- 移动端布局Demo展示图文
上两张图自勉一下(来自刘墉先生的文章,最近看他的作品):然后移动端该愈来愈受到重视,未来的市场我不知道,不过我知道手机的功能越来越强大是不争的事实!移动端布局的积累也需要从现在做起! 需求一:实现下图 ...
- flex布局demo
flex布局 http://static.vgee.cn/static/index.html
- 浮动布局demo
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 经典左右布局demo
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- 手机端自适应布局demo
原型如下: 要求如下:适应各种机型 源码如下: <!DOCTYPE html > <html> <head> <meta http-e ...
随机推荐
- codevs1051
题目地址:http://codevs.cn/problem/1051/ 分析: --题目难度:提高一等 1.数据结构(Data Structure):①Hash(用map或人工)②Stack(栈) 2 ...
- java_多态
一.多态(对象的多种形态)1.引用的多态 父类的引用指向本类的对象 父类的引用指向子类的对象(引用多态) (不允许子类对象指向父类)2.方法多态 创建本类对象时调用的方法为本类的方法 创建子类对象时, ...
- myeclipse 2014 customize_Perspective 失效解决方法-有效
1.将9个jar复制到myeclipse安装目录\plugins中 2.删除和这9个jar同包名但是版本号较低的9个文件 3.重启myeclipse 2014 三步走: 到这个地址下载 http:// ...
- angular过滤器基本用法
1.过滤器主要用于数据的筛选,可以直接在模板使用 语法: {{expression | filter}} {{expression | filter | filter2}} {{expression ...
- .Net 序列化和反序列化SerializerHelper
开始以为SerializerHelper类是项目中已包含的,后来在别的解决方案中测试代码才发现SerializerHelper类是自己写的. using System; using System.Co ...
- 《程序员面试金典(第5版)》【PDF】下载
<程序员面试金典(第5版)>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230382252 内容简介 本书作者Gayle Laakma ...
- 【USACO】玉米实验(单调队列)
Description 约翰决定培育新的玉米品种以提高奶牛的产奶效率.约翰所有的土地被分成 N ×N 块,其中第 r行第 c 列的玉米质量为 Ar,c.他打算找一块质量比较均匀的土地开始自己的实验.经 ...
- 用LinkedList集合演示栈和队列的操作
在数据结构中,栈和队列是两种重要的线性数据结构.它们的主要不同在于:栈中存储的元素,是先进后出:队列中存储的元素是先进先出.我们接下来通过LinkedList集合来演示栈和队列的操作. import ...
- SDP(0):Streaming-Data-Processor - Data Processing with Akka-Stream
再有两天就进入2018了,想想还是要准备一下明年的工作方向.回想当初开始学习函数式编程时的主要目的是想设计一套标准API給那些习惯了OOP方式开发商业应用软件的程序员们,使他们能用一种接近传统数据库软 ...
- find 命令详解
find 作用:用于在文件树种查找文件,并作出相应的处理 (硬盘) 格式:find pathname -options [-print -exec -ok ...] 格式参数:pathname: fi ...