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. 【AngularJS】【03】使用AngularJS进行开发

    看不到PPT的请自行解决DNS污染问题.

  2. x86 Android游戏开发专题篇之使用google breakpad捕捉c++崩溃(以cocos2dx为例)

    近期一直都在x86设备上进行游戏开发.就c++层和Android java层倒没有什么要特别注意的(除了须要注意一下改动Application.mk指定平台外),在c++崩溃的时候,非常多时候看不到堆 ...

  3. npm run watch-poll 监控css、js 文件更新

    后台执行npm run watch-poll 你可以在执行命令的后面接一个&命令就会在后台运行了.完整命令:npm run watch-poll & 就是任务号 文章来源:刘俊涛的博客 ...

  4. Shell脚本之：while

    while循环用于不断执行一系列命令,也用于从输入文件中读取数据:命令通常为测试条件.其格式为: while command do Statement(s) to be executed if com ...

  5. 使用robotframework常见的几个问题

    问题1:用rf运行IEdriver的速度好慢,比如在输入框输入用户名,一秒输入一个字符.你们的是不是这样子的?.如果是chromedriver就很快 解决办法:把IEDriver从64位换成32位 , ...

  6. 36:字符串排序SortString

    题目描述:编写一个程序,将输入字符串中的字符按如下规则排序. 规则1:英文字母从A到Z排列,不区分大小写. 如,输入:Type 输出:epTy 规则2:同一个英文字母的大小写同时存在时,按照输入顺序排 ...

  7. linux脚本实现自己主动输入password

    使用Linux的程序猿对输入password这个举动一定不陌生,在Linux下对用户有严格的权限限制,干非常多事情越过了权限就得输入password.比方使用超级用户运行命令,又比方ftp.ssh连接 ...

  8. MVC项目总结

    View命名 View下有多个模块的文件夹,我们根据微软的规定,每个模块下的首页都为Index.cshtml命名 获得当前页面的控制器名称 var currentControllerName = th ...

  9. Maven一大坑——缓存

    在Spring进行配置的时候,通常是分模块的,也就是一个配置文件会被另外一个配置文件所import. 但是今天的项目中我明明就都已经配置好了,文件也引入了,但是尼玛这个接口就是没有注入...... 后 ...

  10. 资源重复 uac.res resource kept（转）

    一般按照网上流传的方法制作UAC.RES放到DELPHI程序里面来就可以出现盾牌.但是某些DELPHI的项目在添加了UAC.RES后编译会报错,例如: [DCC Error] E2161 Warnin ...