頁面製做（切圖）第一章

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框架。

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

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

3. 拆分完ui以後對於不一樣塊根據寬度、高度特性，選擇使用塊級元素或者內聯元素來表示。

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

塊節點已經建立，能夠經過CSS來還原設計稿中的每一個塊結構的實際樣式。