第五个页面 移动端
来源:互联网 发布:月相模拟软件 编辑:程序博客网 时间:2024/05/18 03:21
这是第五个页面 移动端
移动端最麻烦的就是弹框
这次又踩了弹框的坑
不过这次终于掌握了写弹框的终极技术!
首先最外层包裹一层div 样式是:
position: fixed;width: 100%;height: 100%;z-index: 100;text-align: center;top: 0;left: 0;
然后里面先包裹一层div样式是:
position: fixed;top: 0;width: 300px;margin: auto;height: 360px;z-index: 9999;text-align: center;left: 0;right: 0;bottom: 0;
这个div就是垂直水平都居中的
将这个div的高度和宽度都设置成固定像素大小,这样就不会因为不同手机上字体一样大而其他元素的宽度高度都是百分比定位而乱掉
然后将对话框背景切成图作为img元素加到页面中,img样式:
width:100%;
内部元素:都用absolute定位
HTML:
<div class="hide" id="box-yuyue" ><div class="wrap"> <img src="libao.png" style="width:100%"> <div class="close"></div> <div class="telephone"> <label for="phoneNum" >手机号码</label> <input id="phoneNum" type="text" maxlength="11" placeholder="请输入手机号码" > <p class="tips" >请输入正确的手机号码</p> </div> <div class="device clearfix"> <div class="label" >手机系统</div> <div id="device-ios" class="device-choice current" data-device="ios">iOS</div> <div id="device-andriod" class="device-choice" data-device="android">Android</div> </div> <div id="submit"></div></div></div>
CSS:
JavaScript:
0 0
- 第五个页面 移动端
- 第二个页面 移动端
- 第一个页面 移动端&PC端
- 第三个页面 移动端&PC端
- 42 个移动端启动页面优化 Tips
- 42个移动端启动页面优化技巧
- 移动端页面坑
- 移动端页面开发
- 移动端页面开发
- 移动端页面布局
- 移动端页面自适应
- 移动端 ionic 同个页面多组相同radio使用
- 如何调试移动端页面
- 移动端页面性能探究
- 移动端页面性能探究
- 移动端页面编写摘记
- 移动端页面宽度自适应
- 前端移动端页面开发
- poi之Excel文件上传到数据库和导出(结合ssh)
- Ajax学习第二节_发送post请求
- Activity生命周期监测接口-Application的ActivityLifecycleCallbacks接口
- Ajax学习第三节_处理xml数据
- 代码质量-圈复杂度及其计算
- 第五个页面 移动端
- Ajax学习第四节_处理json数据
- Sublime Text 3打开界面如何设置缩进形式?设置缩进为直线而非小圆点!空格space改为标签Tab缩进?
- mui框架下拉刷新上拉加载,click事件无效的解决方法
- Redis的安装
- Ajax学习第五节_ajaxJquery
- [Android开发]- MVC的架构实现登录模块-1
- ListView自动生成序号
- “Can't start Eclipse - Java was started but returned exit code=13”问题解决办法