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

如图

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

得到的设计图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 SE 8 流库(二)

    1.3. filter,map,flatMAP方法 流的转换会产生一个新流,它的元素派生出自另一个流中的元素: Stream<T> filter(Predicate<? super ...

  2. 物联网设备是如何被破解的?分析一种篡改IoT固件内容的攻击方式

    随着智能硬件进入到人们的生活,人们的生活质量开始有逐步的提高,人们与智能硬件之间的联系更加紧密.同时,智能硬件的安全问题也必须引起高度重视,因为其直接影响到人身安全.社会安全和国家安全.   大家是否 ...

  3. System.getProperty()方法获取系统变量

    来自我的CSDN博客   今天在阅读JDBC的DriverManager类源码时,看到了这么一句代码: System.getProperty("jdbc.drivers"):    ...

  4. nginx HTTP/2.0 配置

    1.前言 最近无意中看到http2.0消息,发现自己的博客虽然配了https,但并没有配置http2.0,所以搞了个玩玩,本以为配个参数就搞定了,结果还是折腾了一个小时. 2.过程 nginx并没有默 ...

  5. Cacti监控一台Webserver上多个Tomcatport的实现

    由于一台web应用server上面安装了多台tomcat,有多个port.比方默认的8080,还有兴许追加的9100,9300,9500等等.一个cacti_host_template_tomcat_ ...

  6. TortoiseSVN/TortoiseGIT文件夹或图标不显示,非Overlay Icon

    网上搜索TortoiseSVN/TortoiseGIT的图标不显示,大部分的方法都是修改Overlay Icon的名字,让Tortoise排在前面. 然后我却遇到的问题上述方法并不能解决. 我的解决办 ...

  7. 超详细 值得收藏 linux CentOS 7 配置Apache服务【转发+新增】

    一.Apache简介 Apache HTTP Server(简称Apache)是Apache软件基金会的一个开放源代码的网页服务器软件,可以在大多数电脑操作系统中运行,由于其跨平台和安全性(尽管不断有 ...

  8. github not authorized eclipse 关于 代码不能提交到GitHub

    eclipse/myeclipse > menu > window > preferences > general > security > content > ...

  9. Bat脚本命令说明

    命名参考 使用方式如果不知道如何使用就到cmd窗口键入help 命名名 例如:"help del" 命令名 注释 ASSOC 显示或修改文件扩展名关联. ATTRIB 显示或更改文 ...

  10. Keras的安装与配置

    Keras是由Python编写的基于Tensorflow或Theano的一个高层神经网络API.具有高度模块化,极简,可扩充等特性.能够实现简易和快速的原型设计,支持CNN和RNN或者两者的结合,可以 ...