jQuery Mobile的学习 jQuery Mobile工具栏、标题栏、页脚栏的定位学习
2024-08-29 22:15:25
程序猿都非常赖。你懂的!
近期在做html5页面的开发,主要做智能终端设备的开发。对于内容比較少的页面,领导提出了要将页眉和页脚定位到网页的最上方和最下方。对于这种要求,事实上一点也只是分。但对于新手来说,确实非常难,非常不easy。今天我就将我学习的内容一起分享一下。
放置页眉和页脚的方式有三种:
Inline - 默认。页眉和页脚与页面内容位于行内。
Fixed - 页面和页脚会留在页面顶部和底部。
Fullscreen - 与 fixed 类似;页面和页脚会留在页面顶部和底部
请使用 data-position 属性来定位页眉和页脚:
看代码:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body> <div data-role="page">
<div data-role="header" data-position="fixed">
<h1>Fixed 页眉</h1>
</div> <div data-role="content">
<p><b>提示:</b>假设要看到效果,则须要调整窗体大小使滚动栏可用。 </p> <p><b>提示:</b>假设滚动栏可用,那么敲击屏幕将隐藏或显示页眉/页脚。效果会依据您在页面上的位置而变化。 </p> <p>Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling. to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..</p>
</div> <div data-role="footer" data-position="fixed">
<h1>Fixed 页脚</h1>
</div>
</div> </body>
</html>
ok。我们上截图:
点击下载资料:http://download.csdn.net/download/xmt1139057136/7422831
假设你还有不懂。请加qq群:135430763共同学习。
最新文章
- uoj98未来程序改 纯暴力不要想了
- python之目录文件操作
- 4.2 set和multiset
- 【android Studio】零git知识、零脚本命令,即刻体验git版本管理魅力!
- COJ 0346 WZJ的旅行(二)更新动态树分治版本
- 何查询SQL Server数据库没有主键的表并增加主键
- 自用LogSystem入库分享
- JavaScript前端和Java后端的AES加密和解密
- 「mysql优化专题」高可用性、负载均衡的mysql集群解决方案(12)
- SLAM入门之视觉里程计(2):相机模型(内参数,外参数)
- python 通用装饰器,带有参数的装饰器,
- FasterRCNN代码解读
- AllPay(欧付宝)支付接口集成
- Linux CentOS 6.9 Minimal 编译 OpenJDK 7
- Android抓包方法 之Fiddler代理
- 删除JavaScript对象中的元素
- SNF微信公众号客户端演示-微信开发客户端能干什么
- 操作构造字符串化宏#define STRINGIZE(x) #x
- MongoDB与SqlSugar与Ado.Net对比
- px em rem 字体单位问题