html5 footer使用布局案例

2019年11月30日作者：佚名

经由传统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>