作為前端工程師，很多人都有自己的一套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檔案同樣是節省了不少寫重複代碼的時間，同時，又規範了自己的書寫習慣。
以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
