你是如何把ui图较完美的制作成网页的？

一些还原设计图时减少细节丢失的tips:
•设计基础
如果有设计基础，看到的设计图就不是距离多少像素，而是对齐、重复、相似、对比。有了设计基础可以独立地理解设计图的构成与思路。
•与设计师和产品经常沟通
“这样呢？”、“那这样可以吗”。初步切图后，就应当和设计师一起看一下，问问如何调整、为什么要这样做，以更好的理解设计想要的效果。
同时，有一些问题会在前端实现的时候抛出，如果不和设计、产品沟通，因为“这样做就更麻烦了”或者“如果这样写那么IE8有点小问题”而擅自主张地实现，自然会让页面视觉或交互打折扣。多沟通才能从设计或产品的角度，捡起这些细节。
•从设计意图方面理解设计图
一些视觉元素的使用，多半是为了达到版式平衡、形成视觉节奏、切合主题、增强情感共鸣、营造氛围、形成风格乃至打造品牌形象。知道设计意图是什么，可以注意到更多为之服务的细节。
从目的着手，也可以知道视觉和交互的优先级，产品、设计和前端都能够找到同一个明确的努力方向。

当然有工具辅助还是会更好一些的：
•前端方面的像素级还原，除了@mcfog推荐的付费工具，还有Firefox的pixel-perfect插件。
•设计方面，也应该让他们用Markman来标注元素大小、间距等。尤其是对渐变色值、透明度、字号的选取，这些如果设计标好，可以省好多事情

针对后续问题：如何处理line-height?

如果你拿到的设计图是这样的：

假设橙色部分是10px，红色部分是18px，那么就应该是：

p{ margin: 10px 0; line-height: 18px; }

字号怎么处理呢？Photoshop CC以后出了一项“复制CSS”功能，可以用于处理字号、圆角、渐变背景等。