当前位置：Gxlcms > css > 关于CSSNormalize的文件配置

关于CSSNormalize的文件配置

时间：2021-07-01 10:21:17 帮助过：60人阅读

这篇文章主要介绍了CSS Normalize文件配置示例,对全局项目进行设置,需要的朋友可以参考下

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

  1. /*Normalize*/
  2. *{margin:0;padding:0;list-style-type:none;}   
  3. *html,*html body /* 修正IE6振动bug */{   
  4.     background-image:url(about:blank);   
  5.     background-attachment:fixed;   
  6. }   
  7. body{   
  8.     font-family:"Microsoft Yahei","Hiragino Sans GB" ,Arial,Lucida,Verdana,SimSun,Helvetica,sans-serif;   
  9.     /*font-size : 62.5%; px数值除以10，然后换上em作为单位*/
  10.     /*min-width:980px;*/
  11.     font-size:13px;   
  12. }   
  13. a,img{border:none;text-decoration:none;}   
  14. a{blr:expression(this.onFocus=this.blur());} /*去掉a标签的虚线框，避免出现奇怪的选中区域*/
  15. /*a:active {test:expression(target="_blank");}*/
  16. :focus{outline:0;}   
  17. label{cursor:pointer;}   
  18. img{vertical-align:middle;}   
  19. table{empty-cells:show;border-collapse:collapse;border-spacing:0;}   
  20. h1{font-size:1.6em;}h2,h3,h4{font-size:1.4em;}h5,h6{font-size:1.2em;}   
  21. input{border:none;}   
  22. textarea{overflow:scroll;}   
  23. a, input,textarea, .hover-delay {   
  24.     font-family:"Microsoft Yahei","Hiragino Sans GB", Arial,Lucida,Verdana,SimSun,Helvetica,sans-serif;   
  25.     -webkit-transition: all 0.3s ease-out;   
  26.     -moz-transition: all 0.3s ease-out;   
  27.     -ms-transition: all 0.3s ease-out;   
  28.     -o-transition: all 0.3s ease-out;   
  29.     transition: all 0.3s ease-out;   
  30. }   
  31. input.none-radius{   
  32.     border-radius:0;   
  33.     -moz-border-radius:0;   
  34.     -webkit-border-radius:0;   
  35. }   
  36. input::-ms-clear{ display:none;}  //去掉输入框的叉叉   
  37. .clear{clear:both;}   
  38. .txt-indent{text-indent:-999px;overflow:hidden;}   
  39. input[type=text],input[type=tel],input[type=email]{   
  40. -webkit-appearance: none;   
  41.  box-shadow: none;}   
  42. /*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文件
主要为如下文件：

  1. <!doctype html>   
  2. <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->   
  3. <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->   
  4. <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->   
  5. <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->   
  6. <head lang="zh-CN">   
  7.     <meta charset="utf-8" />   
  8.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />   
  9.     <title>xxx</title>   
  10.     <meta name="keywords" content="xxx" />   
  11.     <meta name="description" content="xxx" />   
  12.     <link rel="shortcut icon" href="images/favicon.ico" /> <!-- IE address前ico图标 -->   
  13.     <link rel="stylesheet" href="css/normalize.css" /> <!-- reset style -->   
  14.     <link rel="stylesheet" href="css/base.css" /> <!-- basic style -->   
  15.     <script src="js/vendor/jquery-1.10.2.min.js"></script> <!-- jQuery library -->   
  16.     <script src="js/vendor/jquery-ui-1.11.1.js"></script> <!-- jQuery UI library -->   
  17.     <script src="js/main.js"></script> <!-- main js -->   
  18.     <script src="js/plugins.js"></script> <!-- plugins  -->   
  19.     <!--[if (gte IE 6)&(lte IE 8)]>     
  20.       <script type="text/javascript" src="js/vendor/selectivizr.js"></script>   
  21.       <noscript><link rel="stylesheet" href="[fallback css]" /></noscript>   
  22.     <![endif]--> <!--/*修正CSS3在IE6-8*/-->   
  23.     <!--[if lt IE 9]>   
  24.        <script src="js/html5.js"></script>   
  25.     <![endif]-->   
  26. </head>   
  27. <body>   
  28. <!--wrapper-->   
  29. <p class="wrapper">   
  30.     <!--header-->   
  31.     <p class="header">   
  32.         <!--logo-->   
  33.         <p class="logo"></p>   
  34.         <!--logo end-->   
  35.         <!--navigation-->   
  36.         <p class="nav">   
  37.         </p>   
  38.         <!--navigation  end-->   
  39.         <!--banner-->   
  40.         <p class="banner">   
  41.         </p>   
  42.         <!--banner-->   
  43.     </p>   
  44.     <!--header end-->   
  45.     <!--container-->   
  46.     <p class="container">   
  47.         <!--news-->   
  48.         <p class="news">   
  49.         </p>   
  50.         <!--news  end-->   
  51.         <!--sidebar banner-->   
  52.         <p class="sidebar">   
  53.         </p>   
  54.         <!--sidebar banner end-->   
  55.         <!--hot top9-->   
  56.         <p class="hot">   
  57.         </p>   
  58.         <!--hot top9-->   
  59.     </p>   
  60.     <!--container end-->   
  61.     <!--footer-->   
  62.     <p class="footer">   
  63.         <!--about us-->   
  64.         <p class="about-us"></p>   
  65.         <!--webchat-->   
  66.         <p class="webchat"></p>   
  67.         <!--copyright-->   
  68.         <p class="copyright"></p>   
  69.     </p>   
  70.     <!--footer end-->   
  71. </p>   
  72. <!--wrapper end-->   
  73. </body>   
  74. </html>

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

  1. <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />   
  2. <meta name="apple-mobile-web-app-capable" content="yes" />   
  3. <meta name="apple-touch-fullscreen" content="yes" />   
  4. <meta name="apple-mobile-web-app-status-bar-style" content="black" />

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

CSS的变量variable的解析

CSS的positon属性的分析

以上就是关于CSS Normalize的文件配置的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！