CSS Normalize文件配置示例

segmentfault 發(fā)布時(shí)間：2015-07-20 18:09:57 作者：mli

這篇文章主要介紹了CSS Normalize文件配置示例,對(duì)全局項(xiàng)目進(jìn)行設(shè)置,需要的朋友可以參考下

作為前端工程師，很多人都有自己的一套CSS Normalize文件，這樣能省掉開發(fā)過程中的不少麻煩，提高工作效率。在前人的基礎(chǔ)上，我總結(jié)了自己的CSS Normalize文件，目前基本上每個(gè)項(xiàng)目都有在使用中：

CSS Code復(fù)制內(nèi)容到剪貼板

/*Normalize*/
*{margin:0;padding:0;list-style-type:none;}
*html,*html body /* 修正IE6振動(dòng)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數(shù)值除以10，然后換上em作為單位*/
/*min-width:980px;*/
font-size:13px;
}
a,img{border:none;text-decoration:none;}
a{blr:expression(this.onFocus=this.blur());} /*去掉a標(biāo)簽的虛線框，避免出現(xiàn)奇怪的選中區(qū)域*/
/*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-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*/

對(duì)與我的實(shí)際使用中，我有一個(gè)Template文件夾（最近新增了一個(gè)針對(duì)Mobile）
里面的文件夾大致分為如下：

    1）images: 存放項(xiàng)目中的圖片（里面又會(huì)根據(jù)項(xiàng)目模塊進(jìn)行文件夾劃分）
    2）css: 存放css文件（里面會(huì)有一個(gè)base.css文件，預(yù)置上文中的css normalize）
    3）js：存放js文件，里面還有一個(gè)vender的文件夾，存放插件js（例如：jQuery庫），外面有main.js（主要js文件），plugins.js（插件引用的js）

根目錄下，為index.html文件
主要為如下文件：

CSS Code復(fù)制內(nèi)容到剪貼板

<!doctype html>
<html class="no-js">
<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" />
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/base.css" />
<script src="js/vendor/jquery-1.10.2.min.js"></script>
<script src="js/vendor/jquery-ui-1.11.1.js"></script>
<script src="js/main.js"></script>
<script src="js/plugins.js"></script>
<!--[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]-->
<!--[if lt IE 9]>
<script src="js/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="wrapper">
<div class="header">
<div class="logo"></div>
<div class="nav">
</div>
<div class="banner">
</div>
</div>
<div class="container">
<div class="news">
</div>
<div class="sidebar">
</div>
<div class="hot">
</div>
</div>
<div class="footer">
<div class="about-us"></div>
<div class="webchat"></div>
<div class="copyright"></div>
</div>
</div>
</body>
</html>

Mobile下的head會(huì)有如下meta設(shè)置：

CSS Code復(fù)制內(nèi)容到剪貼板

<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上也有做了一個(gè) normalize.css 文件，我在做HTML5項(xiàng)目也將其應(yīng)用在normalize中。鏈接如下：
https://github.com/necolas/normalize.css

另外，對(duì)于很多開發(fā)中來說，Template文件同樣是節(jié)省了不少寫重復(fù)代碼的時(shí)間，同時(shí)，又規(guī)范了自己的書寫習(xí)慣。
下面這個(gè)，我覺得非常詳細(xì)了，當(dāng)然有些不必要的東西，可以自己取舍。
https://github.com/h5bp/html5-boilerplate