zoukankan      html  css  js  c++  java
  • houseAPP

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

    如图

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

    得到的设计图psd是640px宽度。切页面的时候,缩放一半到320px宽度,按照这个来切

    最后做好之后,宽度写为640px,在微调大小宽度

    html,
    body {
    max- 640px;
    background: #E4E6E9;
    margin: 0 auto;
    font-size: 62.5%;
    }

     max- 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

  • 相关阅读:
    毕设进度21
    毕设进度20
    Javascript高级程序设计第三版-笔记
    前端踩过的坑
    thinkphp笔记
    PHP 发邮件《转》
    smarty笔记
    jquery笔记
    JS笔记
    php万年历
  • 原文地址:https://www.cnblogs.com/leshao/p/5038250.html
Copyright © 2011-2022 走看看