html5--2.1新的布局元素(1)-header/footer

学习要点

  1. 了解header/footer的语义和用法
  2. 使用header/footer进行一个简单的布局
  1. header元素（标签）
    • 用于设置一个页面的标题部分，通常会包含标题，LOGO，导航等
    • 通常会放在文章的头部
  2. footer元素（标签）
    • 通常用于设置一个网页的底部区域，会包含友情链接，版权声明，文件建立日期，联系方式等
    • 通常会放在页面的页脚

实例

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>2.2</title>

 <style type="text/css">

     body{height: 300px;}

     header{width: 100%;background: #88FF88;height: 10%}

     footer{width: 100%;background: #8888FF;height: 10%}

     #div0{width: 100%;background: #FF8888;height: 80%}

     #div2{width: 20%;background: #987899;height: 100%;float: left}

     #div3{width: 80%;background: #987654;height: 100%;float: left}

 </style>

 </head>

 <body>

 <header>我是头部</header>

 <div id="div0">

     <div id="div2">我是侧边栏</div>

     <div id="div3">我是主体内容</div>

 </div>

 <footer>我是底部</footer>

 </body>

 </html>

html5--2.1新的布局元素(1)-header/footer的更多相关文章

  1. html5--2.9新的布局元素(6)-figure/figcaption

    html5--2.9新的布局元素(6)-figure/figcaption 学习要点 了解figure/figcaption元素的语义和用法 通过实例理解figure/figcaption元素的用法 ...

  2. html5--2.9新的布局元素(5)-hgroup/address

    html5--2.9新的布局元素(5)-hgroup/address 学习要点 了解hgroup/address元素的语义和用法 通过实例理解hgroup/address元素的用法 对照新元素布局与d ...

  3. html5--2.7新的布局元素(4)-time

    html5--2.7新的布局元素(4)-time 学习要点 了解微格式的概念 掌握time元素的用法 微格式的概念 HTML5中的微格式,是一种利用HTML5中的新标签对网页添加附加信息的方法,附加信 ...

  4. html5--2.1新的布局元素概述

    html5--2.1新的布局元素概述 学习要点 了解HTML5新标签(元素)的优点 了解本章要学习的新的布局元素 了解本章课程的安排 HTML5新标签的优点: 更注重于内容而不是形式 对人的友好:更加 ...

  5. html5--2.6新的布局元素(5)-nav

    html5--2.6新的布局元素(4)-aside/nav 学习要点 了解aside/nav元素的语义和用法 通过实例理解aside/nav元素的用法 aside元素 aside元素通常用来设置侧边栏 ...

  6. html5--2.5新的布局元素(4)-aside/nav

    html5--2.5新的布局元素(4)-aside/nav 学习要点 了解aside/nav元素的语义和用法 通过实例理解aside/nav元素的用法 aside元素(附属信息) aside元素通常用 ...

  7. html5--2.4新的布局元素(3)-section

    html5--2.4新的布局元素(3)-section 学习要点 了解section元素的语义和用法 通过实例理解section元素的用法 article元素和section元素的区别和共同点 art ...

  8. html5--2.3新的布局元素(2)-article

    html5--2.3新的布局元素(2)-article 学习要点 了解article元素的语义和用法 完成一个简单的实例 article元素(标签) 用于定义一个独立的内容区块,比如一篇文章,一篇博客 ...

  9. HTML5中支持新的媒体元素有这些

    HTML5对媒体的支持性很强,支持以下媒体元素: · audio  定义音频 · video  定义视频 · embed  作为外部应用的容器 · source  多种媒体源的支持 · track   ...

随机推荐

  1. 何为SLAM

    名词解释:        SLAM (simultaneous localization and mapping),也称为CML (Concurrent Mapping and Localizatio ...

  2. Ant Design 3.0 使用案例

    代码地址如下:http://www.demodashi.com/demo/12309.html 本文适合对象 有过React使用经验. 有过webpack使用经验. 了解node. DEMO使用方式 ...

  3. Mongo-Hadoop

    下载 https://github.com/mongodb/mongo-hadoop/releases 解压到/home/kevin/hadoop/hadoop/share/mongo-hadoop- ...

  4. 指定UIView的某几个角为圆角

    如果需要将UIView的四个角全部设置为圆角,做法相当简单,只需要设置其layer的cornerRadius属性即可.而若要指定某几个角(小于4)为圆角,而别的角不变的时候,这种方法就不好用了.这种情 ...

  5. svn自动部署

    版本库目录hooks下创建post-commit.bat TortoiseProc.exe /command:update /path:"E:\web_server\sial\" ...

  6. 小程序踩坑之不同屏幕下动态改变translate值

    案例还原 小程序做一个进度条,可以通过拽转控制进度 那么肯定有一个进度条,不过小程序自己会做适配宽高 6s下这个div的width 是250 6splus就是276 但是问题来了,我拖拽用的是tran ...

  7. matlab 学习之常用函数2

    -----------------------------author:midu ---------------------------qq:1327706646 ------------------ ...

  8. 初识ASP.net-牛腩新闻公布系统

           在做牛腩新闻公布的系统的时候,总有一种感觉就是:我仍然在敲机房收费系统,唯一不同的一点.就是敲机房收费的时候,用户界面是是自己手动画界面.而,在牛腩新闻公布系统中,用户界面,却是须要自己 ...

  9. Android - 使用messager实现进程间通信（服务器端→客户端，客户端→服务器端双向）

    之前看了一篇,然后不自己动手肯定是不行的,然后自己又写了一遍. 背景: 一般使用messenger进行进程间通信的时候,我们只能进行单方向通信.但是有没有办法让服务器端和客户端进行双向通信呢? 解决思 ...

  10. Python中类方法、__new__方法和__init__方法解析

    在编程语言中创建一个类,有构造方法这样的一个术语.而在Python中,通常大家都认为__init__是构造方法,其实并不完全等同.在构建类中,有一个特殊的方法__new__,这个才能等同为构造方法. ...