我的html5网站架构（针对drupal7）
<!DOCTYPE html>
<!--[if IE 8]><html class="no-js lt-ie9" lang="en" > <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]-->
<head>
<meta charset="utf-8">
<title>cdltwl</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="At5" content="">
<!-- styles -->
<link rel="stylesheet" type="text/css" href="css/reset.css"><!--重置css-->
<link rel="stylesheet" type="text/css" href="css/layout.css"><!--布局css-->
<link rel="stylesheet" type="text/css" href="css/text.css"><!--字体文章css-->
<link rel="stylesheet" type="text/css" href="css/form.css"><!--表单css-->
<link rel="stylesheet" type="text/css" href="css/module.css"><!--模块css-->
<link rel="stylesheet" type="text/css" href="css/navigation.css"><!--菜单css-->
<link rel="stylesheet" type="text/css" href="css/style.css"><!--总样式css-->
<!--最后记得合并css-->
<!--//为mobile添加一个mobile.css文件-
<!--[if IEMobile ]><link href="css/mobile.css" type="text/css" rel="stylesheet" media="all"><![endif]-->
<!-- script -->
<!-- HTML5使IE6-8支持HTML5元素 -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if IE 6]>
<script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>
<script type="text/javascript">
//给所有需要处理的png图片加上dd-pngifx这个class，就可以处理了
DD_belatedPNG.fix(".dd-pngfix");
</script><![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="">
<link rel="apple-touch-icon-precomposed" href="">
<link rel="shortcut icon" href="">
</head>
<body>
<!-- header -->
<header class="navbar navbar-fixed">
<div class="wrapper">
<hgroup id="logo" class="pull-left">
<h1><a href="index.html" title="">标题1</a></h1>
<h1 class="site_title">副标题</h1>
</hgroup>
<nav>
<ul>
<li class="active"><a href="#">首页</a></li>
<li><a href="#">导航1</a></li>
<li><a href="#">导航2</a></li>
</ul>
</nav>
</div><!--.wrapper-->
</header>
<!-- content -->
<section role="content">
<div role="main">
<div class="wrapper">
</div><!--.wrapper-->
</div>
<aside>
<div class="wrapper">
</div><!--.wrapper-->
</aside>
</section>
<!--footer-->
<footer>
<div class="wrapper">
</div><!--.wrapper-->
<!--[if IE 8]><html class="no-js lt-ie9" lang="en" > <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]-->
<head>
<meta charset="utf-8">
<title>cdltwl</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="At5" content="">
<!-- styles -->
<link rel="stylesheet" type="text/css" href="css/reset.css"><!--重置css-->
<link rel="stylesheet" type="text/css" href="css/layout.css"><!--布局css-->
<link rel="stylesheet" type="text/css" href="css/text.css"><!--字体文章css-->
<link rel="stylesheet" type="text/css" href="css/form.css"><!--表单css-->
<link rel="stylesheet" type="text/css" href="css/module.css"><!--模块css-->
<link rel="stylesheet" type="text/css" href="css/navigation.css"><!--菜单css-->
<link rel="stylesheet" type="text/css" href="css/style.css"><!--总样式css-->
<!--最后记得合并css-->
<!--//为mobile添加一个mobile.css文件-
<!--[if IEMobile ]><link href="css/mobile.css" type="text/css" rel="stylesheet" media="all"><![endif]-->
<!-- script -->
<!-- HTML5使IE6-8支持HTML5元素 -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if IE 6]>
<script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>
<script type="text/javascript">
//给所有需要处理的png图片加上dd-pngifx这个class，就可以处理了
DD_belatedPNG.fix(".dd-pngfix");
</script><![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="">
<link rel="apple-touch-icon-precomposed" href="">
<link rel="shortcut icon" href="">
</head>
<body>
<!-- header -->
<header class="navbar navbar-fixed">
<div class="wrapper">
<hgroup id="logo" class="pull-left">
<h1><a href="index.html" title="">标题1</a></h1>
<h1 class="site_title">副标题</h1>
</hgroup>
<nav>
<ul>
<li class="active"><a href="#">首页</a></li>
<li><a href="#">导航1</a></li>
<li><a href="#">导航2</a></li>
</ul>
</nav>
</div><!--.wrapper-->
</header>
<!-- content -->
<section role="content">
<div role="main">
<div class="wrapper">
</div><!--.wrapper-->
</div>
<aside>
<div class="wrapper">
</div><!--.wrapper-->
</aside>
</section>
<!--footer-->
<footer>
<div class="wrapper">
</div><!--.wrapper-->
</footer>
<!--script-->
</body></html>
整体布局模块化的思想，整个网站是以区块为单位组装的
css进行了大量的拆分，目的是使各个区块分工更加明确。
整体要兼容ie6+、Firefox 3.0+、Chrome 2.0+、Opera 9.64+、Safari 3.1+
在移动终端和电脑桌面端要有良好的显示效果
reset是改良的yahoo的reset
layout改良的是bootstrap中的布局方式，可以以响应式布局和固定宽度布局两种
text是改良的960的文章字体样式
form是改良的bootstrap的表单样式
module navigation style分别控制独立的模块 导航 整体样式