css文件实例,CSS Normalize文件配置示例

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

CSS Code复制内容到剪贴板

/*Normalize*/

*{margin:0;padding:0;list-style-type:none;}

*html,*html body/* 修正IE6振动bug */{

background-image:url(about:blank);

background-attachment:fixed;

}

body{

font-family:"Microsoft Yahei","Hiragino Sans GB",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:"Microsoft Yahei","Hiragino Sans GB",Arial,Lucida,Verdana,SimSun,Helvetica,sans-serif;

-webkit-transition:all0.3s ease-out;

-moz-transition:all0.3s ease-out;

-ms-transition:all0.3s ease-out;

-o-transition:all0.3s ease-out;

transition:all0.3s ease-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;}

/*Normalize end*/

对与我的实际使用中，我有一个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复制内容到剪贴板

html>

xxx

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

CSS Code复制内容到剪贴板

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

https://github.com/necolas/normalize.css

另外，对于很多开发中来说，Template文件同样是节省了不少写重复代码的时间，同时，又规范了自己的书写习惯。

下面这个，我觉得非常详细了，当然有些不必要的东西，可以自己取舍。

https://github.com/h5bp/html5-boilerplate