欢迎使用CSDN-markdown编辑器

UI设计图转页面——问题及收获（5.31-6.3）

1.字体垂直居中（将高度设置为行高，可以自动实现文本垂直居中；）

2.从设计图中抠出来的图标，应用背景图片来进行设置（URL引入图片，再加入水平及垂直偏移量），再设置其显示的宽度及高度，图片就可以在网页中显示了（ps:应当注意，要设置背景图片的元素是否是行内元素，如果是，需使其display属性设置为inline-block或block。

3.将背景图片抠出来放在sprite图中，应合理排放。

4.网页的布局，如居中布局等，为方便后期维护应采用自适应布局；

5.右侧边框无法显示，因为未设置元素的高度；

6.类名的设置要有规律，为避免类名重复带来的不必要的麻烦（找不到问题根源在哪里；）

7.设置样式时，尽量少使用标签，多使用类名；

8.绝对定位元素的居中显示，可以使用{ left：50%； transform:translateX(-50%); }

9.为适应显示浏览器边框大小的变化，可设置页面主体内容宽度为最小宽度（min-width)，当拖动浏览器边框使其显示范围小于最小宽度时，元素显示最小宽度；当拖动浏览器边框使其显示范围大于最小宽度时，元素会自动伸展，显示当前浏览器边框的宽度；

10.当使用绝对定位元素，使其覆盖某元素时，可设置透明度，使下方元素显示出来；

11.设计时，应先分析页面的整体布局，及使用的布局方法。