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. Springboot的默认定时任务——Scheduled注解

    本博客参考博文地址. 1.pom依赖: 引入springboot starter包即可 <dependencies> <dependency> <groupId>o ...

  2. 【 全干货 】5 分钟带你看懂 Docker ！

    欢迎大家前往腾讯云社区,获取更多腾讯海量技术实践干货哦~ 作者丨唐文广:腾讯工程师,负责无线研发部地图测试. 导语:Docker,近两年才流行起来的超轻量级虚拟机,它可以让你轻松完成持续集成.自动交付 ...

  3. 原生js实现一个简单的倒计时功能

    大家好,我是云中君!欢迎大家来观看我的博客 之前那,在群里看到很多人问,关于电商网站中的倒计时功能怎么实现,很多人说在网上找了很多插件,但是不是很会用,所以今天就在这里分享一下我封装的一个小的倒计时功 ...

  4. Bandit Wargame Level18 Writeup(interactive shell and .bashrc )

    Bandit Level 18 → Level 19 Level Goal The password for the next level is stored in a file readme in ...

  5. linux下脚本做成服务

    一.脚本做成服务 1.把启动脚本复制到 /etc/init.d目录中 2.脚本内容 xxxx代表jar包名称 #!/usr/bin/env bash # chkconfig: 2345 20 80 # ...

  6. iOS白名单设置

    在做分享.支付的时候需要跳转到对应的app,这里有需要设置的白名单列表<key>LSApplicationQueriesSchemes</key> <array> ...

  7. 常用 SQL Server 规范集锦

    常用 SQL Server 规范集锦 常见的字段类型选择   1.字符类型建议采用varchar/nvarchar数据类型 2.金额货币建议采用money数据类型 3.科学计数建议采用numeric数 ...

  8. 用户信息文件/etc/passwd，影子文件/etc/shadow，组信息文件/etc/group，组密码文件/etc/gshadow，用户管理相关文件

    /etc/passwd man 5 passwd查看配置文件信息 account:password:UID:GID:GECOS:directory:shell 帐号:密码:用户ID:组ID:一般的信息 ...

  9. ASP.NET Core 系列视频完结，新项目实战课程发布。

    今天把MVC的章节完成了,给大家从头到尾做了一个登录注册的示例,带前后端Model验证,算是完整的示例.同时借助于eShopOnContainers的示例也做了一个DBContextSeed的包装器来 ...

  10. Qt之移动硬盘热插拔监控

    最近在做一个通用对话框,类似于windows的资源管理器,当然了没有windwos资源管理器那么强大.用户报了一个bug,说通用对话框打开之后不能实时监控U盘插入,随手在百度上搜索了一圈,这个问题还是 ...