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


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

    学习要点

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

     实例

     1 <!doctype html>
     2 <html>
     3 <head>
     4 <meta charset="utf-8">
     5 <title>2.2</title>
     6 <style type="text/css">
     7     body{height: 300px;}
     8     header{width: 100%;background: #88FF88;height: 10%}
     9     footer{width: 100%;background: #8888FF;height: 10%}
    10     #div0{width: 100%;background: #FF8888;height: 80%}
    11     #div2{width: 20%;background: #987899;height: 100%;float: left}
    12     #div3{width: 80%;background: #987654;height: 100%;float: left}
    13 </style>
    14 </head>
    15 <body>
    16 <header>我是头部</header>
    17 <div id="div0">
    18     <div id="div2">我是侧边栏</div>
    19     <div id="div3">我是主体内容</div>
    20 </div>
    21 <footer>我是底部</footer>
    22 </body>
    23 </html>
    View Code
  • 相关阅读:
    Building Forest CodeForces
    欢迎使用CSDN-markdown编辑器
    Travelling HDU
    Card Collector HDU
    Doing Homework HDU
    Mirror Number SPOJ
    Palindromic Numbers LightOJ
    Magic Numbers CodeForces
    Xor-sequences CodeForces
    Little Elephant and Elections CodeForces
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/7906840.html
Copyright © 2020-2023  润新知