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. UNP学习笔记（第三章：套接字编程简介）

    本章开始讲解套接字API. 套接字地址结构 IPv4套接字地址结构 它以sockaddr_in命名,下面给出它的POSIX定义 struct in_addr { in_addr_t s_addr; } ...

  2. mysql 时间函数date_format

    http://toptree.iteye.com/blog/812642今天,在开发邮件系统的时候发现有很多的邮件没有发送成功,想手动把数据修改.找了mysql 的日期函数 获得的pubtime为St ...

  3. [原创] 浅谈开源项目Android-Universal-Image-Loader(Part 3.1)

    最近,总算有时间去做些平时喜欢而没空去做的事情.一直觉得项目中使用的Image Loader适用性不强,昨晚在github随便逛逛,发现一个开源项目Android-Universal-Image-Lo ...

  4. select设置innerHMTL

    select控件在标准浏览器下可以直接innerHTML设置内容,IE则不行. HTML结构: <form name="form1"> <select name= ...

  5. dede二级导航与二级栏目 ----内容介绍二级导航

    {dede:channelartlist typeid='top'}//如果只需要拿一列,则需要使用row='1'这个属性否则会根据子频道的数目循环输出 <a href="{dede: ...

  6. linux下网卡绑定

    网卡绑定的作用:1.冗余,防止单点故障 2.防止传输瓶颈 1.交换机端口绑定: system-view link-aggregation group 1 mode manual 比如把端口1和2进行绑 ...

  7. 记录下关于ejabberd及XMPP的官网链接

    ejabberd中文翻译 ——http://wiki.jabbercn.org/Ejabberd2:安装和操作指南 XMPP中文翻译: http://wiki.jabbercn.org/XEP-012 ...

  8. PeekMessage究竟做了什么?

    1.UI线程 2.工作线程 把Delphi里TThread的WaitFor函数转化成C++代码,就会是下面这个样子. BOOL TThread::WaitFor(HANDLE hThread) { M ...

  9. live555二次开发经验总结：RTSPClient客户端与RTSPServer服务器

    live555介绍 安防领域的流媒体开发者估计没有谁不知道live555的,可能并不是因为其架构有多牛,代码有多好看,而是因为这玩意存在的年限实在是太长了,从changelog来看,live555从2 ...

  10. HttpClient 访问 https 出现peer can't

    package util; import java.security.cert.CertificateException; import javax.net.ssl.SSLContext;import ...