溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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;}
h2{font-size:1.6em;}h3,h4,h5{font-size:1.4em;}h6,h7{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文件
主要為如下文件：
CSS Code復制內容到剪貼板
<!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" />
看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
