从设计图到HTML页面时的注意点

从设计图到实现，在牺牲小细节的情况下，如何保持整体结构的一致性，是个需要注意的问题。

在Photoshop里做出的设计图，可以对：字体，大小，位置，边距，颜色做很细节的调整，而实现成HTML页面时，则因为浏览器排版和兼容性的问题，往往实现出的效果不那么尽如人意。

页面实现时要避免太随意的通过margin, padding来设置间距，大家喜欢用整数，如：5，10，20，来设置间距，然后大体看一下比例，这样虽然各个局部的比例大体是对的，但作为整体就会不那么一致，因为每个地方都差一点，合在一起就不好看了。

另一个需要注意的是字体问题，受限于浏览器可用字体的限制，有时只能用替代的字体，这时要注意字体的行高，间距，有必要的话，微调字符的间距，例如：Afric，这儿的fr靠的太近就不太好看，可以适当微调一下，例如：  Af<span class="char_r">r</span>ic，然后设置r的左边距：.char_r { margin-left: 2px;}，当然这儿只适用于比较重要的标题等处的文字。

转载于:https://www.cnblogs.com/jiyang/archive/2010/06/24/1764800.html