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>
以上运用保守html div标签和html5 footer标签机关,同时也对footer设置class。
2、HTML5布局阅读器截图
HTML代码html5 footer布局与阅读器阅读成果拼接图
要测试html5 footer标签结构效果,必要赞成HTML5的IE浏览器测试。引荐google chrome浏览器、或win IE9以上涉猎器测试。