jQuery Mobile实现页眉页脚悬浮

最新推荐文章于 2021-06-26 10:03:59 发布

唐爷

最新推荐文章于 2021-06-26 10:03:59 发布

阅读量226

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/m0_47766638/article/details/106185371

版权

笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

jQuery Mobile实现页眉页脚悬浮

由于刚接触前端，对一些东西也不是特别熟悉。尤其是看到页眉页脚的悬浮，就感觉特别牛。
后来我在用jQuery Mobile制作一个网站时，无意间发现其实用CSS的样式就可以做到。而且只需要一行代码，非常简单。
（为了方便，我直接使用的内连样式。你们可以使用CSS选择器。）
首先，先写一个jQuery Mobile框架。

 <!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>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0,user-scalable=no"/>
</head>
<body>
<div data-role="page" id="pageone">  
<div data-role="header">    
<h1>繁星阁</h1>  
</div>  
<div data-role="content">    
<p>在此处插入正文</p>  
</div>  
<div data-role="footer">    
<h1>2020-05-17</h1>  
</div>
</div> 
</body>
</html>

然后我们找到这个DIV盒子

  <div data-role="content">
  <p>在此处插入正文</p>  
  </div>

加入style=“height:450px”

  <div data-role="content"style="height:450px">
<p>在此处插入正文</p>  
</div>

这种情况适用于body元素中有收缩元素的时候，亲测有效。

效果你们自己试试看吧！

唐爷

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery Mobile实现页眉页脚悬浮

jQuery Mobile实现页眉页脚悬浮由于刚接触前端，对一些东西也不是特别熟悉。尤其是看到页眉页脚的悬浮，就感觉特别牛逼。后来我在用jQuery Mobile制作一个网站时，无意间发现其实用CSS的样式就可以做到。而且只需要一行代码，非常简单。...
复制链接

扫一扫