中文總教學 2:pxCode 編輯概念

更新於 發佈於 閱讀時間約 3 分鐘
切版前 先決定最終「結構 + 適配」的答案,才開始切版。
對於前端工程師而言,一般在進行網頁開發或程式撰寫的時候,必須先透過潛意識去思考網頁的結構和適配行為,有了雛形的認知後,才會開始撰寫 HTML。
在 pxCode 裡,我們也建議應用相同的概念 —— 在切版前先進行一輪的【思考切版】。當有了結構概念之後,再動手執行,會更有效率!
這一篇文章裡,我們來一起看看 pxCode 基本編輯概念,讓我們在執行切版前,知道必須思考什麼事情?
-

【3種基本的群組分類】

在 pxCode,一共有三種基本群組分類。從上圖可見,由左上至下分別是【直的】(FlexGroup Column)、【橫的】(FlexGroup Row)、以及【絕對定位】(Normal Group)。
一般的設計稿上,都是以 CSS 程式碼去拼湊出整個網頁的結構。不過在 pxCode 裡,切版的概念是反過來的。也就是說,我們需要構想內容元件的佈局,再去編輯成一個完整的 HTML 程式碼
而只需要掌握這三種群組概念,基本上就可以排列相當多樣性的網頁內容。而當我們將設計稿導入 pxCode 之後,就可以開始思考左邊三種群組類別的 CSS 程式碼結構應該是什麼樣子,接著再透過切版工具,去完成響應式動作。
以 pxCode 的使用經驗來看,超過 95% 的網頁都是可以解決的。
-

【不同群組分類的 CSS 概念】

我們來總結一次 pxCode 的模型類別。左邊兩個,分別是直排與橫排的內容元件,即【FlexGroup Column】和【FlexGroup Row】,佔了一般網頁切版中的 80%。而【Group】的絕對定位關係發生的機率則佔了剩下的 20%。
我們這裡就來看看 CSS 的程式碼,可以怎麼去詮釋以上這三種群組類別。
-

【詳細的群組解釋】

