新旧DIV布局对比案例

通过DIV+CSS布局与HTML5+CSS机关比较考查并驾御对header应用。

1、CSS5实例HTML5+CSS完整代码

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>html5 Header标签实例 CSS5</title> 
<style> 
/* 激进组织CSS */ 
#header{ width:300px; height:40px; background:#CCC} 

/* HTML5机关格式 */ 
header{ width:400px; height:70px; color:#F00; bac千克round:#F5F5F5} 
.color-000{ color:#000; bac千克round:#666} 
</style> 
</head> 
<body> 
<div id="header">我在激进div结构中</div> 

<header>我在激进div结构中,必须在赞成HTML5浏览器技巧看到造诣， 
首倡google阅读器测试观察造诣</header> 

<header class="color-000">我色采为玄色,靠山为#666</header> 
</body> 
</html>

2、成就截图

、

div和html5 header结构成效截图

CSS5格外揭示：代码在DW软件截图、成效在googleChrome（支持HTML5）涉猎器成就发展PS的效果图。平庸IE6-IE8不支持HTML5看不到HTML5机关成就，重要IE9及以上版本浏览器看到构造功效。

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