摘要:作為前端工程師,很多人都有自己的一套文件,這樣能省掉開發過程中的不少麻煩,提高工作效率。鏈接如下另外,對于很多開發中來說,文件同樣是節省了不少寫重復代碼的時間,同時,又規范了自己的書寫習慣。關于兩者的區別可見如下文章鏈接
作為前端工程師,很多人都有自己的一套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文件
主要為如下文件:
xxx
Mobile下的head會有如下meta設置:
值得一提的是,在github上也有做了一個 normalize.css 文件,我在做HTML5項目也將其應用在normalize中。 鏈接如下:
https://github.com/necolas/normalize.css
另外,對于很多開發中來說,Template文件同樣是節省了不少寫重復代碼的時間,同時,又規范了自己的書寫習慣。
下面這個,我覺得非常詳細了,當然有些不必要的東西,可以自己取舍。
https://github.com/h5bp/html5-boilerplate
之前用到標題“CSS Reset"確實已經過時,Normalize標準化是現在的潮流。關于兩者的區別可見如下文章鏈接:
http://www.zhihu.com/question/20094066
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/49521.html
摘要:前言上一章節介紹了的歷史,最后對做了簡單的了解,所以從這節開始對源碼進行注釋翻譯與解讀,盡可能從最根本性的問題了解它在幫我們做什么回顧關于那些事一之歷史演變與源碼解讀前面講到的分模塊解讀,就是先黏貼一段源碼,然后根據官方提供的注釋進行翻譯整 前言 上一章節介紹了CSS Reset的歷史,最后對Normalize.css做了簡單的了解,所以從這節開始對源碼進行注釋翻譯與解讀,盡可能從最...
摘要:前言上一章節介紹了的歷史,最后對做了簡單的了解,所以從這節開始對源碼進行注釋翻譯與解讀,盡可能從最根本性的問題了解它在幫我們做什么回顧關于那些事一之歷史演變與源碼解讀前面講到的分模塊解讀,就是先黏貼一段源碼,然后根據官方提供的注釋進行翻譯整 前言 上一章節介紹了CSS Reset的歷史,最后對Normalize.css做了簡單的了解,所以從這節開始對源碼進行注釋翻譯與解讀,盡可能從最...
摘要:現在回到我們這一章節的標題,將它做下補充關于那些事四之基于構架基礎樣式庫基礎庫構思為什么要做基礎庫我上一章節的末尾拋出了幾個問題假設你要做一個游戲單頁面,網頁上并不存在表單內容,那么你就要移除一些冗余的代碼,開始自定義樣式來滿足自己的需求。 前言 先來回顧一下前幾章節,我們都說了哪些內容: CSS Reset 歷史 與 Normalize.css 介紹 Normalize.css...
閱讀 1369·2021-10-13 09:39
閱讀 1333·2021-09-23 11:22
閱讀 2243·2019-08-30 14:05
閱讀 1059·2019-08-29 17:03
閱讀 771·2019-08-29 16:24
閱讀 2227·2019-08-29 13:51
閱讀 656·2019-08-29 13:00
閱讀 1291·2019-08-29 11:24