這篇文章主要介紹了CSS Normalize文件配置範例,對全域專案進行設定,需要的朋友可以參考下
作為前端工程師，很多人都有自己的一套CSS Normalize文件，這樣能省掉開發過程中的不少麻煩，提高工作效率。在前人的基礎上，我總結了自己的CSS Normalize文件，目前基本上每個項目都有在使用中：
/*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-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檔案
主要為如下文件：
<!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-->
<p class="wrapper">
<!--header-->
<p class="header">
<!--logo-->
<p class="logo"></p>
<!--logo end-->
<!--navigation-->
<p class="nav">
</p>
<!--navigation end-->
<!--banner-->
<p class="banner">
</p>
<!--banner-->
</p>
<!--header end-->
<!--container-->
<p class="container">
<!--news-->
<p class="news">
</p>
<!--news end-->
<!--sidebar banner-->
<p class="sidebar">
</p>
<!--sidebar banner end-->
<!--hot top9-->
<p class="hot">
</p>
<!--hot top9-->
</p>
<!--container end-->
<!--footer-->
<p class="footer">
<!--about us-->
<p class="about-us"></p>
<!--webchat-->
<p class="webchat"></p>
<!--copyright-->
<p class="copyright"></p>
</p>
<!--footer end-->
</p>
<!--wrapper end-->
</body>
</html>登入後複製
Mobile下的head會有如下meta設定：
<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中。
另外，對於許多開發中來說，Template檔案同樣是節省了不少寫重複程式碼的時間，同時，又規範了自己的書寫習慣。
以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！
相關推薦：
CSS的變數variable的解析
#CSS的positon屬性的分析
#
以上是關於CSS Normalize的檔案配置的詳細內容。更多資訊請關注PHP中文網其他相關文章！
