頁面制作（切圖）第一章

hightopo 發布于2019-08-01 16:59 / 1324人閱讀

摘要：首先要知道什么叫頁面制作切圖頁面制作切圖就是，前端工程師通過和還原設計師的設計稿。每個大的行再按照這種方式拆成內部若干行或者左右若干塊如下圖拆分完之后對于不同塊根據寬度高度特性，選擇使用塊級元素或者內聯元素來表示。

CSS+HTML實戰

經過前兩篇文章的基礎學習后，從本章開始我們要開始實戰學習。

1. 首先要知道什么叫頁面制作（切圖）

頁面制作（切圖）就是，web前端工程師通過HTML和CSS還原UI設計師的設計稿。
目前各公司UI設計師常用的設計工具有Photoshop、Sketch

下面這是我們公司設計師通過Sketch制作的設計稿

可以通過這款連接設計師和前端工程師（web前端、android、ios工程師）的標注工具，進一步了解

知道了切圖是什么之后我們要關注幾個CSS（css長度單位區別）px、rem、em
對于pc端頁面常用單位px
對于移動端常用單位rem

如何將設計稿中元素塊的尺寸和CSS中的尺寸
對于pc端可以完全通過px尺寸是1:1對應的，就是設計稿中某個模塊的width是100px那么就可以設置html中對應的節點寬度為100px
對于移動端則有很大適配問題可以讀一下這篇文章加以理解

2. 拆分設計稿結構搭建HTML框架

對于最基本的長度單位有了了解之后，下面需要做的就是拆分設計稿搭建HTML框架。

以行來拆分設計稿為若干行（以設計稿左右兩端為邊界）用塊級元素構建。

每個大的行再按照這種方式拆成內部若干行、或者左右若干塊如下圖：

拆分完ui之后對于不同塊根據寬度、高度特性，選擇使用塊級元素或者內聯元素來表示。

3. 給HTML節點添加CSS樣式（設計稿還原）

塊節點已經創建，可以通過CSS來還原設計稿中的每個塊結構的實際樣式。

GPU云服務器云服務器云計算第一章頁面制作 html頁面制作手機網站頁面制作

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50875.html

頁面制作（切圖）第一章

摘要：首先要知道什么叫頁面制作切圖頁面制作切圖就是，前端工程師通過和還原設計師的設計稿。每個大的行再按照這種方式拆成內部若干行或者左右若干塊如下圖拆分完之后對于不同塊根據寬度高度特性，選擇使用塊級元素或者內聯元素來表示。 CSS+HTML實戰經過前兩篇文章的基礎學習后，從本章開始我們要開始實戰學習。 1. 首先要知道什么叫頁面制作（切圖）頁面制作（切圖）就是，web前端工程師通過HTML...

felix0913 2019-08-29 12:43 評論0 收藏0
切圖崽的自我修養－合理組織CSS結構

摘要：前言不要再叫我切圖崽，我很生氣，這樣很不禮貌，請叫我前端工程師從方面來說，前端工程師和切圖崽的區別，并不是指寫單條技巧的高低，甚至很多工程師在一些的奇技淫巧都比不上切圖崽那切圖崽到底和工程師之間的差別是什么呢差別是年工作經驗視野，是格局，是前言不要再叫我切圖崽，我很生氣，這樣很不禮貌，請叫我前！端！工！程！師！從css方面來說，前端工程師和切圖崽的區別，并不是指寫單條css技巧的...

cangck_X 2019-08-29 10:57 評論0 收藏0
非常實用的在線工具網站清單

摘要：文章目錄在線圖片壓縮在線壓縮最好用的切圖工具在線工具一鍵摳圖免費字體免費素材圖片和視頻中國風配色網站免費壁紙免費短連接在線在線代碼編輯在線流程圖思維導圖在線圖片壓縮傳送門在線圖片壓縮網站已經優化超過十億張圖片，支持，，等格式的圖片的壓縮。 ...

XanaHopper 2021-11-18 10:02 評論0 收藏0
前端又要失失失失失失失失失業了！

摘要：何去何從在如此趨勢所迫中，切圖仔該何去何從作為個人來看，工具是沒法完全取代人工的，工具可以幫助開發者完成大量的簡單重復工作，但是要滿足實際業務，還是需要前端工程師的專業知識和技術。 1. 禍起看到標題，切圖仔們又是菊花一緊。前幾天微軟剛剛開源Sketch2Code，讓UI草圖轉化成HTML代碼。切圖仔瑟瑟發抖。 showImg(https://segmentfault.com/img...

lewif 2019-08-23 11:55 評論0 收藏0