前端实战Demo：一张图片搞定一页布局

对前端程序员来说，从设计师的手中拿过设计图和素材之后根据需要进行切图是必要的基本功，但是一般的程序员可能对切图并非那么熟悉，所以可能有很多时间都花在使用Photoshop上，那么这里就有一种方法可以减少很多的切图工作，那便是——用一张图片搞定整个一页的页面布局。当然，不止是省了一些切图的花费，也是一种很有效的前端开发方法，尤其是针对那些设计花哨，使用HTML和Css还原度较难，并且实际上也并没有那么多可操作元素的设计。

其实简单来说就是一句话——使用空的HTML元素来框选出需要操作的图片元素。

直接举一个例子来说。一般常见的app或者微信页面中，经常会有登录的页面，类似于下面的这种页面：

整个页面只有一个或者两个不多的需要操作的组件，比如按钮、输入框之类的，图片中的其他元素都只是作为静态展示的设计而存在，那么专门把这个几个元素抠出来再写进页面中去显然就有点复杂化了，并且可能还会出现一些元素与元素之间相对位置重叠或者间距过大等问题。那么就可以用一个空的div标签来框选出上述图片中的输入和按钮区域，然后在这个空的div中添加input或者button元素，当然要保持样式和设计图中的一致。

那么上图中的例子，我给出的页面的主体代码就是这样：

Html代码：

<div class="container">
    <div class="btn">
        <input id="tel" type="text" placeholder="">
    </div>
</div>

Css代码：

.container{
    position: absolute;
    background:url("imgs/1.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.btn{
    position: absolute;
    margin-top: 40%;
    margin-left: 20%;
　　 width: 55%;
　　 height: 20%;
    display: none;
}

　　因为这里是用一个空的div来框选图片中的input或者按钮区域，所以为了保持原有图片的样式，就需要把实际上的input或者button的区域的display设置为none。当然要使用Javascript设置，当input和按钮区域获得焦点时，显示input和button了。可以直接写内联的input的onfocus属性：

onfocus="this.style.display='block'"

　　当然上面两幅图都是设计相对比较简单的图片，倘若是复杂一些的图片呢？

　　

　　其实操作方法也是一样的，只要注意调整好空的div的位置和宽高度与图片中的设计相吻合即可。

　　可能有人要问了，为什么要使用百分比来作为位置和宽高度的大小度量呢？这当然是一种响应式的设计。如果使用像素的话，那么只能适用于一种屏幕宽高比和分辨率之下，使用百分比的话就可以在较多种类的屏幕特点之下仍然保持与设计的高还原度。

　　上述是使用了HTML元素的onfocus属性，其实也可以使用jQuery，代码如下：

$("input#tel").focus(function(){
  $("input#tel").css("display","block");
});