CSS Normalize（全局設置）

時間 2019-11-10

標籤 css normalize 全局設置欄目 CSS 简体版

原文原文鏈接

做爲前端工程師，不少人都有本身的一套CSS Normalize文件，這樣能省掉開發過程當中的很多麻煩，提升工做效率。在前人的基礎上，我總結了本身的CSS Normalize文件，目前基本上每一個項目都有在使用中：javascript

/*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）
裏面的文件夾大體分爲以下：css

1）images: 存放項目中的圖片（裏面又會根據項目模塊進行文件夾劃分）
2）css: 存放css文件（裏面會有一個base.css文件，預置上文中的css normalize）
3）js：存放js文件，裏面還有一個vender的文件夾，存放插件js（例如：jQuery庫），外面有main.js（主要js文件），plugins.js（插件引用的js）

根目錄下，爲index.html文件
主要爲以下文件：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-->
<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設置：前端

<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.csshtml5

另外，對於不少開發中來講，Template文件一樣是節省了很多寫重複代碼的時間，同時，又規範了本身的書寫習慣。
下面這個，我以爲很是詳細了，固然有些沒必要要的東西，能夠本身取捨。
https://github.com/h5bp/html5-boilerplatejava

以前用到標題「CSS Reset"確實已通過時，Normalize標準化是如今的潮流。關於二者的區別可見以下文章連接：
http://www.zhihu.com/question/20094066jquery

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。