要做RWD網頁切版——你知道，最重要的是結構（HTML）嗎？
更新於 2022/11/10閱讀時間約 1 分鐘
身為一個前端工程師&設計師，不管你屬於前者或後者，我們都相信，你一定都曾經尋找過更快速的方法，去將手中的設計稿，編輯成擁有多種程式碼的RWD響應式網站（Responsive Web Design）。
而這一篇文中，就將對此分享我們所設計的一個全新編輯工具——pxCode。
透過Figma/Sketch將檔案直接輸出，並導入pxCode之後，pxCode就會提供許多獨創的視覺編輯方式，讓甚至沒有任何資訊或設計背景的用戶，都可以輕易上手——（這句話是真的喔）
這篇文中，將會重點介紹網頁切版與編輯過程中，最重要的【結構】（Structure）。
如果你熟悉程式碼的操作，就會知道網頁的結構所對應的，就是HTML。在pxCode裡，和其他編輯工具的共同點就是，所有的編輯調整都建立在結構之上。所以要進入各種細節的調整，都必須先把結構（既HTML）的基礎打好。
.
➤ 從設計檔到RWD響應式網頁：Figma, Sketch 免費轉換成 HTML, CSS, React（不用寫程式）
這樣一來，網頁才能更活躍地，做出流動狀態！
以上這支教學影片，就特別全面地介紹了pxCode的結構介紹。歡迎收看，並提出任何疑惑，我們都會為你解決 ;)
⏱ Timeline:
🔵 0:05 : 結構 Structure
.
🔵 0:07 : 內容介紹 Main content & Attach content
🔵 1:04 : 思考切版 Decide the Layout Answer
🔵 1:19 : 簡化內容 Simplify
🔵 2: 01 : 處理附屬內容 Append
🔵 2: 38 : 結構主要內容 Layout
🔵 3: 18 : 移入附屬內容 Append Back
.
🔵 0:07 : 內容介紹 Main content & Attach content
🔵 1:04 : 思考切版 Decide the Layout Answer
🔵 1:19 : 簡化內容 Simplify
🔵 2: 01 : 處理附屬內容 Append
🔵 2: 38 : 結構主要內容 Layout
🔵 3: 18 : 移入附屬內容 Append Back
.
即將進入廣告，捲動後可繼續閱讀
為什麼會看到廣告
留言0
查看全部
你可能也想看
Google News 追蹤
*合作聲明與警語：
本文係由國泰世華銀行邀稿。
證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。
剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
每年年底我大概都會做一下功課~找尋隔年"確定成長"的個股
然後再跌的時候買進~因為業績掌握度比較高因此握起來也會比較有把握~
分享我年底做的功課~今年因為二寶出生,因此在股票荒廢了三個月~全心全意照顧小孩!
再慢慢步入正軌後也開始慢慢地再回到工作岡位~
今年有個目標,我想好好打文章,將內容做
一年快結束了，照慣例，要提醒大家一下，做CBAS的各位，要跟自己的營業員確認一下，要做KYC的更新喔，這個只要花個十分鐘的東西，會因為你沒有簽核，而導致自己的CBAS部位只能賣，不能買喔。然後可能有的券商會跟你說用線上更新就好，但是有的可能要紙本，但不論怎麼樣，都不能不做更新的。這是金管會
宮崎說，他做動畫的原點，是「對失落的世界的憧憬」。宮崎最迷漫畫的時期，是在深陷升學考試之苦的中學時代。中學階段看起來自由，但同時也是被強迫、壓抑和鬱悶的時期，因此，想要有一個獨處的世界。為了逃避現實，於是他迷上了漫畫和動畫。創作動畫就是在創造「虛構」的世界。「那個世界解放了對僵硬現實感到疲乏的心、消
一、前言
你是否覺得每天要做的事情很多，不管是公司的事，例如各項專案、會議、老闆交辦事項、客戶要求辦理的事，或者是自己日常生活要做的事，買牛奶啦、要洗衣服啦、打掃房間啦、做假期旅遊規劃啦，理想的狀況是，我們每天都能依排程，一件件處理完畢，然而實際的狀況卻是，每天不論何時都會有別人指示的（另一半、老
家裡有個從小就很拗脾氣的手足，只要在學校受同學的委屈，回家必定是抱怨討拍拍，但家父總是勸說：「要做個讓人喜歡的人。」
「做個讓人喜歡的人」，我從來沒有做到過，也從未聽家父講出具體的做法。我只知道，我很我行我素，就是讓人討厭
我的目標是追求卓越，不過只要做到出色 我就十分滿意了。
做到完全還是做到完美？
看似兩種 都是追求最高標準的展現，然而在自我的評價上 卻有著天壤之別。
「完美主義」是一種人格傾向
這種人會給自己定下極高標準、追求毫無瑕疵，
他們用嚴厲的眼光對自我進行評價，
並覺得他人對自己的評斷也會是如此。
習慣「
要做永遠的水腳（幫廚）！
今天出門第一站是領錢，結果經過城隍廟竟然封街了，結果一些車子還硬要闖，看起來好像是外地遊客，只會照著導航走，車子因此都塞在封街路口了。
第二站來到煎餅果子，我真的害怕上完市場再來買，老闆娘已經賣完休息了，因為今天是星期六一個星期人流最多的日子，而且經過車站時，好像全台都流
表弟要做數位行銷報告
故事是這樣子的，本人的表弟最近被作業搞的壓力很大…因為他報告做不出來的話會被當＝＝
昨天跟我吃飯的時候就跟我抱怨，他們教授很機車，一直刁他
而我這個幸災樂禍的表姊還噹他XD，誰叫你平常出席那麼差，難怪人家教授不刁別人要把火力集中你 哈哈
不過我還是有點愛心的，看他那個苦瓜臉
*合作聲明與警語：
本文係由國泰世華銀行邀稿。
證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。
剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
每年年底我大概都會做一下功課~找尋隔年"確定成長"的個股
然後再跌的時候買進~因為業績掌握度比較高因此握起來也會比較有把握~
分享我年底做的功課~今年因為二寶出生,因此在股票荒廢了三個月~全心全意照顧小孩!
再慢慢步入正軌後也開始慢慢地再回到工作岡位~
今年有個目標,我想好好打文章,將內容做
一年快結束了，照慣例，要提醒大家一下，做CBAS的各位，要跟自己的營業員確認一下，要做KYC的更新喔，這個只要花個十分鐘的東西，會因為你沒有簽核，而導致自己的CBAS部位只能賣，不能買喔。然後可能有的券商會跟你說用線上更新就好，但是有的可能要紙本，但不論怎麼樣，都不能不做更新的。這是金管會
宮崎說，他做動畫的原點，是「對失落的世界的憧憬」。宮崎最迷漫畫的時期，是在深陷升學考試之苦的中學時代。中學階段看起來自由，但同時也是被強迫、壓抑和鬱悶的時期，因此，想要有一個獨處的世界。為了逃避現實，於是他迷上了漫畫和動畫。創作動畫就是在創造「虛構」的世界。「那個世界解放了對僵硬現實感到疲乏的心、消
一、前言
你是否覺得每天要做的事情很多，不管是公司的事，例如各項專案、會議、老闆交辦事項、客戶要求辦理的事，或者是自己日常生活要做的事，買牛奶啦、要洗衣服啦、打掃房間啦、做假期旅遊規劃啦，理想的狀況是，我們每天都能依排程，一件件處理完畢，然而實際的狀況卻是，每天不論何時都會有別人指示的（另一半、老
家裡有個從小就很拗脾氣的手足，只要在學校受同學的委屈，回家必定是抱怨討拍拍，但家父總是勸說：「要做個讓人喜歡的人。」
「做個讓人喜歡的人」，我從來沒有做到過，也從未聽家父講出具體的做法。我只知道，我很我行我素，就是讓人討厭
我的目標是追求卓越，不過只要做到出色 我就十分滿意了。
做到完全還是做到完美？
看似兩種 都是追求最高標準的展現，然而在自我的評價上 卻有著天壤之別。
「完美主義」是一種人格傾向
這種人會給自己定下極高標準、追求毫無瑕疵，
他們用嚴厲的眼光對自我進行評價，
並覺得他人對自己的評斷也會是如此。
習慣「
要做永遠的水腳（幫廚）！
今天出門第一站是領錢，結果經過城隍廟竟然封街了，結果一些車子還硬要闖，看起來好像是外地遊客，只會照著導航走，車子因此都塞在封街路口了。
第二站來到煎餅果子，我真的害怕上完市場再來買，老闆娘已經賣完休息了，因為今天是星期六一個星期人流最多的日子，而且經過車站時，好像全台都流
表弟要做數位行銷報告
故事是這樣子的，本人的表弟最近被作業搞的壓力很大…因為他報告做不出來的話會被當＝＝
昨天跟我吃飯的時候就跟我抱怨，他們教授很機車，一直刁他
而我這個幸災樂禍的表姊還噹他XD，誰叫你平常出席那麼差，難怪人家教授不刁別人要把火力集中你 哈哈
不過我還是有點愛心的，看他那個苦瓜臉