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. canvas绘制多边形

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

  2. .NET 绝对路径的配置

    有时候因为用IIS配置网站,会导致一些全局引用有路径问题无法引用到.今天就说一下,关于全局引用的绝对路径的配置,譬如,由于IIS配置的虚拟路径,一些CSS,JS的引用找不到,又或者自定义的一些跳转出现 ...

  3. 3.更改ssh服务远程登录的配置

  4. 【python】局部变量和全局变量

  5. JavaScript基础1——基本概念

    关于JS的概念 JavaScript 是一种弱类型语言. JavaScript 是一种客户端脚本语言(脚本语言是一种轻量级的编程语言). JavaScript是基于对象的.(因为面向对象需要具有封装. ...

  6. spring mvc报错，数据库查询无限死循环

    进行查询的陷入了无限死循环,原因是问题类中包含了回答,回答类中包含了问题,进入了无限死循环 解决方法:在回答类中的问题类属性上加注解:@JsonBackReference 问题中有回答的set集合,回 ...

  7. xml生成方式二（Xml序列化器XmlSerializer）

    一.andoirdAPI提供了xml生成和解析的API: XmlSerializer xs = Xml.newSerializer();和XmlPullParser xmlPullParser = X ...

  8. HTML知识点记录

    1.input的type设置为file时,设置multiple属性可以同时选择多个文件.

  9. UWP Windows历史上最漂亮的UWP框架出炉！！！

    UWP Windows历史上最漂亮的UWP框架出炉!!! 本框架基于微软的开源项目WTS开发,并在其基础上增加了FDS(流畅设计元素,高光.亚克力等).多语言系统.沉浸式体验(扩展内容到标题栏) 同时 ...

  10. ssh简明安全规划

    禁止使用口令只允许使用密钥建立 SSH 连接 1.创建 SSH KEY 使用ssh-keygen生成一个密钥对,并且将公钥注册到服务器的 $HOME/.ssh/authorized_keys 文件. ...