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的更多相关文章

  1. jqm的多列布局demo,html5的多列布局demo,多列布局的具体解说,html5开发实例具体解释

    因为移动设备屏幕宽度较小,所以一般不建议使用多列布局.但有时你可能须要并排放置一些元素(如button之类的). jQuery Mobile通过约定的类名ui-grid来提供了一种基于css的多列布局 ...

  2. 前端切图:手机端自适应布局demo

    手机端自适应布局demo原型如下: 图片发自简书App 要求如下:适应各种机型源码如下: <!DOCTYPE html > <html> <head> <me ...

  3. css+html简单的布局demo

    于html介绍css作风.可以改变html块状布局,局更加美观.接下来看一个基础布局的小样例: <html> <head> <meta http-equiv=" ...

  4. 响应式布局 —— Demo

    响应式布局实例演示What is 响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这 ...

  5. 移动端布局Demo展示图文

    上两张图自勉一下(来自刘墉先生的文章,最近看他的作品):然后移动端该愈来愈受到重视,未来的市场我不知道,不过我知道手机的功能越来越强大是不争的事实!移动端布局的积累也需要从现在做起! 需求一:实现下图 ...

  6. flex布局demo

    flex布局 http://static.vgee.cn/static/index.html

  7. 浮动布局demo

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. 经典左右布局demo

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  9. 手机端自适应布局demo

    原型如下: 要求如下:适应各种机型 源码如下: <!DOCTYPE html > <html>     <head>         <meta http-e ...

随机推荐

  1. Vue深度学习（3）

    基础 Vue.js允许自定义指令,实质上是让你教 Vue一些新技巧:怎样将数据的变化映射到 DOM 的行为.可以使用 Vue.directive(id, definition) 的方法传入指令 id  ...

  2. scrapy爬虫框架setting模块解析

    平时写爬虫的时候并不需要设置setting里所有的参数,今天心血来潮,花了点时间查了一下setting模块创建后自动写入的所有参数的含义,记录一下. 模块相关说明信息 # -*- coding: ut ...

  3. 面试题（php部分）

    1.用PHP打印出前一天的时间格式是2006-5-10 22:21:21(2分) [答案] $a = date("Y-m-d H:i:s", strtotime("-1 ...

  4. Chef 自动化运维：初探 cookbook

    cookbook 概述 Chef 意为"厨房",我们要做"菜",自然需要有"菜谱".事实上在 Chef 中分发到各服务器节点的不是" ...

  5. Visual Studio中将打开的代码与类文件进行关联

  6. 统计函数：MAX,MIN,SUM,AVG,COUNT

  7. cat/tac/more/less 命令详解

    cat:(http://www.cnblogs.com/peida/archive/2012/10/30/2746968.html) *cat主要有三大功能:1.一次显示整个文件:cat filena ...

  8. 微信扫码支付功能详细教程————Java

    前言  首先声明 我并非原创 原创是 http://blog.csdn.net/wangqiuyun/article/details/51241064 我只是在前辈的基础 加以解释说明 还有自己的一些 ...

  9. Python第二十二天 stat模块 os.chmod方法 os.stat方法 pwd grp模块

    Python第二十二天   stat模块  os.chmod方法  os.stat方法  pwd  grp模块 stat模块描述了os.stat(filename)返回的文件属性列表中各值的意义,根据 ...

  10. php+中文分词scws+sphinx+mysql打造千万级数据全文搜索

    转载自:http://blog.csdn.net/nuli888/article/details/51892776 Sphinx是由俄罗斯人Andrew Aksyonoff开发的一个全文检索引擎.意图 ...