對前端程序員來說，從設計師的手中拿過設計圖和素材之后根據需要進行切圖是必要的基本功，但是一般的程序員可能對切圖並非那么熟悉，所以可能有很多時間都花在使用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"); });
