如何做H5页面阴影悬浮效果
2016-02-25 16:20
946 查看
Html结构:
<div class="list"> <div class="list-close"></div> <section> <p class="list-all-btn">xxx</p> <div class="list-wrap"></div> <p class="cancel-btn" data-reactid=".0.1.1.1.2">取消</p> </section> </div>
第一步.设置阴影背景
.list { position: absolute; top: 0; left: 0; z-index: 9; background: rgba(0,0,0,0.4); width: 100%; height: 100%; }
第二步.定义关闭按钮(点击阴影就会关闭)
list-close { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
第三步.定义内容区域的高度和宽度
.list > section { position: absolute; bottom: 0; left: 0; width: 100%; background: #f8f8f8; }
第四步.定义内容区域内的标题部分样式
.list-all-btn { text-align: center; color: #808080; font-size: 12px; height: 44px; line-height: 44px; border-bottom: 1px solid #e3e2e7; }
第五步.定义内容区域内取消按钮的样式
.cancel-btn { font-size: 20px; line-height: 45px; border-top: 1px solid #e3e2e7; color: #000; text-align: center; margin-top: 20px; background: #fff; }
如此便能做出悬浮的窗口效果
相关文章推荐
- h5新特性
- HTML5 localStorage
- HTML5游戏开发技术基础整理
- HTML5酷炫动画集锦
- 9款极具创意的HTML5/CSS3进度条动画(免积分下载)
- HTML5基础知识习题 一
- HTML5表单学习笔记
- HTML5 多图上传
- html5的input标签的pattern正则匹配问题
- 拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata)
- HTML5商城开发四 多图或多商品的水平滚动展示
- 如何解决IE9以下的浏览器对html5标签不兼容的问题
- 细谈HTML5
- HTML5中如何显示视频HTML5视频播放
- 基于HTML5 Ajax实现文件上传并显示进度条
- html5 history api 实现无刷新浏览以及历史记录管理
- html5中的一些新语义标签
- 【推荐】一个强大的html5游戏引擎 pixi
- 关于H5 storage 的一些注意事项以及用法
- Html5 Canvas 变换矩阵与坐标变形之间的关系