CSS Normalize文件配置示例

作为前端工程师，很多人都有自己的一套CSS Normalize文件，这样能省掉开发过程中的不少麻烦，提高工作效率。在前人的基础上，我总结了自己的CSS Normalize文件，目前基本上每个项目都有在使用中：

1.   
2. *{margin:0;padding:0;list-style-type:none;}   
3.   
4. *html,*html body {   
5.     background-image:url(about:blank);   
6.     background-attachment:fixed;   
7. }   
8. body{   
9.     font-family:"Microsoft Yahei","Hiragino Sans GB" ,Arial,Lucida,Verdana,SimSun,Helvetica,sans-serif;   
10.       
11.       
12.     font-size:13px;   
13. }   
14.   
15. a,img{border:none;text-decoration:none;}   
16. a{blr:expression(this.onFocus=this.blur());}   
17.   
18. :focus{outline:0;}   
19. label{cursor:pointer;}   
20. img{vertical-align:middle;}   
21. table{empty-cells:show;border-collapse:collapse;border-spacing:0;}   
22. h1{font-size:1.6em;}h2,h3,h4{font-size:1.4em;}h5,h6{font-size:1.2em;}   
23. input{border:none;}   
24. textarea{overflow:scroll;}   
25.   
26. a, input,textarea, .hover-delay {   
27.     font-family:"Microsoft Yahei","Hiragino Sans GB", Arial,Lucida,Verdana,SimSun,Helvetica,sans-serif;   
28.     -webkit-transition: all 0.3s ease-out;   
29.     -moz-transition: all 0.3s ease-out;   
30.     -ms-transition: all 0.3s ease-out;   
31.     -o-transition: all 0.3s ease-out;   
32.     transition: all 0.3s ease-out;   
33.   
34. }   
35. input.none-radius{   
36.     border-radius:0;   
37.     -moz-border-radius:0;   
38.     -webkit-border-radius:0;   
39. }   
40.   
41. input::-ms-clear{ display:none;}  //去掉输入框的叉叉   
42.   
43. .clear{clear:both;}   
44. .txt-indent{text-indent:-999px;overflow:hidden;}   
45.   
46. input[type=text],input[type=tel],input[type=email]{   
47. -webkit-appearance: none;   
48.  box-shadow: none;}   
49.   
50.   

对与我的实际使用中，我有一个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文件
主要为如下文件：

1.   
2.   
3.   
4.   
5.      
6.   
7.        
8.        
9.        
10.        
11.        
12.   
13.         
14.         
15.         
16.   
17.         
18.         
19.         
20.         
21.   
22.         
23.   
24.        
25.   
26.   
27.   
28.   
29. "wrapper">   
30.        
31.     "header">   
32.            
33.         "logo">   
34.            
35.            
36.         "nav">   
37.            
38.            
39.   
40.            
41.         "banner">   
42.            
43.            
44.   
45.        
46.        
47.   
48.        
49.     "container">   
50.            
51.         "news">   
52.            
53.            
54.   
55.            
56.         "sidebar">   
57.            
58.            
59.   
60.            
61.         "hot">   
62.            
63.            
64.   
65.        
66.        
67.   
68.        
69.     "footer">   
70.            
71.         "about-us">   
72.   
73.            
74.         "webchat">   
75.   
76.            
77.         "copyright">   
78.        
79.        
80.   
81.   
82.   
83.   

Mobile下的head会有如下meta设置：

值得一提的是，在github上也有做了一个 normalize.css 文件，我在做HTML5项目也将其应用在normalize中。 链接如下：
https://github.com/necolas/normalize.css

另外，对于很多开发中来说，Template文件同样是节省了不少写重复代码的时间，同时，又规范了自己的书写习惯。
下面这个，我觉得非常详细了，当然有些不必要的东西，可以自己取舍。
https://github.com/h5bp/html5-boilerplate