houseAPP
项目需求,做一个客户端页面。底部有弹出框遮罩层效果
如图

=================================================
得到的设计图psd是640px宽度。切页面的时候,缩放一半到320px宽度,按照这个来切
最后做好之后,宽度写为640px,在微调大小宽度
html,
body {
max-width: 640px;
background: #E4E6E9;
margin: 0 auto;
font-size: 62.5%;
}
max-width: 640px;最大宽度640px
font-size: 62.5%;这样设置字体大小,是为s使用rem字体,rem可以针对不同分辨率大小的手机,百分比显示字体大小.
这里这样设置了之后,1rem=10px
关于底部点击button 弹出 遮罩层,使用了定位.
要弹出的层使用absolute绝对定位在底部,使用z-index:99(大的数字)显示在当前层上面.展示,层叠在上面.
使用这个z-index之前,要先设置父元素(这里也就是body 下的section)设置相对定位relative.方可使用.(position的定位问题在研究下)
弹出层的同时,后面黑色半透明层,是在html添加的一个空标签<div class="black_overlay"></div>
点击事件弹出层的同时,显示出这个黑色半透明层.
====================================
链接:http://files.cnblogs.com/files/leshao/houseAPP.rar
houseAPP的更多相关文章
- 基于华为云CSE微服务接口兼容常见问题
微服务接口兼容常见问题 在进行微服务持续迭代开发的过程中,由于新特性在不停的加入,一些过时的特性在不停的修改,接口兼容问题面临巨大的挑战,特别是在运行环境多版本共存(灰度发布)的情况下.本章节主要描述 ...
随机推荐
- Docker: 限制容器可用的 CPU
默认情况下容器可以使用的主机 CPU 资源是不受限制的.和内存资源的使用一样,如果不对容器可以使用的 CPU 资源进行限制,一旦发生容器内程序异常使用 CPU 的情况,很可能把整个主机的 CPU 资源 ...
- 基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多
通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无 ...
- 【Access2007】解救被阉割的truncate
Access2007使用被阉割的J-SQL语句,语法跟T-SQL语句.也就是寻常最标准的SQL语句一模一样,但就是仅保留insert into,delete,select,update与没太大意义的过 ...
- Android调用系统自带的文件管理器进行文件选择
http://blog.csdn.net/zqchn/article/details/8770913的补充 FileUtils文件 public class FileUtils { publi ...
- 【Jquery】之DOM操作
Questions 本篇文章主要讲解Jquery中对DOM的操作,主要内容如下: 1 内容区 1.1 .addClass() (1).addClass(className) <!DOCT ...
- activeMq 使用方法
一:activeMq介绍 ActiveMQ是一种开源的,实现了JMS1.1规范的,面向消息(MOM)的中间件,为应用程序提供高效的.可扩展的.稳定的和安全的企业级消息通信,下载地址是:http://a ...
- 数据库、ArcCatalog空间数据源正常访问,数据库设置没问题时,ArcEngine连接SDE时报"ORA-12560: TNS: 协议适配器错误"的解决办法;ArcEngine连接SDE总结
碰到的问题描述: 通过C# 基于ArcEngine写SDE直连的时候测试项目连接属性设置为如下: tPropSet.SetProperty("User", "GISDAT ...
- javascript中的异步 macrotask 和 microtask 简介
javascript中的异步 macrotask 和 microtask 简介 什么是macrotask?什么是microtask?在理解什么是macrotask?什么是microtask之前,我们先 ...
- 《Head First 设计模式》【PDF】下载
<Head First 设计模式>[PDF]下载链接: https://u253469.ctfile.com/fs/253469-231196307 First 设计模式>[PDF] ...
- 无 new 构造与链式调用
无 new 构造 最简单的想法 (function(window) { var jQuery = function() { return new _jQuery(); }; var _jQuery = ...