在一開始學前端的時候,都是從模仿別人的**開始做起。基本上寫的都是純前端介面,也就是沒有和後台進行互動的介面。雖然現在已經能夠熟練的寫需求裡面各種奇奇怪怪的html文件結構,js、jquery動態元素也能寫的不錯(當然了還是需要繼續學習的),但是到最近真正開始接觸大專案,前端後台分工合作的時候才發現乙個很重要的問題。
我發現自己之前在寫純前端介面的時候有乙個非常不好的習慣,就是特別愛用position定位(relative、absolute),relative在專案裡面還是經常可以用到的,主要用法就是使某個盒子在整個window介面或者是父盒子中居中。但是absolute就很致命了,尤其是像下面這種用法:
div然後通過瀏覽器本身的除錯工具(快捷鍵f12),在「檢視器」(我一般用的是火狐瀏覽器)視窗旁邊的「規則」去修改top、left值(little tips:單擊top等定位屬性後面的畫素值然後按↑就可以調整到自己想要的位置)
這種做法雖然可以在初級階段的時候非常容易的得到自己想要的位置,讓介面看起來和原介面沒有什麼區別,但是一到需要和後台互動的時候,造成的麻煩就非常大了。
這兩天改專案下來,發現後台有乙個經常的需求就是:對於介面中**差不多的盒子(就是前端直接通過複製貼上**寫出來的盒子),只需要用for迴圈來迴圈第乙個盒子。但是如果使用position來具體定位的話,那麼這個需求就沒辦法實現。因為如果每個盒子都有自己特定的定位,迴圈起來的話必然就只有重疊的後果。這也是我終於明白為什麼那麼多大公司的**介面裡面能夠看到的position非常少這一現象。
解決這個問題的辦法就是:棄position用float(主要就是用float,position視裡面的情況而定要不要用),如果為了美觀需要每乙個盒子之間有一定間隔的話,最多就加上margin-left或者是padding-left之類的,當然了如果有多行的話不要忘記再加乙個margin-bottm或者padding-bottom
然後目前為止我碰到的這種要求用for迴圈迴圈第乙個盒子的情況分為兩種:
1.橫向
2.縱向
不管是橫向還是縱向的排版,都不要方,關鍵點就在於在外面套乙個大的父盒子來限制它的寬度,float是必須要寫的,當你定義你的父盒子寬度之後,裡面的盒子發現外面盒子的寬度不夠的時候自然就會向下排版了,這樣就達到了縱向的效果
專案實踐經驗總結 (1)
media screen and min width 768px media screen and min width 992px media screen and min width 1200 注意下順序,如果你把 media min width 768px 寫在了下面那麼很悲劇,media sc...
專案經驗1 軟體的開發過程
剛開始進入軟體行業的時候,對軟體開發過程單純的認為是寫寫 做做除錯 現在覺得這樣的認識只能說明你終究還是個新手,軟體開發過程遠遠不只是寫寫 這樣簡單,過程可能比你想象中的複雜。不會寫文件的程式設計師不是好程式設計師,文件的編寫也是程式設計師必備技能,甚至可能比寫 的能力還重要。文件為什麼很重要,和客...
專案經驗小結
專案內容 專案目的 傳統的日誌,記錄的是系統訊息流,控制流或資料流方面的資訊,尤其關注出錯狀態。從而為我們分析問題提供現場,得以知道問題發生的前因後果。分析日誌之後,可以知道整個故事的情節 時間 地點 事件等等。但我們不太容易從海量的日誌中提取重要的系統效能指標或引數,以實現垂直衡量系統效能和評估系...