web页面设计稿的完美还原

时间:2024-03-18 08:14:55

 

       以前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文件,方便快捷。

 

 

 

有强迫症,总想精确到像素还原的童鞋可以试试完整篇的对眼神功。