极速快3大小投注技术|最新极速快3开奖结果

網頁前端學習總結

導語 前端工作了一段時間經驗總結,獻給做前端的同學,希望對大家有所幫助。一,編輯器的選擇,推薦webstorm,絕對的神器。不要用dw了,它最驕傲的所見即所得其實沒什么用,因為根本就不準,代碼提示也不人性話,不方
前端工作了一段時間經驗總結,獻給做前端的同學,希望對大家有所幫助。
 
一,編輯器的選擇,推薦webstorm,絕對的神器。不要用dw了,它最驕傲的所見即所得其實沒什么用,因為根本就不準,代碼提示也不人性話,不方便。Webstorm的方便之處(目前用到的),
 
1.可以分屏,左右同時編輯兩個文件,比如左邊編輯html,右邊編輯它的css/js。
 
2.代碼提示很人性話,分級結構也很清洗。
 
3.方便查找,如ctrl+點擊類名,就可自動定位到該css樣式。
 
4.支持自定義模版,這樣快速開始完成一些經常用到的代碼。
 
5.支持個性化主題,字體等。
 
6.強大的插件庫,自己去選吧。
 
7 .ctrl+/,注釋所選區域。
 
sublime編輯器,簡單靈活輕量級,支持代碼自動完成、代碼高亮、快速生成,以及更多好用的插件,也可以配置scss。sublime編輯器配置
 
二,布局。提到布局最頭疼就是瀏覽器兼容性,現在才發現其實很多兼容性其實是很容易避免的,只要做到你對自己的每一句代碼都知道它的意義和作用,還有避免用一些有兼容性的樣式屬性就行了,很多情況都可以不用hack,一樣能實現多瀏覽器兼容。
 
1.  不要用hack,一定有更好的解決辦法。很多情況都是因為代碼結構不夠好才會出現兼容性問題。
 
2. 思考如何用最少的標簽及屬性實現頁面。
 
3.理解結構,表現,行為分離的意義。
 
4. 布局前一定要先分析頁面結構,磨刀不誤砍柴工,分析怎么用更好的辦法實現,理清思路后,再切圖寫代碼。
 
5. 深刻理解類的概念,注重歸類元素,多總結,保持代碼風格(包括前后代碼的空格位置、多少,以及命名風格)嚴格一致并且盡量簡潔。
 
6. 多用組合,少用繼承。
 
7. 命名空間:駝峰命名法用于區別不同單詞,劃線用于表明從屬關系。
 
8.       低權重原則------避免濫用子選擇器(即類似#test span這樣的選擇符)。
 
三、技巧。
 
1. 寫js效果時一定要注意先分析好效果的行為,盡量用最簡單通用性的代碼。分析步驟可以是1.先把要實現的功能一步一步的寫在紙上(即自然語言)2.再根據自然語言翻譯成機器語言,用jquery寫的代碼一定要注意代碼的可移植性、通用性。
 
2. 組織css,推薦使用base、common、page三層,base可以分為兩大部分:css reset(覆蓋掉瀏覽器提供的默認樣式,可以參考:developer.yahoo.com/yui/)和通用原子類。(疑問:如果使用css reset后,那么之前的要求的標簽語義化是否就沒有意義了呢?因為所有語義化的標簽默認樣式都被reset了),不用*{ margin:0; padding:0;}的原因是因為“*”表示所有標簽,其中包含大量生僻標簽和為向前兼容而留下來的淘汰標簽。
 
3. 把多個按鈕放在一張圖定位時,最好兩個按鈕之間隔一個像素,要不然有些版本的chrome可能解析不準確。
 
4. .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } 注意如果用了浮動,一定要清除浮動,深刻理解浮動的作用很重要。 在層里調整文字的垂直位置可以用1.lineheight2.padding。 注意模塊化布局,增加代碼的重用性,盡量只給最里層的內容層設高度,一般如果高度不確定的都設置成自適應,這樣有助于內容拉伸,也便于修改模塊的高度。 大框架,盡量簡單的分,比如左右結構最好就設置成左右,沒必要搞成左中右。 盡量不要在html代碼里插入img,把他設置在結構里,然后用css插入圖片。
 
