关于CSSNormalize的文件配置

2020-11-27 来源：汇智旅游网

这篇文章主要介绍了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文件同样是节省了不少写重复代码的时间，同时，又规范了自己的书写习惯。

显示全文

全部栏目

关于CSSNormalize的文件配置