前端实战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");
});
前端实战Demo:一张图片搞定一页布局的更多相关文章
- 2021升级版微服务教程6—Ribbon使用+原理+整合Nacos权重+实战优化 一篇搞定
2021升级版SpringCloud教程从入门到实战精通「H版&alibaba&链路追踪&日志&事务&锁」 教程全目录「含视频」:https://gitee.c ...
- 盘它!基于CANN的辅助驾驶AI实战案例,轻松搞定车辆检测和车距计算!
摘要:基于昇腾AI异构计算架构CANN(Compute Architecture for Neural Networks)的简易版辅助驾驶AI应用,具备车辆检测.车距计算等基本功能,作为辅助驾驶入门级 ...
- 对百度WebUploader开源上传控件的二次封装,精简前端代码(两句代码搞定上传)
前言 首先声明一下,我这个是对WebUploader开源上传控件的二次封装,底层还是WebUploader实现的,只是为了更简洁的使用他而已. 下面先介绍一下WebUploader 简介: WebUp ...
- AlloyTouch实战--60行代码搞定QQ看点资料卡
原文链接:https://github.com/AlloyTeam/AlloyTouch/wiki/kandian 先验货 访问DEMO你也可以点击这里 源代码可以点击这里 如你体验所见,流程的滚动的 ...
- GJM : AlloyTouch实战--60行代码搞定QQ看点资料卡
原文链接:https://github.com/AlloyTeam/AlloyTouch/wiki/kandian 先验货 访问DEMO你也可以点击这里 源代码可以点击这里 如你体验所见,流程的滚动的 ...
- 一小时搞定DIV+CSS布局-固定页面开度布局
本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. 转载请标明:http://www.kwstu.com/ArticleView/divcss_20139 ...
- (转)一小时搞定DIV+CSS布局-固定页面开度布局
本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. 转载请标明:http://www.kwstu.com/ArticleView/divcss_20139 ...
- 一招搞定css页面布局
如何做出漂亮的页面: 1. 多写页面,多改. 2. 多写页面,多改. 3. 多写页面,多改. 大致的思想步骤: 写页面的时候先规划好大致的分块,无论是用定位或者浮动,首先要确定要应用的场景,使用完浮动 ...
- 一行css代码搞定响应式布局
在这篇文章中,我将教你如何使用 CSS Grid 来创建一个超酷的图像网格图,它将根据屏幕的宽度来改变列的数量.最精彩的地方在于:所有的响应特性被添加到了一行 css 代码中.这意味着我们不必将 HT ...
随机推荐
- 程序员的又一春,微信小程序带来的一个赚钱机遇
微信小程序可能是原生的机遇,在程序员面对微信小程序的恐惧中说其实也是我们程序员创业的春天或者挣外快的一个机遇. 为什么这么说呢?且听我慢慢给你分析 成本角度 你想想,会ios开发的可能只会ios,会安 ...
- SQL 必知必会
本文介绍基本的 SQL 语句,包括查询.过滤.排序.分组.联结.视图.插入数据.创建操纵表等.入门系列,不足颇多,望诸君指点. 注意本文某些例子只能在特定的DBMS中实现(有的已标明,有的未标明),不 ...
- 通知:逆天异常库 V1.0版本支持下载了~~
百度网盘:http://pan.baidu.com/s/1bongheJ GitHub:https://github.com/dunitian/LoTDotNet
- javascript运动系列第六篇——轨迹和投掷
× 目录 [1]运动轨迹 [2]拖拽轨迹 [3]投掷 前面的话 一般地,不同的运动形式会产生不同的轨迹.但仅凭肉眼去识别运动轨迹,其实并不是很直观.因此,在页面中显示运动轨迹,是一个重要的问题.物体初 ...
- [c++] Smart Pointers
内存管理方面的知识 基础实例: #include <iostream> #include <stack> #include <memory> using names ...
- 如何在Windows Server 2008 上添加RD (远程桌面)会话主机配置的远程桌面授权服务器
在Windows Server系列的现存活跃产品中都默认的会开放两个随机附送的远程控制的授权,而一些特殊条件下我们需要启用多个远程终端连接,在购买了相应的授权之后,我们如何将配置好的服务器添加到远程桌 ...
- C++指针和动态内存分配
指针和动态内存分配 数组与指针 数组 数组名是一个指针常量. 数组名传递数据时,传递的是地址. 数组作为函数参数时不指定第一维大小. 对象数组 A a[2] = {A(1,2)}; 执行时先调用有参数 ...
- C#二进制流的序列化和反序列化
public class BinaryHelper { /// <summary> /// 将对象序列化为byte[] /// 使用IFormatter的Serialize序列化 /// ...
- 给ubuntu中的软件设置desktop快捷方式(以android studio为例)
ubuntu的快捷方式都在/usr/share/applications/路径下有很多*.desktop(eclipse的快捷方式也可以类似设置) 下面就建立我们的studio sudo gedit ...
- Linux资源控制-CPU和内存
主要介绍Linux下, 如果对进程的CPU和内存资源的使用情况进行控制的方法. CPU资源控制 每个进程能够占用CPU多长时间, 什么时候能够占用CPU是和系统的调度密切相关的. Linux系统中有多 ...