手把手帶你打造自己的UI樣式庫(終章)

2021-10-08 12:53:56 字數 1268 閱讀 7821

頁面基礎模型

頁面的基礎模型部分介紹的是在瀏覽器中渲染乙個頁面時用到的建模方式。在這個模型中,它會把每個元素涉及成乙個帶有尺寸、邊距的盒子(盒模型);還設計了每個盒子排布的方式(定位);同時這些盒子還可以有層疊關係,就要處理他們之間的疊加方式(層級);此外,這個模型中還包含了頁面的渲染方式(頁面渲染機制)。這幾種模型裡都包含了什麼具體內容,可以參考下圖裡的詳細劃分:

css 基礎

css 基礎部分講的是 css 語言的特性,包括 css 選擇器、樣式優先順序和計量單位。同時,這部分內容裡還包含我們怎麼去使用 css 語言,也就是 css 的**規範。css 基礎部分的知識點總結如下:

css 高階

css 高階裡講的將是一些對 css 語言的應用方式和技巧。這部分內容包含了多種螢幕適配方案,彈性布局的用法,盒模型的轉換、過渡和動畫效果以及其他一些比較雜的 css 技巧。這部分內容的知識點如下:

專案的整合

專案的整合並不是重點,但為了做出乙個完整的專案,還是要對這塊內容有所了解。這部分內容主要是對 node.js 和 npm 的使用。這部分內容比較少,具體涉及到的知識點如下:

通常我們會在邏輯語言裡講**的分層,可以按著不同的方式進行劃分,但在 css 裡也可以進行簡單的分層。可以把樣式按基礎樣式、基礎元件、業務元件和頁面樣式這幾層進行劃分,

第二個可以思考的問題就是我們在做元件或者頁面的結構設計時,要對頁面的區域有個規劃,不要一味的進行結構的堆疊。要實現整體結構,會把頁面分成頭部導航、內容區、尾部選單和遮罩層這四部分區域,而在內容區里又會使用 panel 面板元件把每個區域進行分割,甚至當 panel 面板裡的內容比較多時,還會進一步的分割。這樣做的好處一方面是可以清晰的看出每個部分的結構,另一方面是每一塊內容都有乙個邊界,即能對生效的空間進行限定,還可以通過改變容器上的類來控制裡面元件對應的狀態。

最後要思考的是我們這個框架怎麼擴充套件。單純的增加樣式元件已經不算挑戰了,但我們還可以做的是給樣式新增上靈魂,也就是加入 js 的邏輯,把它變成一套 js 元件庫。這個時候就又要選擇方向了,要選擇乙個 js 技術棧進行實現,可以是 vue、react 或者原生 js,做這個選擇的時候就要看自己的業務都是用哪個技術棧來實現的。

手把手帶你實現React的Modal元件

眾所周知,產品經理有三寶 彈窗 浮層和引導。身為乙個程式設計師,尤其是前端工程師不得不面向產品程式設計,由於原型圖上滿滿的彈窗,逼迫我們不得不封裝乙個彈窗元件來應付產品的需求 1 通過傳入乙個visible來控制彈框的顯示與隱藏,資料型別為boolean 2 通過傳入乙個title來設定彈框的標題,...

手把手帶你學習C 的運算子

目錄 作用 用於執行 的運算 運算子型別 作用算術運算子 用於處理四則運算 賦值運算子 用於將表示式的值賦給變數 比較運算子 用於表示式的比較,並返回乙個真值或假值 邏輯運算子 用於根據表示式的值返回真值或假值 運算子術語 示例結果 正號 33 負號 3 3 加 10 515 減10 55 乘10 ...

Python保姆式手把手帶你掌握異常的捕獲和處理

目錄 出現異常而報錯再正常不過了,但為什麼要處理異常?由於異常的存在,執行時會出現一大堆的紅色字型提示,對於程式設計師還好,見紅色報錯見多了習慣了,但如果你開發出來的東西要給別人看,那麼不懂 的人就會一臉懵逼,對產品的印象都不太好了。比如我們經常簡單網頁丟失的情況,其實是就是網頁 執行時發生了異常,...