成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS Normalize(全局設置)

MorePainMoreGain / 2472人閱讀

摘要:作為前端工程師,很多人都有自己的一套文件,這樣能省掉開發(fā)過程中的不少麻煩,提高工作效率。鏈接如下另外,對于很多開發(fā)中來說,文件同樣是節(jié)省了不少寫重復代碼的時間,同時,又規(guī)范了自己的書寫習慣。關于兩者的區(qū)別可見如下文章鏈接

作為前端工程師,很多人都有自己的一套CSS Normalize文件,這樣能省掉開發(fā)過程中的不少麻煩,提高工作效率。在前人的基礎上,我總結(jié)了自己的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數(shù)值除以10,然后換上em作為單位*/
    /*min-width:980px;*/
    font-size:13px;
}

a,img{border:none;text-decoration:none;}
a{blr:expression(this.onFocus=this.blur());} /*去掉a標簽的虛線框,避免出現(xiàn)奇怪的選中區(qū)域*/
/*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: 存放項目中的圖片(里面又會根據(jù)項目模塊進行文件夾劃分)

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

另外,對于很多開發(fā)中來說,Template文件同樣是節(jié)省了不少寫重復代碼的時間,同時,又規(guī)范了自己的書寫習慣。
下面這個,我覺得非常詳細了,當然有些不必要的東西,可以自己取舍。
https://github.com/h5bp/html5-boilerplate

之前用到標題“CSS Reset"確實已經(jīng)過時,Normalize標準化是現(xiàn)在的潮流。關于兩者的區(qū)別可見如下文章鏈接:
http://www.zhihu.com/question/20094066

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/49521.html

相關文章

  • 關于CSS Reset 那些事(二)之 Normalize.css 源碼解讀

    摘要:前言上一章節(jié)介紹了的歷史,最后對做了簡單的了解,所以從這節(jié)開始對源碼進行注釋翻譯與解讀,盡可能從最根本性的問題了解它在幫我們做什么回顧關于那些事一之歷史演變與源碼解讀前面講到的分模塊解讀,就是先黏貼一段源碼,然后根據(jù)官方提供的注釋進行翻譯整 前言 上一章節(jié)介紹了CSS Reset的歷史,最后對Normalize.css做了簡單的了解,所以從這節(jié)開始對源碼進行注釋翻譯與解讀,盡可能從最...

    qujian 評論0 收藏0
  • 關于CSS Reset 那些事(二)之 Normalize.css 源碼解讀

    摘要:前言上一章節(jié)介紹了的歷史,最后對做了簡單的了解,所以從這節(jié)開始對源碼進行注釋翻譯與解讀,盡可能從最根本性的問題了解它在幫我們做什么回顧關于那些事一之歷史演變與源碼解讀前面講到的分模塊解讀,就是先黏貼一段源碼,然后根據(jù)官方提供的注釋進行翻譯整 前言 上一章節(jié)介紹了CSS Reset的歷史,最后對Normalize.css做了簡單的了解,所以從這節(jié)開始對源碼進行注釋翻譯與解讀,盡可能從最...

    Code4App 評論0 收藏0
  • 關于CSS Reset 那些事(四)之 構(gòu)架CSS基礎樣式庫

    摘要:現(xiàn)在回到我們這一章節(jié)的標題,將它做下補充關于那些事四之基于構(gòu)架基礎樣式庫基礎庫構(gòu)思為什么要做基礎庫我上一章節(jié)的末尾拋出了幾個問題假設你要做一個游戲單頁面,網(wǎng)頁上并不存在表單內(nèi)容,那么你就要移除一些冗余的代碼,開始自定義樣式來滿足自己的需求。 前言 先來回顧一下前幾章節(jié),我們都說了哪些內(nèi)容: CSS Reset 歷史 與 Normalize.css 介紹 Normalize.css...

    mj 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<