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

如图

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

得到的设计图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. django同时查询两张表的数据,合并检索对象返回

    原始需求: 1.一篇文章内容分N个版块,每篇文章的版块数量不同. 2.有个文章搜索功能,需要同时搜索标题和内容. 实现思路: 1.由于每篇文章的内容版块数量不同,因此将每个文章的标题和内容分开存入2张 ...

  2. lua 中pairs 和 ipairs差别

    ipairs 和pairs在lua中都是遍历tbale的函数可是两者有差别 1.pairs遍历table中的全部的key-vale 而ipairs会依据key的数值从1開始加1递增遍历相应的table ...

  3. [数字图像处理]常见噪声的分类与Matlab实现

    1.研究噪声特性的必要性 本文的内容主要介绍了常见噪声的分类与其特性. 将噪声建模,然后用模型去实现各式各样的噪声. 实际生活中的各种照片的老化,都能够归结为下面老化模型. 这个模型非常easy,也能 ...

  4. 用泛型创建SqlServerHelper类实现增删改查(一)

    使用泛型,可以构建对数据库单表的基本增删改查. 首先有一数据库 Test_SqlServerHelper ,有2表 接下来创建项目,对数据库进行增删改查. 直接贴代码:(SqlServerHelper ...

  5. python抓取历年特码开奖记录

    背景: 小时候,有种游戏,两个主人公:白XX和曾XX,每个家庭把他俩像活菩萨一样供着,供他们吃,供他们穿 做生意的老板为了这两位活菩萨,关门大吉 农民为了这两位活菩萨卖牛卖田变卖家产 做官的为了这两位 ...

  6. 自学Zabbix3.2-配置功能简介

    zabbix配置功能介绍 zabbix配置内容比较多,我们要分为9大块来讲解.分别如下: 1. 主机与组        添加主机配置与组配置. 1.1.创建主机方法 1.1.1 新建主机      c ...

  7. Java并发编程实践读书笔记(1)线程安全性和对象的共享

    2.线程的安全性 2.1什么是线程安全 在多个线程访问的时候,程序还能"正确",那就是线程安全的. 无状态(可以理解为没有字段的类)的对象一定是线程安全的. 2.2 原子性 典型的 ...

  8. 我在Windows下的第一个Shellcode

    纪念我的第一个Shellcode(XP SP3, VC6): 1.获取MessageBoxA(ASCII)的静态地址 2.编写汇编代码调试,获取对应的机器码(注意字符串由栈顶向栈底生长,push由栈底 ...

  9. 小白的Python之路 PEP8 代码风格

    转载自http://www.douban.com/note/134971609/ Python 的代码风格由 PEP 8 描述.这个文档描述了 Python 编程风格的方方面面.在遵守这个文档的条件下 ...

  10. 【java API基本实现】ArrayList

    ArrayList: package com.tn.arraylist; public class ArrayList { Object[] objects=new Object[10]; int i ...