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

如图

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

得到的设计图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. Python2/3中的urllib库

    urllib库对照速查表 Python2.X Python3.X urllib urllib.request, urllib.error, urllib.parse urllib2 urllib.re ...

  2. linux mysql定时备份

    项目需要定时备份数据库,以下是自己的操作笔记 1.检查磁盘空间 # df -h Filesystem Size Used Avail Use% Mounted on /dev/vda1 40G 3.6 ...

  3. C language 模拟 win的经典游戏——扫雷

    让我们在terminal下愉快的...扫雷 昨天跟奇葩霖聊起"雷区"这个敏感词汇,然后非常荣幸的... 应该轰炸不到我.. . 后来百无聊赖的去玩了把扫雷.然后发现我之前都是乱扫的 ...

  4. &lt;转&gt; Libvirt学习总结

    感谢朋友支持本博客.欢迎共同探讨交流.因为能力和时间有限,错误之处在所难免,欢迎指正! 假设转载,请保留作者信息. 博客地址:http://blog.csdn.net/gaoxingnengjisua ...

  5. linux命令的排列、替换与别名

    命令的排列; 1.使用";" 命令语法: 命令1;命令2 当运行该命令时,无论命令1是否出错.接下来就运行命令2 2.使用"&&" 命令语法:命 ...

  6. hihoCoder_二分&#183;归并排序之逆序对

    一.题目 题目1 : 二分·归并排序之逆序对 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描写叙述 在上一回.上上回以及上上上回里我们知道Nettle在玩<艦これ&g ...

  7. File attachment or query results size exceeds allowable value of 1000000 bytes.

    今天早晨,收到了作业执行失败的邮件(前几天还能正常执行该作业.不知为何今天出错) 邮件显示,作业的第三个步骤报错. step3内容: msdb.dbo.sp_send_dbmail     @prof ...

  8. MyBatis_通过resultMap解决不一致的问题

  9. Linux chown

    在学习 兄弟连 linux教学视频 的时候,我将所学的 linux 命令记录在我的博客中,方便自己查阅. 权限管理命令: chown 基础的命令 命令名称:chown 命令英文原意:change fi ...

  10. SDWebimage如何获取缓存大小以及清除缓存

    sdwebimage如何获取缓存大小以及清除缓存 1.找到SDImageCache类 2.添加如下方法: - (float)checkTmpSize {    float totalSize = 0; ...