首页 > 代码库 > web页面设计稿的完美还原
web页面设计稿的完美还原
以前Firefox有个插件,可以把设计稿载入进去,设置成半透明,然后这样布局有所参照,可以尽可能完美的还原页面,甚至精确到像素。但 是随着FF的不断升级,那个插件很久没有更新,已经不能用了。 当然我们也有其他方法实现,此神功威力强大,但是内力消耗也甚大,慎用,慎用。
对眼神功上篇
html:after,
body {
display: block;
position: absolute;
top: 0;
left: 0;
padding: 0;
margin: 0;
width: 100%;
height: 5000px;
}
html:after {
content:"";
opacity: 0.15;
z-index: 1;
background: url(page.png) no-repeat center top;
}
body { z-index: 2; }
说明:布局时可将以上css加入,完成后删除即可。使用:after伪类设置背景图,讲设计稿半透明化固定在最底层,不影响html和body。
对眼神功下篇
此下篇配合上篇,可以完美发挥对眼神功威力,可以以最快的速度,精准还原设计稿,甚至于精确到像素,如果你愿意的话,当然时间和精力毕竟消耗还是有点大的。
说明:webstrom是个很好的前端开发工具,下篇主要借用其css-x-fire插件,此插件允许在firebug中动态调整css,调整完成后,一键改写css文件,方便快捷。
有强迫症,总想精确到像素还原的童鞋可以试试完整篇的对眼神功。
web页面设计稿的完美还原