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微服务接口兼容常见问题
微服务接口兼容常见问题 在进行微服务持续迭代开发的过程中,由于新特性在不停的加入,一些过时的特性在不停的修改,接口兼容问题面临巨大的挑战,特别是在运行环境多版本共存(灰度发布)的情况下.本章节主要描述 ...
随机推荐
- let 和 const
let命令 1.let命令只在所在的代码快内有效 { let a = 'hello world' console.log(a) //hello world } console.log(a) //Unc ...
- day8、 显示Linux路由表、各列信息
要用到的命令是 route route 命令 显示和设置Linux路由表 -A:设置地址类型: -C:打印将Linux核心的路由缓存: -v:详细信息模式: -n:不执行DNS反向查找,直接显示 ...
- Python爬虫(十二)_XPath与lxml类库
Python学习指南 有同学说,我正则用的不好,处理HTML文档很累,有没有其他的方法? 有!那就是XPath,我们可以用先将HTML文档转换成XML文档,然后用XPath查找HTML节点或元素. 什 ...
- PHP运算符优先级 运算符分类
运算符 运算符是可以通过给出的一或多个值(用编程行话来说,表达式)来产生另一个值(因而整个结构成为一个表达式)的东西. 运算符可按照其能接受几个值来分组.一元运算符只能接受一个值,例如 !(逻辑取反运 ...
- java.util.ConcurrentModificationException 异常问题详解
环境:JDK 1.8.0_111 在Java开发过程中,使用iterator遍历集合的同时对集合进行修改就会出现java.util.ConcurrentModificationException异常, ...
- bmp文件格式中rgb555与rgb888之间的转换,24位与16位位图的转换
今日,有同事问我.rgb555模式下的位图文件的格式问题,于是花了一下午的时间通过推測与測试,分析出了例如以下bmp文件在rgb555模式下的文件存储规律: 1:bmp文件的文件信息头中的biBitC ...
- MacBook 经常使用快捷键
Mac OS X系统图形表示方法 ⇧ = shift ⌃ = control ⌥ = option / alt Home=fn + ◄ End=fn + ► Page Up=fn + ▲ Pag ...
- Md5加密秘钥加密哈希加密
加密通用类: public class EncryptClass { /// <summary> /// 返回MD5加密字符串 /// </summary> /// <p ...
- 【SqlServer系列】表达式(expression)
1 概述 本篇这文章主要概述SqlServer表达式. 2 具体内容 2.1 使用范围 SQL Server(2008开始) :Azure SQL数据库:Azure SQL数据仓库:并行数 ...
- 53、css补充
css其余问题补充 一.默认的高度和宽度问题 1.父子都是块级元素 <!DOCTYPE html> <html> <head> <title>...&l ...