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. JAVA入门[18]-JdbcTemplate简单实例

    一.关于JdbcTemplate JdbcTemplate是最基本的Spring JDBC模板,这个模板支持简单的JDBC数据库访问功能以及基于索引参数的查询. Spring数据访问模板:在数据库操作 ...

  2. Python：list 和 array的对比以及转换时的注意事项

    Python:list 和 array的对比以及转换时的注意事项 zoerywzhou@163.com http://www.cnblogs.com/swje/ 作者:Zhouwan 2017-6-4 ...

  3. .Net Ajax跨域请求实现

    下一阵子要做一个网站Web储备一下知识,AJAX 实现跨域请求,估计会用到,以前在学  WebServer  时候老师整理的一个文档,现在便于查阅和使用现在放到我的博客中. 一般平时我写web页面的时 ...

  4. Nginx优点

    1.高并发响应性能非常好,官方Nginx处理静态文件并发5w/s 2.反向代码性能非常强(可用于负载均衡) 3.内存和cpu占比率低(为Apache的1/5-1/10); 4.对后端服务有健康检查功能 ...

  5. 《认知与设计：理解UI设计准则》【PDF】下载

    <认知与设计:理解UI设计准则>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230382276 内容介绍 <图灵交互设计丛书·认 ...

  6. 在Eclipse中创建Django项目

    在以前的分享中,我们是在命令行模式下创建Django项目的,那么,如何在IDE中使用Django呢? 本文将介绍如何在Eclipse中创建Django项目. 首先,新建Django项目mysite,如 ...

  7. Pycharm配置（一）

    Pycharm作为一款强力的Python IDE,在使用过程中感觉一直找不到全面完整的参考手册,因此决定对官网的Pycharm教程进行简要翻译,与大家分享. 1.准备工作 官网下载 2.如何选择Pyc ...

  8. 【java】method.invoke(方法底层所属对象/null，new Object[]{实际参数})

    反射调方法时无论是静态/非静态,固定/可变参数,都有Object对象数组对参数进行包装. package com.tn.clas; import java.lang.reflect.Method; i ...

  9. 《Office 365 开发入门指南》公开邀请试读，欢迎反馈

    终于等来了这一天,可以为我的这本新书画上一个句号.我记得是在今年的2月份从西雅图回来之后,就萌发了要为中国的Office 365开发人员写一些东西并最终能帮到更多中国用户的想法,而从2月26日正式写下 ...

  10. PDO绑定含IN的SQL语句的参数注意事项

    PDOStatement::bindParam(),表示将PDO::prepare()语句中的占位符用参数替换掉.注意,在绑定含有IN的SQL多参数语句时要额外小心,比如$stmt = $db-> ...