专栏首页业余草jQuery Mobile的学习 jQuery Mobile工具栏、标题栏、页脚栏的定位学习

jQuery Mobile的学习 jQuery Mobile工具栏、标题栏、页脚栏的定位学习

程序员都很赖,你懂的! 最近在做html5页面的开发,主要做智能终端设备的开发。对于内容比较少的页面,领导提出了要将页眉和页脚定位到网页的最上方和最下方。对于这样的要求,其实一点也不过分。但对于新手来说,确实很难,很不容易,今天我就将我学习的内容一起分享一下! 放置页眉和页脚的方式有三种:     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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 面试细节:为什么 HashMap 默认加载因子非得是0.75?

    来源:blog.csdn.net/NYfor2017/article/details/105454097

    业余草
  • 【微服务架构】SpringCloud组件和概念介绍(一)

     微服务英文名称Microservice,Microservice架构模式就是将整个Web应用组织为一系列小的Web服务。这些小的Web服务可以独立地编译及部署...

    业余草
  • 一行代码搞定Spring Boot反爬虫,防止接口盗刷!

    做电商网站的时候,总有竞争对手利用爬虫来爬你的数据。如果你没有反爬虫措施,网站都可能被爬垮。作为程序员,我们希望自己动手解决它!

    业余草
  • Leetcode No.9 回文数

    判断一个整数是否是回文数。回文数是指正序(从左向右)和倒序(从右向左)读都是一样的整数。

    week
  • 论文周报 | 第12期 移动脑电图具有便携,多场景使用的特点,未来非常有竞争力

    Mobile EEG in research on neurodevelopmental disorders: Opportunities and challe...

    脑机接口社区
  • JAVA集合框架中的常用集合及其特点、适用场景、实现原理简介

    Spark学习技巧
  • 『互联网架构』软件架构-软件环境的持续发布管理(上)(23)

    1.自己打包,给领导一说就直接发布了。领导说什么时候上就什么时候发布。 2.告诉运维人员项目git的位置,通知运维上线运维拉取,运维人员发布到生产环境。(如果项...

    IT故事会
  • 我是如何通关信安之路巅峰挑战赛的

    我滴个天啊。。。。。弱密码随意登陆。。。。。不好意思,这题我真是非预期解法,具体的预期解法,之前信安之路文章已发,就不仔细讲述啦!

    信安之路
  • 极端类别不平衡数据下的分类问题研究综述 | 硬货

    不平衡学习是机器学习问题的一个重要子域,其主要关注于如何从类别分布不均衡的数据中学习数据的模式。在这篇文章中我们主要关注不平衡分类问题,特别地,我们主要关注类别...

    磐创AI
  • TKE中使用helm搭建Rancher并搭建prometheus+grafana

    由于目前TKE已经集成了helm,用户只需在控制台点击安装便会下发tiller、swift

    马凌鑫

扫码关注云+社区

领取腾讯云代金券