5. jquery編程習慣可以參考:1.把所有用$()選中的元素保存在前綴為$的js變量里2.每個函數結束都要用return false 結束掉函數。
 
6. 布局前,先構思好整個頁面的結構,一個好的結構要便于維護,加載更快,布局時也更容易。布局時,穩扎穩打,一步步弄好后(既沒有用hack,也沒有兼容性問題了),再布局下一個板塊。 布局一個帶js效果的頁面,要先把效果圖上的頁面效果,完整布局好后,再考慮加動作的事情。并且一定要分析好頁面的結構,以最少的標簽,以及標簽要與所放內容對應來布局。
 
7. jquery代碼一般要用$(document).ready(function(){}確保頁面dom準備好了再進行js操作。 頁面按鈕點擊時邊框變紅,點擊完后邊框變藍可以用outline:none;解決。 有動畫的層最好設置overflow:hidden以免層里面的內容在外層寬高改變時撐出層外。
 
8. 寫js效果時一定要注意先分析好效果的行為,盡量用最簡單通用性的代碼。分析步驟可以是1.先把要實現的功能一步一步的寫在紙上(即自然語言)2.再根據自然語言翻譯成機器語言,用jquery寫的代碼一定要注意代碼的可移植性、通用性。
 
9. a標簽的四種狀態的排序問題,可以用love hate 原則,即l(link)ov(visited)e h(hover)a(active)te,順序寫錯可能出現點擊后hover樣式失效。
 
10. 一般情況下,建議盡量使用class,少用id。
 
11. css編碼風格:多行式和一行式。 多行式:可讀性強,但使行數過多,編輯需要來回拖動滾動條,影響開發速度,增大css文件大小。 一行式:可讀性稍差,有效減小css文件行數,有利于提高開發速度,同時減小css文件大小。 一行式逐漸成為主流。
 
12. css sprite:即把多個甚至所有的圖標都放在一張圖里,然后用背景定位來控制圖標的顯示。 使用難點:圖片如何排列能夠緊湊,同時保證不會影響擴展性。 優點:減少http請求數,減小服務器壓力。 缺點:影響開發速度,大大降低了可維護性。 是否使用取決于網站流量,對于流量不大的網站來說,css sprite帶來的好處并不明顯,而付出的代價是巨大的,不劃算。
 
13. 定義有:hover偽類的樣式時,多定義一個它的hover類,這樣有助于js調用生成current的效果,如定義btn{xxx},btn:hover,btn_hover{xxx}。
 
14. 低權重原則避免濫用子選擇器(即類似#test span這樣的選擇符)。 css的選擇符是有權重的,當不同選擇符的樣式設置有沖突時,會采用權重高的選擇符設置的樣式。 規則:html標簽的權重是1,class的權重是10,id的權重是100.如“div em”的權重是1+1=2,“strong.demo”的權重是10+1=11,“#test.red”的權重是100+10=110. 如果css選擇符權重相同,那么樣式會遵循就近原則,哪個選擇符最后定義,就采用哪個選擇符的樣式,與掛class名的先后順序無關。 為了保證樣式容易被覆蓋,提供可維護性,css選擇符需保證權重盡可能低。
 
15. 如果不確定模塊的上下margin特別穩定,最好不要將它寫到模塊的類里,而是使用類的組合,單獨為上下margin掛用于邊距的原子類(例如mt10、mt20)。模塊最好不要混用margintop和marginbottom,統一使用margintop或marginbottom。
 
16. 拆分模塊技巧:1.模塊與模塊之間盡量不要包含相同的部分,如果有相同部分,應將它們提取出來,拆分成一個獨立的模塊。2.模塊應在保證數量盡可能少的原則下,做到盡可能簡單,以提高重用性。
 
17. 觸發hasLayout一般情況用zoom:1就行了,但當用dhtml的時候,可能失效,這時用position:relative就行了。
 
18. 布局最基本的元素:塊級元素(常見:div,p,form,ul,ol,li)和行內元素(span,strong,em)等。 塊級元素:獨占一行,默認情況下,其寬度自動填滿父元素寬度(即使設置了寬帶也會獨占一行)。 行內元素:不會獨占一行,相鄰的行內元素會排列在同一行里,直到一行排不下,才會換行,其寬度隨元素的內容而變化(沒有上下邊距,只有左右邊距)。 可以用display:inline/block,切換。
 
19. ie6、7不支持display:inline-block,但行內元素可以用此屬性觸發hasLayout(是ie瀏覽器為解析盒模型而設計的一個專有屬性,它的設計初衷是用于塊級元素的,如果觸發行內元素的hasLayout,就會讓行內元素擁有一些塊級元素的特性),從而模擬出inline-block的效果,然后再用*vertical-align控制文字的垂直對齊。但這樣做用hack,所以不推薦。
 
20. 排列地板磚一樣的布局的元素時,盡量用給每個元素用相同的類來實現,如果最左邊的元素間距和右邊的有區別可以給所有元素套一個父層,然后設置其右邊距為負就行了。
 
21. 如果一個類中有些部分會經常變化,我們可以將這個經常變化的部分抽離出來單獨設成一個類,然后用組合來實現最終樣式。
 
22. 可以用(function(){})(),這樣的匿名函數來避免全局變量沖突。讓js不產生沖突,需要避免全局變量的泛濫,合理使用命名空間以及為代碼添加必要的注釋。可以定義一個全局對象,然后用其屬性來定義全局變量,同時結合命名空間(即類似,GLOBAL.A.xx,和GLOBAL.B.xx之類的)。
 
 
 
四、常見問題
 
1. ie只有a支持hover,并且注意a里要有href才行。
 
2. IE6中用了float:left之后導致margin-left雙倍邊距的BUG解決方法加上display:inline
 
3. 如果存在文字在層居中的問題,水平方向可以用text-align代替,垂直方向可以用line-height來控制,如果只是控制上邊距,就用padding-top。這樣可以避免在ie6上的某些不必要的錯誤。
 
4. ajax傳參數時,漢字一定要用encodeURIComponent(string),編碼一下,要不然可能變成亂碼中文在ie6里。
 
5. ie6下select元素會以窗口形式顯示的,這是ie6的一個bug,所以當你設置一層為相對或絕對定位時,select仍然會浮在那個層之上。 解決方法,用一個和那個層同樣大小的iframe放在test下面,select上面,用iframe遮住select。

IE6與CSS樣式兼容問題匯總
 
    最后推薦兩本書吧,上面很多技巧都是來自于里面《css權威指南》、《如何編寫高質量的代碼》,有些是實際工作中自己的一些心得,前輩的指點。還有一句話:“你對所學東西理解深度,決定了你所站的高度。”

《css權威指南》pdf下載
 
http://www.hlwom.icu/ true 網頁前端學習總結 http://www.hlwom.icu/show-28-650-1.html report 4680 前端工作了一段時間經驗總結,獻給做前端的同學,希望對大家有所幫助。一,編輯器的選擇,推薦webstorm,絕對的神器。不要用dw了,它最驕傲的所見即所得其實沒什么用,因為根本就不準,代碼提示也不人性話,不方
TAG:前端 網頁
本站歡迎任何形式的轉載,但請務必注明出處,尊重他人勞動成果
轉載請注明: 文章轉載自:愛思資源網 http://www.hlwom.icu/show-28-650-1.html

[前端插件推薦] Plugin

1 2 3 4
  • jQuery實現逐字逐句顯示插件l-by-l.min.js
  • jQuery帶方向感知的鼠標滑過圖片邊框特效插件
  • jQuery HotKeys監聽鍵盤按下事件keydown插件
  • 響應式無限輪播jQuery旋轉木馬插件
響應式無限輪播jQuery旋轉木馬插件
web前端開發
愛思資源網 Copyright 2012-2014 www.hlwom.icu All rights reserved.(晉ICP備13001436號-1)
极速快3大小投注技术 辽12选5基本走势图 天津时时彩五码基本走势 26选5今晚开奖结果 四川时时在线投注 怎么玩快三才能赚钱 时时彩计划app免费版 体育彩票31选7的走势图 广东好彩1一彩乐乐 广东时时开奖软件 福彩快乐3走势图