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. HttpWebRequest用法实例

    [HttpPost] public ActionResult Setmobile() { string text = "<?xml version='1.0' encoding='UT ...

  2. Android MarginLeft与MarginStart的差别

    在写layout布局的时候,我们会发现有这样几个比較相似的属性: MarginStart   MarginLeft MarginEnd    MarginRight 这些属性的差别是什么?  依据ap ...

  3. 2014acm亚洲区域赛陕西赛总结

    这次是第一次出来到外面比赛,一切都是非常新鲜的,带着新鲜来到了古城西安.首先感觉就是志愿者一点都不热情.一副爱理不理的,这不是有违我大西北人的热情好客么. 直接说比赛吧. 第一天热身赛,出了两道非常水 ...

  4. URL Handle in Swift (一) -- URL 分解

    更新时间: 2018-6-6 在程序开发过程之中, 我们总是希望模块化处理某一类相似的事情. 在 ezbuy 开发中, 我接触到了对于 URL 处理的优秀的代码, 学习.改进.记录下来.希望对你有所帮 ...

  5. 12306 外包给阿里巴巴、IBM 等大企业做是否可行？

    知乎上看到的,转载过来,雅俗共赏 12306首秀被骂的狗血喷头后铁道部找来IBM.阿里巴巴等大企业要解决方式,给出的条件是资金管够可是问题得解决. 几大企业最后都拒绝了(当中阿里巴巴最后负责了排队系统 ...

  6. Zabbix-20160817-高危SQL注入漏洞

    漏洞概述: zabbix是一个开源的企业级性能监控解决方案.近日,zabbix的jsrpc的profileIdx2参数存在insert方式的SQL注入漏洞,攻击者无需授权登陆即可登陆zabbix管理系 ...

  7. 渐变背景（background）效果

    chrom and Safari浏览器: webkit核心的浏览器.使用CSS3渐变方法(css-gradient) -webkit-gradient(type, start_point, end_p ...

  8. Spark源码分析之八：Task运行（二）

    在<Spark源码分析之七:Task运行(一)>一文中,我们详细叙述了Task运行的整体流程,最终Task被传输到Executor上,启动一个对应的TaskRunner线程,并且在线程池中 ...

  9. SQLite 数据库安装与创建数据库

    嵌入式关系数据库 Ubuntu $ sudo apt-get install sqlite3 sqlite3-dev CentOS, or Fedora $ yum install SQLite3 s ...

  10. oracle索引INdex

    索引是与表相关的一种可选择数据库对象.索引是为提高数据检索的性能而建立,利用它可快速地确定指定的信息. 索引可建立在一表的一列或多列上,一旦建立,由ORACLE自动维护和使用,对用户是完全透明的.然而 ...