html5 footer使用布局案例

经由传统div标签结构与footer标签组织比拟考察深造，从而驾驭footer标签。同时对footer加class，配置血色字体进行比较。

1、残缺HTML5布局实例代码

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>footer 在线演示 CSS5</title> 
<style> 
body{text-align:center} 
/* 保守机关CSS */ 
#footer{color:#CCC; background:#630202;border-top:1px solid #871515; padding:10px 0 30px 0; width:100%} 

/* HTML5机关名堂 直接对footer元素配置格局 */ 
footer{ bac公斤round:#CCC;border-top:1px solid #000; padding:10px 0 30px 0; width:100%} 
.color-F00{ color:#F00} 
</style> 
</head> 
<body> 
<p>保守html 使用div组织</p> 
<div id="footer"> 
　　© CSS5.COM 版权所有<br /> 
　　深造CSS，找DIV+CSS利润上CSS5! 
</div> 
<p>html5 footer标签结构</p> 
<footer> 
　　© CSS5.COM 版权一切<br /> 
　　深造CSS，找DIV+CSS资本上CSS5! 
</footer> 

<p>html5 footer标签构造设置装备摆设class</p> 
<footer class="color-F00"> 
　　© CSS5.COM 版权全体<br /> 
　　深造CSS，找DIV+CSS资源上CSS5! 
</footer> 
</body> 
</html>

以上运用保守html div标签和html5 footer标签机关，同时也对footer设置class。

2、HTML5布局阅读器截图

HTML代码html5 footer布局与浏览器浏览效果拼接图
HTML代码html5 footer布局与阅读器阅读成果拼接图

要测试html5 footer标签结构效果，必要赞成HTML5的IE浏览器测试。引荐google chrome浏览器、或win IE9以上涉猎器测试。

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html5/h53034.shtml