作为前端工程师，很多人都有自己的一套CSS Normalize文件，这样能省掉开发过程中的不少麻烦，提高工作效率。在前人的基础上，我总结了自己的CSS Normalize文件，目前基本上每个项目都有在使用中：
CSS Code复制内容到剪贴板 /*Normalize*/ *{margin:0;padding:0;list-style-type:none;} *html,*htmlbody/*修正IE6振动bug*/{ background-image:url(about:blank); background-attachment:fixed; } body{ font-family:"MicrosoftYahei","HiraginoSansGB",Arial,Lucida,Verdana,SimSun,Helvetica,sans-serif; /*font-size:62.5%;px数值除以10，然后换上em作为单位*/ /*min-width:980px;*/ font-size:13px; } a,img{border:none;text-decoration:none;} a{blr:expression(this.onFocus=this.blur());}/*去掉a标签的虚线框，避免出现奇怪的选中区域*/ /*a:active{test:expression(target="_blank");}*/ :focus{outline:0;} label{cursor:pointer;} img{vertical-align:middle;} table{empty-cells:show;border-collapse:collapse;border-spacing:0;} h1{font-size:1.6em;}h2,h3,h4{font-size:1.4em;}h5,h6{font-size:1.2em;} input{border:none;} textarea{overflow:scroll;} a,input,textarea,.hover-delay{ font-family:"MicrosoftYahei","HiraginoSansGB",Arial,Lucida,Verdana,SimSun,Helvetica,sans-serif; -webkit-transition:all0.3sease-out; -moz-transition:all0.3sease-out; -ms-transition:all0.3sease-out; -o-transition:all0.3sease-out; transition:all0.3sease-out; } input.none-radius{ border-radius:0; -moz-border-radius:0; -webkit-border-radius:0; } input::-ms-clear{display:none;}//去掉输入框的叉叉 .clear{clear:both;} .txt-indent{text-indent:-999px;overflow:hidden;} input[type=text],input[type=tel],input[type=email]{ -webkit-appearance:none; box-shadow:none;} /*Normalizeend*/
对与我的实际使用中，我有一个Template文件夹（最近新增了一个针对Mobile）
里面的文件夹大致分为如下：
1）images: 存放项目中的图片（里面又会根据项目模块进行文件夹划分）
2）css: 存放css文件（里面会有一个base.css文件，预置上文中的css normalize）
3）js：存放js文件，里面还有一个vender的文件夹，存放插件js（例如：jQuery库），外面有main.js（主要js文件），plugins.js（插件引用的js）
根目录下，为index.html文件
主要为如下文件：
CSS Code复制内容到剪贴板 <!doctypehtml> <> <> <> <><htmlclass="no-js"><> <headlang="zh-CN"> <metacharset="utf-8"/> <metahttp-equiv="X-UA-Compatible"content="IE=edge"/> <title>xxx</title> <metaname="keywords"content="xxx"/> <metaname="description"content="xxx"/> <linkrel="shortcuticon"href="images/favicon.ico"/><> <linkrel="stylesheet"href="css/normalize.css"/><> <linkrel="stylesheet"href="css/base.css"/><> <scriptsrc="js/vendor/jquery-1.10.2.min.js"></script><> <scriptsrc="js/vendor/jquery-ui-1.11.1.js"></script><> <scriptsrc="js/main.js"></script><> <scriptsrc="js/plugins.js"></script><> <!--[if(gteIE6)&(lteIE8)]> <scripttype="text/javascript"src="js/vendor/selectivizr.js"></script> <noscript><linkrel="stylesheet"href="[fallbackcss]"/></noscript> <![endif]--><> <!--[ifltIE9]> <scriptsrc="js/html5.js"></script> <![endif]--> </head> <body> <> <divclass="wrapper"> <> <divclass="header"> <> <divclass="logo"></div> <> <> <divclass="nav"> </div> <> <> <divclass="banner"> </div> <> </div> <> <> <divclass="container"> <> <divclass="news"> </div> <> <> <divclass="sidebar"> </div> <> <> <divclass="hot"> </div> <> </div> <> <> <divclass="footer"> <> <divclass="about-us"></div> <> <divclass="webchat"></div> <> <divclass="copyright"></div> </div> <> </div> <> </body> </html>
Mobile下的head会有如下meta设置：
CSS Code复制内容到剪贴板 <metaname="viewport"id="viewport"content="width=device-width,initial-scale=1,user-scalable=no"/> <metaname="apple-mobile-web-app-capable"content="yes"/> <metaname="apple-touch-fullscreen"content="yes"/> <metaname="apple-mobile-web-app-status-bar-style"content="black"/>
值得一提的是，在github上也有做了一个 normalize.css 文件，我在做HTML5项目也将其应用在normalize中。 链接如下：
https://github.com/necolas/normalize.css
另外，对于很多开发中来说，Template文件同样是节省了不少写重复代码的时间，同时，又规范了自己的书写习惯。
下面这个，我觉得非常详细了，当然有些不必要的东西，可以自己取舍。
https://github.com/h5bp/html5-boilerplate