開發前端專案的一點小心得

2022-04-06 05:53:37 字數 1470 閱讀 8521

對於需求的分析

分析頁面的組成對頁面進行整體的布局(一般可分為頭,肚,尾(上下))。

檢視系統內是否有相似的頁面的進行參考。(盡量參考已有頁面進行開發(**復用實現快速開發))。

2. 開始開發操作

1.  看頁面的哪些模組是否需要多次復用,如果需要進行元件的封裝。

2.  可以使用一些封裝好了的元件包實現快速的開發。

3.  對於css樣式的設計

1.  這個是可以參考其他模組的顏色 ,距離.

2.  css層疊樣式表

1.內聯.內嵌.外部樣式檔案(內聯》內嵌》外部樣式檔案)

3.  css選擇器

1.元素選擇器,類選擇器,id選擇器。設定全域性的樣式(body)

4.  cssposition(定位與布局)

position的五個屬性:

static:元素的預設值,沒有定位,遵循正常的文件流物件,靜態定位的元素不會受到top,bottom,left,right影響。

fixed定位:元素的位置相對於瀏覽器視窗固定位置,即使視窗是滾動的它也不會移動。

relative定位:相對定位元素的定位是相對其正常位置,移動相對定位元素,但它原本所佔的空間不會改變,相對定位元素經常被用來作為絕對定位元素的容器塊。

absolute:絕對定位元素相對於最近的已定位元素。

sticky定位:粘性定位。

z-index:重疊元素。

5.  css邊框

1.border-style:none(無框) dotted(點線邊框)solid(實線) dashed(虛線)    2.邊框寬度:border-width

3.邊框顏色:border-color

6. css背景

背景顏色:background-color

背景:background-image

背景影象-定位:background-position

7.  字型,文字屬性

顏色:color

文字對其方式:text-align

文字修飾:text-decoration

文字轉換:text-transform

文字縮排:text-index

文字行高:line-height

文字間距:word-spacing(單詞間距)

字型設定:font-family

字型樣式:font-style

8.  css**

**邊框:border

**寬度:table

高度:th,td

**文字對齊:text-align:文字對齊

vertical-align:垂直對齊

4.  總結

我個人覺得vue最核心的設計理念,就是把乙個看起來很完整的頁面,分散到了每乙個元件,這個元件可能大到乙個頁面,hello.vue,也可能小到乙個按鈕,最終我們看到的頁面,是這一群元件的堆砌的結果,這樣做的一大好處就是,每乙個元件都可以單獨進行與資料庫和使用者的互動,開發更為清晰

github的一點小心得

很多朋友在github上建立了 倉庫後,急急忙忙的就在本地按照網上的說法,如下 cd dir git init git remote add git add git commit 但是這樣可能就會出現各種蛋疼的問題。最後發現有個更簡單的方法。在github上建立好 倉庫及專案之後,配置好git,然後...

寫部落格的一點小心得

寫部落格大概也有乙個多月了吧 自我感覺還是不錯的 前面幾篇中寫的最多的還是cf上和多校的題解,涉及到的知識面比較廣.我寫部落格的原則是每一篇都要是原創,並且要寫出自己寫題的感悟.如果題解只是一兩句帶過去說是水題或者模板題,那麼還不如不寫.就是說我寫的題都是神題 在網上看別人部落格的題解時經常會發現大...

質量保障一點小小心得

分為測試前 測試中 和測試後吧 測試前 最好讓一位同學專門owner一條業務線 一定要參與開發的設計評審 有些改動,讓開發列一下測試範圍,可以看看是不是測試用例覆蓋不到的點 測試用例一定要寫,這個時間不能少 測試中 先主流程走一遍,提前暴露風險,再開始執行用例 開發解決完bug,一定要多問一句,這個...