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

如图

=================================================

得到的设计图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的更多相关文章

  1. 基于华为云CSE微服务接口兼容常见问题

    微服务接口兼容常见问题 在进行微服务持续迭代开发的过程中,由于新特性在不停的加入,一些过时的特性在不停的修改,接口兼容问题面临巨大的挑战,特别是在运行环境多版本共存(灰度发布)的情况下.本章节主要描述 ...

随机推荐

  1. Docker: 限制容器可用的 CPU

    默认情况下容器可以使用的主机 CPU 资源是不受限制的.和内存资源的使用一样,如果不对容器可以使用的 CPU 资源进行限制,一旦发生容器内程序异常使用 CPU 的情况,很可能把整个主机的 CPU 资源 ...

  2. 基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多

    通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无 ...

  3. 【Access2007】解救被阉割的truncate

    Access2007使用被阉割的J-SQL语句,语法跟T-SQL语句.也就是寻常最标准的SQL语句一模一样,但就是仅保留insert into,delete,select,update与没太大意义的过 ...

  4. Android调用系统自带的文件管理器进行文件选择

    http://blog.csdn.net/zqchn/article/details/8770913的补充 FileUtils文件 public class FileUtils {     publi ...

  5. 【Jquery】之DOM操作

    Questions 本篇文章主要讲解Jquery中对DOM的操作,主要内容如下: 1    内容区 1.1  .addClass() (1).addClass(className) <!DOCT ...

  6. activeMq 使用方法

    一:activeMq介绍 ActiveMQ是一种开源的,实现了JMS1.1规范的,面向消息(MOM)的中间件,为应用程序提供高效的.可扩展的.稳定的和安全的企业级消息通信,下载地址是:http://a ...

  7. 数据库、ArcCatalog空间数据源正常访问,数据库设置没问题时,ArcEngine连接SDE时报"ORA-12560: TNS: 协议适配器错误"的解决办法;ArcEngine连接SDE总结

    碰到的问题描述: 通过C# 基于ArcEngine写SDE直连的时候测试项目连接属性设置为如下: tPropSet.SetProperty("User", "GISDAT ...

  8. javascript中的异步 macrotask 和 microtask 简介

    javascript中的异步 macrotask 和 microtask 简介 什么是macrotask?什么是microtask?在理解什么是macrotask?什么是microtask之前,我们先 ...

  9. 《Head First 设计模式》【PDF】下载

    <Head First 设计模式>[PDF]下载链接: https://u253469.ctfile.com/fs/253469-231196307 First 设计模式>[PDF] ...

  10. 无 new 构造与链式调用

    无 new 构造 最简单的想法 (function(window) { var jQuery = function() { return new _jQuery(); }; var _jQuery = ...