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. PHP开发小技巧，让你瞬间提升逼格

    说到PHP代码的优化,PHP开发的小技巧我想很多人都有自己的一套,下面分享一些小技巧,希望对大家有所帮助. 1.循环内部不要声明变量,尤其是对象这样的变量. 2.foreach效率更高,尽量用fore ...

  2. ASP.NET Core 中间件（Middleware）详解

    什么是中间件(Middleware)? 中间件是组装到应用程序管道中以处理请求和响应的软件. 每个组件: 选择是否将请求传递给管道中的下一个组件. 可以在调用管道中的下一个组件之前和之后执行工作. 请 ...

  3. Java连接MySQL数据库增删改查通用方法

    版权声明:本文为博主原创文章,未经博主允许不得转载. Java连接MySQL数据库增删改查通用方法 运行环境:eclipse+MySQL 以前我们Java连接MySQL数据库都是一个数据库写一个类,类 ...

  4. Natas Wargame Level25 Writeup(头部注入+POST/GET注入)

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAArsAAAC8CAYAAAB4+WYTAAAABHNCSVQICAgIfAhkiAAAIABJREFUeF

  5. ES6数组及数组方法

    ES6数组可以支持下面的几种写法: (1)var [a,b,c] = [1,2,3]; (2)var [a,[[b],c]] = [1,[[2],3]]; (3)let [x,,y] = [1,2,3 ...

  6. ABP前端使用阿里云angular2 UI框架NG-ZORRO分享

    一.前言 前段时间写博客分享和介绍了阿里云的UI框架NG-ZORRO(博客请查看:http://www.cnblogs.com/donaldtdz/p/7892960.html),结合近段时间对.Ne ...

  7. 530. Minimum Absolute Difference in BST

    Given a binary search tree with non-negative values, find the minimum absolute difference between va ...

  8. 598. Range Addition II

    Given an m * n matrixMinitialized with all0's and several update operations. Operations are represen ...

  9. 如何减轻ajax定时触发对服务器造成的压力和带宽的压力？ajax-长轮训

    AJAX长轮询的方法来解决频繁对后台的请求,进一步减小压力 在实现过程发现AJAX的多次请求会出现多线程并发的问题又使用线程同步来解决该问题 个人对ajax长轮询的一点愚见 ajax请示后台时,后台程 ...

  10. python爬取大众点评并写入mongodb数据库和redis数据库

    抓取大众点评首页左侧信息,如图: 我们要实现把中文名字都存到mongodb,而每个链接存入redis数据库. 因为将数据存到mongodb时每一个信息都会有一个对应的id,那样就方便我们存入redis ...