好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

前端实战Demo:一张图片搞定一页布局_html/css_WEB-ITnose

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

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

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


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

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

Html代码:

查看更多关于前端实战Demo:一张图片搞定一页布局_html/css_WEB-ITnose的详细内容...

  阅读:50次