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: all 0.3s ease-out;        -moz-transition: all 0.3s ease-out;        -ms-transition: all 0.3s ease-out;        -o-transition: all 0.3s ease-out;        transition: all 0.3s ease-out;       }    input.none-radius{        border-radius:0;        -moz-border-radius:0;        -webkit-border-radius:0;    }       input::-ms-cleardisplay: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复制内容到剪贴板 <!doctype html>    <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->    <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->    <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->    <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->    <head lang="zh-CN">        <meta charset="utf-8" />        <meta http-equiv="X-UA-Compatible" content="IE=edge" />        <title>xxx</title>        <meta name="keywords" content="xxx" />        <meta name="description" content="xxx" />           <link rel="shortcut icon" href="images/favicon.ico" /> <!-- IE address前ico图标 -->        <link rel="stylesheet" href="css/normalize.css" /> <!-- reset style -->        <link rel="stylesheet" href="css/base.css" /> <!-- basic style -->           <script src="js/vendor/jquery-1.10.2.min.js"></script> <!-- jQuery library -->        <script src="js/vendor/jquery-ui-1.11.1.js"></script> <!-- jQuery UI library -->        <script src="js/main.js"></script> <!-- main js -->        <script src="js/plugins.js"></script> <!-- plugins  -->           <!--[if (gte IE 6)&(lte IE 8)]>            <script type="text/javascript" src="js/vendor/selectivizr.js"></script>          <noscript><link rel="stylesheet" href="[fallback css]" /></noscript>        <![endif]--> <!--/*修正CSS3在IE6-8*/-->           <!--[if lt IE 9]>           <script src="js/html5.js"></script>        <![endif]-->       </head>    <body>    <!--wrapper-->    <div class="wrapper">        <!--header-->        <div class="header">            <!--logo-->            <div class="logo"></div>            <!--logo end-->            <!--navigation-->            <div class="nav">            </div>            <!--navigation  end-->               <!--banner-->            <div class="banner">            </div>            <!--banner-->           </div>        <!--header end-->           <!--container-->        <div class="container">            <!--news-->            <div class="news">            </div>            <!--news  end-->               <!--sidebar banner-->            <div class="sidebar">            </div>            <!--sidebar banner end-->               <!--hot top9-->            <div class="hot">            </div>            <!--hot top9-->           </div>        <!--container end-->           <!--footer-->        <div class="footer">            <!--about us-->            <div class="about-us"></div>               <!--webchat-->            <div class="webchat"></div>               <!--copyright-->            <div class="copyright"></div>        </div>        <!--footer end-->    </div>    <!--wrapper end-->    </body>    </html>  

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

CSS Code复制内容到剪贴板 <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />    <meta name="apple-mobile-web-app-capable" content="yes" />    <meta name="apple-touch-fullscreen" content="yes" />    <meta name="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

CSS Normalize文件配置示例