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

如图

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

得到的设计图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. java.lang.RuntimeException: Canvas: trying to use a recycled bitmap android.graphics.Bitmap@412d7230

    近期遇到了如标题这种错误,再次记录解决方法.本文參考帖子: http://bbs.csdn.net/topics/390196217 出现此bug的原因是在内存回收上.里面用Bitamp的代码为: t ...

  2. Oracle ROWID具体解释

    1.ROWID定义 ROWID:数据库中行的全局唯一地址 对于数据中的每一行,rowid伪列返回行的地址.rowid值主要包括下面信息: 对象的数据对象编号 该行所在的数据文件里的数据块 该行中数据块 ...

  3. 《Pro Android Graphics》读书笔记之第六节

    Android UI Layouts: Graphics Design Using the ViewGroup Class Android ViewGroup Superclass: A Founda ...

  4. Python源代码剖析笔记3-Python运行原理初探

    Python源代码剖析笔记3-Python执行原理初探 本文简书地址:http://www.jianshu.com/p/03af86845c95 之前写了几篇源代码剖析笔记,然而慢慢觉得没有从一个宏观 ...

  5. Java高级开发工程师面试——多线程

    来自:Sanesee 链接:http://www.sanesee.com/article/java-engineer-interview-of-thread 1.进程和线程的区别? 进程是一个具有独立 ...

  6. linux 安装tensorflow(gpu版本)

    一.安装cuda 具体安装过程见我的另一篇博客,ubuntu16.04下安装配置深度学习环境 二.安装tensorflow 1.具体安装过程官网其实写的比较详细,总结一下的话可以分为两种:安装rele ...

  7. JavaScript导航树

    JS导航树 整理之前的小代码片段,放到博客,便于以后完善查看: 该JS导航树实际效果,[GSP+社区网站专题课程页面导航树]地址:http://gsp.inspur.com/knowledge/zhu ...

  8. 「mysql优化专题」90%程序员没听过的存储过程和存储函数教学(7)

    一.MYSQL储存过程简介(技术文): 储存过程是一个可编程的函数,它在数据库中创建并保存.它可以有SQL语句和一些特殊的控制结构组成.当希望在不同的应用程序或平台上执行相同的函数,或者封装特定功能时 ...

  9. linux启动失败

    如图 1.开机界面 按 e 键 2.选择第二个进入就好了 根据网上说的修改kernel 配置  加上 enforcing=0 无效 1.进入界面后再按 e 键 3.选择第二个按e键进入编辑 界面 每次 ...

  10. margin相关

    1.图片与文字对齐问题 如果图片和文字差不多大时,使用兼容性强的margin负值方法. 方法:img{margin:0 3px -3px 0;} 2.div嵌套后margin出现失效(转移)问题 原因 ...