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

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

学习要点

  1. 了解header/footer的语义和用法
  2. 使用header/footer进行一个简单的布局

 

  1. header元素(标签)
  • 用于设置一个页面的标题部分,通常会包含标题,LOGO,导航
  • 通常会放在文章的头部
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

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值