除了直排與橫排,還有一個相當重要的群組類別。雖然這一部分之佔了平均 20%,不過卻也是相對比較難以理解的。
以下這張圖,我們可以看得出它相對值和橫,是以前和後的概念所組成。因此,我們在動手切版之前,必須思考清楚知道這幾個重疊的內容元件,應該怎麼前後排列。
其中,在【一般群組】(Group)裡面,也細分了三種內容狀態,分別是【主要子內容】(Main Child)、佔空間和群組內定位的【字內容】(Absolute)、以及不佔空間且自動定位的【附屬子內容】(Attach)。
這三種內容狀態,都有各自的特性和調整模式。為了達到一個最有效的響應式狀態,就需要掌握他們的特性,來執行更完整的思考切版。以下影片,將提供解說:
-
這樣一來,我們就可以更清楚知道這些內容元件在設計稿裡的位置,以方便我們進行導入設計稿之後的思考切版。
下一篇,就讓我們一起來認識如何透過【思考切版】,除了掌握設計稿的內容以外,也大幅度地加速切版時的概念和效率!
-
為什麼會看到廣告
avatar-img
8會員
8內容數
以全中文介紹 pxCode 的內部功能,並進行細節的分段教學。
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
pxCode Team的沙龍 的其他內容
在 pxCode 裡,我們支援 Sketch 和 Figma。導入設計稿進行編輯之後,就會自動產生 HTML 和 CSS 的程式碼。
在 pxCode 裡,我們支援 Sketch 和 Figma。導入設計稿進行編輯之後,就會自動產生 HTML 和 CSS 的程式碼。
你可能也想看
Google News 追蹤
Thumbnail
/ 大家現在出門買東西還會帶錢包嗎 鴨鴨發現自己好像快一個禮拜沒帶錢包出門 還是可以天天買滿買好回家(? 因此為了記錄手機消費跟各種紅利優惠 鴨鴨都會特別注意銀行的App好不好用! 像是介面設計就是會很在意的地方 很多銀行通常會為了要滿足不同客群 會推出很多App讓使用者下載 每次
Thumbnail
這篇文章分享了 CSS Battle 第 38 題的解法,並提供了相關的技術總結。文章內容包括了使用 flex 排版處理、背景漸層的方法處理等相關技術。透過這篇文章可以學習到如何解決 CSS 切版的問題。
Thumbnail
本文介紹了CSS Battle #172 交叉骷髏題目的解答技巧,包括圖層拆解的熟練程度和對小圓拆開處理等技巧。作者分享了100%的解法,鼓勵讀者分享自己的作法與交流。
Thumbnail
這篇文章將介紹如何透過CSS Battle的題目來練習基礎切版技巧。透過一個眼睛圖案的例子,提供了對於 border、outline、border-radius等屬性的調整方式,並分享了一種 100% 的解法。歡迎大家分享自己的作法與作者交流,一起學習成長。
Thumbnail
這篇文章分享了作者對CSS Battle #151題目的解題方式,並強調了圖形解構的重要性。作者提到了基本的排版能力以及實際應用的弧度計算。透過這篇文章,讀者可以學習到CSS切版的技巧,同時也可以分享自己的作法,進行交流討論。
Thumbnail
本篇文章分享了前端工程師在 CSS Battle #166 的解題方式,藉由使用 flex 來進行排版,並提供了相關的技術總結。歡迎一起來學習或練習基礎切版的朋友們和作者互動。
Thumbnail
這篇文章介紹了CSS Battle每週切版#107的解題方法。它深入講解了使用grid來處理圖案的方法,同時介紹了圖層堆疊、border-radius和z-index的使用。文章中還分享了使用position: relative;調整位置的技巧。本篇文章是前端工程師們進行基礎切版學習和練習的好材料。
Thumbnail
這是一篇關於CSS Battle系列的文章,介紹瞭如何通過CSS來處理特定圖案的切版與前端工程技術。文章分享了使用grid和radial-gradient()方法來處理特定圖案的解法以及相關技術總結。
Thumbnail
本篇文章分享了 CSS Battle 的題目 #160 的解法,並講解了對於前端工程師基礎切版的重要性和技術總結。
Thumbnail
是的,身為前端工程師的基本功!還是需要時不時拿出來打磨一番! 很多大公司的切版與前端是分開的,但不能因為碰不到就不去理解,假如要系統性的調整樣式,那麼你就一定要懂基礎,就好像你要調整微前端的架構,總不能連包板工具的設定都不會吧! 回到正題,這系列文章每個禮拜三都會更新一題CSS Battle的題
Thumbnail
是的,身為前端工程師的基本功! 還是需要時不時拿出來打磨一番,這系列文章每個禮拜三都會更新一題CSS Battle的題目,歡迎與我交流喔!
Thumbnail
/ 大家現在出門買東西還會帶錢包嗎 鴨鴨發現自己好像快一個禮拜沒帶錢包出門 還是可以天天買滿買好回家(? 因此為了記錄手機消費跟各種紅利優惠 鴨鴨都會特別注意銀行的App好不好用! 像是介面設計就是會很在意的地方 很多銀行通常會為了要滿足不同客群 會推出很多App讓使用者下載 每次
Thumbnail
這篇文章分享了 CSS Battle 第 38 題的解法,並提供了相關的技術總結。文章內容包括了使用 flex 排版處理、背景漸層的方法處理等相關技術。透過這篇文章可以學習到如何解決 CSS 切版的問題。
Thumbnail
本文介紹了CSS Battle #172 交叉骷髏題目的解答技巧,包括圖層拆解的熟練程度和對小圓拆開處理等技巧。作者分享了100%的解法,鼓勵讀者分享自己的作法與交流。
Thumbnail
這篇文章將介紹如何透過CSS Battle的題目來練習基礎切版技巧。透過一個眼睛圖案的例子,提供了對於 border、outline、border-radius等屬性的調整方式,並分享了一種 100% 的解法。歡迎大家分享自己的作法與作者交流,一起學習成長。
Thumbnail
這篇文章分享了作者對CSS Battle #151題目的解題方式,並強調了圖形解構的重要性。作者提到了基本的排版能力以及實際應用的弧度計算。透過這篇文章,讀者可以學習到CSS切版的技巧,同時也可以分享自己的作法,進行交流討論。
Thumbnail
本篇文章分享了前端工程師在 CSS Battle #166 的解題方式,藉由使用 flex 來進行排版,並提供了相關的技術總結。歡迎一起來學習或練習基礎切版的朋友們和作者互動。
Thumbnail
這篇文章介紹了CSS Battle每週切版#107的解題方法。它深入講解了使用grid來處理圖案的方法,同時介紹了圖層堆疊、border-radius和z-index的使用。文章中還分享了使用position: relative;調整位置的技巧。本篇文章是前端工程師們進行基礎切版學習和練習的好材料。
Thumbnail
這是一篇關於CSS Battle系列的文章,介紹瞭如何通過CSS來處理特定圖案的切版與前端工程技術。文章分享了使用grid和radial-gradient()方法來處理特定圖案的解法以及相關技術總結。
Thumbnail
本篇文章分享了 CSS Battle 的題目 #160 的解法,並講解了對於前端工程師基礎切版的重要性和技術總結。
Thumbnail
是的,身為前端工程師的基本功!還是需要時不時拿出來打磨一番! 很多大公司的切版與前端是分開的,但不能因為碰不到就不去理解,假如要系統性的調整樣式,那麼你就一定要懂基礎,就好像你要調整微前端的架構,總不能連包板工具的設定都不會吧! 回到正題,這系列文章每個禮拜三都會更新一題CSS Battle的題
Thumbnail
是的,身為前端工程師的基本功! 還是需要時不時拿出來打磨一番,這系列文章每個禮拜三都會更新一題CSS Battle的題目,歡迎與我交流喔!