鍍金池/ 教程/ HTML/ 測量及取色
書單
JavaScript 動(dòng)畫
HTML
CSS Reset
屬性操作
DOM 事件
閉包
Photoshop
Atom 文本編輯器
表單操作
布局解決方案
類型系統(tǒng)
開發(fā)實(shí)踐
數(shù)據(jù)通信
變量作用域
BOM
JavaScript 程序設(shè)計(jì)
前端工程師概述
CSS
響應(yīng)式布局
表達(dá)式與運(yùn)算符
基本語法
JavaScript 介紹
版本控制
布局
調(diào)試器
背景
圖片保存
多媒體
文檔樹
列表操作
Sublime 編輯器
盒模型
常見布局樣例
類型識(shí)別
變形
數(shù)據(jù)存儲(chǔ)
選擇器
頁面架構(gòu)
開發(fā)及調(diào)試工具
頁面模塊化
節(jié)點(diǎn)操作
測量及取色
瀏覽器兼容
HTML 簡介
內(nèi)置對象
實(shí)體字符
產(chǎn)品前端架構(gòu)
協(xié)作流程
切圖
工具, 面板, 視圖
正則表達(dá)式
動(dòng)畫
語句
面向?qū)ο?/span>
HTML 語法
HTML 標(biāo)簽
技術(shù)選擇
樣式操作
圖片優(yōu)化與合并
語法
DOM 編程藝術(shù)
Canvas
接口設(shè)計(jì)
頁面優(yōu)化
文本

測量及取色

測量及取色

所有能接受數(shù)字的屬性都需要測量并盡可能百分百的還原設(shè)計(jì)稿。

測量

  • 寬度,高度 (width, height)
  • 內(nèi)外邊距 (padding, margin)
  • 邊框 (border)
  • 定位 (position)
  • 文字大小 (font-size)
  • 行高 (line-height),其為第一行的底端到第二行的底端。
  • 背景位置 (background-position)

NOTE: 測量時(shí)盡可能放大畫布以減少誤差。量取文字是為了減少誤差盡量選取尺寸大的文字進(jìn)行測量。

http://wiki.jikexueyuan.com/project/fend_note/images/P/photoshop-measure&colorSelection.png" alt="" />

選框工具的多用途,增(Shift)減(Alt)以及交叉選擇(Shift + Alt)。左右(或上下)使用分離選框選擇可以得到整兩個(gè)分離邊框的距離總值。

http://wiki.jikexueyuan.com/project/fend_note/images/T/rect-selection-tool.gif" alt="" />

取色

所有能接受顏色的屬性都需要取色。

  • 邊框色
  • 背景色
  • 文字色

NOTE:使用魔棒工具可以迅速識(shí)別背景色是否沒線性漸變的方法。Mac OS X 推薦使用 Sip 可在 Mac App Store 免費(fèi)下載。 NOTE+:可以使用魔棒工具來判斷顏色是否為漸變。

上一篇:HTML下一篇:閉包