資訊專欄INFORMATION COLUMN
摘要：首先要知道什么叫頁面制作切圖頁面制作切圖就是，前端工程師通過和還原設(shè)計師的設(shè)計稿。每個大的行再按照這種方式拆成內(nèi)部若干行或者左右若干塊如下圖拆分完之后對于不同塊根據(jù)寬度高度特性，選擇使用塊級元素或者內(nèi)聯(lián)元素來表示。
CSS+HTML實戰(zhàn)
經(jīng)過前兩篇文章的基礎(chǔ)學(xué)習(xí)后，從本章開始我們要開始實戰(zhàn)學(xué)習(xí)。
1. 首先要知道什么叫頁面制作（切圖）
頁面制作（切圖）就是，web前端工程師通過HTML和CSS還原UI設(shè)計師的設(shè)計稿。
目前各公司UI設(shè)計師常用的設(shè)計工具有Photoshop、Sketch
下面這是我們公司設(shè)計師通過Sketch制作的設(shè)計稿
可以通過這款連接設(shè)計師和前端工程師（web前端、android、ios工程師）的標(biāo)注工具，進(jìn)一步了解
知道了切圖是什么之后我們要關(guān)注幾個CSS（css長度單位區(qū)別）px、rem、em
對于pc端頁面常用單位px
對于移動端常用單位rem
如何將設(shè)計稿中元素塊的尺寸和CSS中的尺寸
對于pc端可以完全通過px尺寸是1:1對應(yīng)的，就是設(shè)計稿中某個模塊的width是100px那么就可以設(shè)置html中對應(yīng)的節(jié)點寬度為100px
對于移動端則有很大適配問題可以讀一下這篇文章加以理解
2. 拆分設(shè)計稿結(jié)構(gòu)搭建HTML框架
對于最基本的長度單位有了了解之后，下面需要做的就是拆分設(shè)計稿搭建HTML框架。
以行來拆分設(shè)計稿為若干行（以設(shè)計稿左右兩端為邊界）用塊級元素構(gòu)建。
每個大的行再按照這種方式拆成內(nèi)部若干行、或者左右若干塊如下圖：
拆分完ui之后對于不同塊根據(jù)寬度、高度特性，選擇使用塊級元素或者內(nèi)聯(lián)元素來表示。
3. 給HTML節(jié)點添加CSS樣式（設(shè)計稿還原）
塊節(jié)點已經(jīng)創(chuàng)建，可以通過CSS來還原設(shè)計稿中的每個塊結(jié)構(gòu)的實際樣式。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/50875.html
摘要：首先要知道什么叫頁面制作切圖頁面制作切圖就是，前端工程師通過和還原設(shè)計師的設(shè)計稿。每個大的行再按照這種方式拆成內(nèi)部若干行或者左右若干塊如下圖拆分完之后對于不同塊根據(jù)寬度高度特性，選擇使用塊級元素或者內(nèi)聯(lián)元素來表示。 CSS+HTML實戰(zhàn) 經(jīng)過前兩篇文章的基礎(chǔ)學(xué)習(xí)后，從本章開始我們要開始實戰(zhàn)學(xué)習(xí)。 1. 首先要知道什么叫頁面制作（切圖） 頁面制作（切圖）就是，web前端工程師通過HTML...
摘要：前言不要再叫我切圖崽，我很生氣，這樣很不禮貌，請叫我前端工程師從方面來說，前端工程師和切圖崽的區(qū)別，并不是指寫單條技巧的高低，甚至很多工程師在一些的奇技淫巧都比不上切圖崽那切圖崽到底和工程師之間的差別是什么呢差別是年工作經(jīng)驗視野，是格局，是 前言 不要再叫我切圖崽，我很生氣，這樣很不禮貌，請叫我前！端！工！程！師！ 從css方面來說，前端工程師和切圖崽的區(qū)別，并不是指寫單條css技巧的...
摘要：文章目錄在線圖片壓縮在線壓縮最好用的切圖工具在線工具一鍵摳圖免費字體免費素材圖片和視頻中國風(fēng)配色網(wǎng)站免費壁紙免費短連接在線在線代碼編輯在線流程圖思維導(dǎo)圖在線圖片壓縮傳送門在線圖片壓縮網(wǎng)站已經(jīng)優(yōu)化超過十億張圖片，支持，，等格式的圖片的壓縮。 ...
摘要：何去何從在如此趨勢所迫中，切圖仔該何去何從作為個人來看，工具是沒法完全取代人工的，工具可以幫助開發(fā)者完成大量的簡單重復(fù)工作，但是要滿足實際業(yè)務(wù)，還是需要前端工程師的專業(yè)知識和技術(shù)。 1. 禍起 看到標(biāo)題，切圖仔們又是菊花一緊。前幾天微軟剛剛開源Sketch2Code，讓UI草圖轉(zhuǎn)化成HTML代碼。切圖仔瑟瑟發(fā)抖。 showImg(https://segmentfault.com/img...
閱讀 1005·2021-11-15 18:06
閱讀 2371·2021-10-08 10:04
閱讀 2656·2019-08-28 18:03
閱讀 906·2019-08-26 13:42
閱讀 1924·2019-08-26 11:31
閱讀 2431·2019-08-23 17:13
閱讀 932·2019-08-23 16:45
閱讀 2059·2019-08-23 14:11
