jqm的多列布局demo,html5的多列布局demo,多列布局的具体解说,html5开发实例具体解释
因为移动设备屏幕宽度较小，所以一般不建议使用多列布局。但有时你可能须要并排放置一些元素（如button之类的）。
jQuery Mobile通过约定的类名ui-grid来提供了一种基于css的多列布局方法。共提供了五种布局方式，各自是：ui-gird-solo：单列布局，ui-gird-a：双列布局，ui-gird-b：三列布局，ui-gird-c：四列布局，ui-gird-d：五列布局。布局网格总宽度100%，全然不可见（无边框无背景），没有不论什么内边距或外边距，不会对网格中的内容产生不论什么干扰。
今天我们来看看jqm的多列布局demo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery Mobile页面跳转切换的几种方式</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width"/>
<!--<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
--><link rel="stylesheet" type="text/css" href="../jQuery/jquery.mobile-1.3.2.min.css">
<script type="text/javascript" src="../jQuery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../jQuery/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript">
</script>
</head>
<!-- 博客地址：http://blog.csdn.net/xmtblog/article/details/34420755 -->
<body>
<div data-role="page" id="onePage" data-theme="b">
<div data-role="header" data-position="fixed" data-theme="b">
<h1>
涛哥伪专家管理系统
</h1>
<a href="#twoPage" data-role="button" class="ui-btn-right" data-icon="refresh">两列布局</a>
</div> <div data-role="content">
<p>我是一列布局</p>
<div class="ui-gird-solo">
<div class="ui-block-a" style="background: #ffd200;">
<strong><p>
如有不懂，请加qq群：135430763，共同学习！
</p>
<p>
如有不懂，请加qq群：135430763，共同学习！
</p></strong>
</div>
<div class="ui-block-b" style="background: gray;">
<strong><p>
如有不懂，请加qq群：135430763，共同学习！
</p>
<p>
如有不懂，请加qq群：135430763，共同学习！
</p></strong>
</div>
</div>
</div> <div id="footer" data-role="footer" data-theme="b" data-position="fixed">
<h1>
涛哥伪专家管理系统
</h1>
</div>
</div> <div data-role="page" id="twoPage" data-theme="b" >
<div data-role="header" data-position="fixed" data-theme="b">
<h1>
涛哥伪专家管理系统
</h1>
<a href="#threePage" data-role="button" class="ui-btn-right" data-icon="refresh">三列布局</a>
</div> <div data-role="content">
<p>我是两列布局</p>
<div class="ui-grid-a">
<div class="ui-block-a" style="background: #ffd200;">
<strong><p>
如有不懂，请加qq群：135430763，共同学习！
</p>
<p>
如有不懂，请加qq群：135430763，共同学习！
</p></strong>
</div>
<div class="ui-block-b" style="background: gray;">
<strong><p>
如有不懂，请加qq群：135430763，共同学习！
</p>
<p>
如有不懂，请加qq群：135430763，共同学习！
</p></strong>
</div>
</div>
</div> <div id="footer" data-role="footer" data-theme="b" data-position="fixed">
<h1>
涛哥伪专家管理系统
</h1>
</div>
</div> <div data-role="page" id="threePage" data-theme="b" >
<div data-role="header" data-position="fixed" data-theme="b">
<h1>
涛哥伪专家管理系统
</h1>
<a href="#fourPage" data-role="button" class="ui-btn-right" data-icon="refresh">四列布局</a>
</div> <div data-role="content">
<p>我是三列布局</p>
<div class="ui-grid-b">
<div class="ui-block-b" style="background: #ffd200;">
<strong><p>
如有不懂，请加qq群：135430763，共同学习！
</p>
<p>
如有不懂，请加qq群：135430763，共同学习！
</p></strong>
</div>
<div class="ui-block-b" style="background: gray;">
<strong><p>
如有不懂，请加qq群：135430763，共同学习！
</p>
<p>
如有不懂，请加qq群：135430763，共同学习！
</p></strong>
</div>
<div class="ui-block-b" style="background: green;">
<strong><p>
如有不懂，请加qq群：135430763，共同学习！
</p>
<p>
如有不懂，请加qq群：135430763，共同学习！
</p></strong>
</div>
</div>
</div> <div id="footer" data-role="footer" data-theme="b" data-position="fixed">
<h1>
涛哥伪专家管理系统
</h1>
</div>
</div> <div data-role="page" id="fourPage" data-theme="b" >
<div data-role="header" data-position="fixed" data-theme="b">
<h1>
涛哥伪专家管理系统
</h1>
<a href="#fivePage" data-role="button" class="ui-btn-right" data-icon="refresh">五列布局</a>
</div> <div data-role="content">
<p>我是四列布局</p>
<div class="ui-grid-c">
<div class="ui-block-c" style="background: #ffd200;">
<strong><p>
如有不懂，请加qq群：135430763，共同学习！
</p>
<p>
如有不懂，请加qq群：135430763，共同学习！
</p></strong>
</div>
<div class="ui-block-c" style="background: gray;">
<strong><p>
如有不懂，请加qq群：135430763，共同学习！
</p>
<p>
如有不懂，请加qq群：135430763，共同学习！
</p></strong>
</div>
<div class="ui-block-c" style="background: green;">
<strong><p>
如有不懂，请加qq群：135430763，共同学习！
</p>
<p>
如有不懂，请加qq群：135430763，共同学习！
</p></strong>
</div>
<div class="ui-block-c" style="background: blue;">
<strong><p>
如有不懂，请加qq群：135430763，共同学习！
</p>
<p>
如有不懂，请加qq群：135430763，共同学习！
</p></strong>
</div>
</div>
</div> <div id="footer" data-role="footer" data-theme="b" data-position="fixed">
<h1>
涛哥伪专家管理系统
</h1>
</div>
</div> <div data-role="page" id="fivePage" data-theme="b" >
<div data-role="header" data-position="fixed" data-theme="b">
<h1>
涛哥伪专家管理系统
</h1>
<a href="#onePage" data-role="button" class="ui-btn-right" data-icon="refresh">一列布局</a>
</div> <div data-role="content">
<p>我是五列布局</p>
<div class="ui-grid-d">
<div class="ui-block-d" style="background: #ffd200;">
<strong><p>
如有不懂，请加qq群：135430763，共同学习！
</p>
<p>
如有不懂，请加qq群：135430763，共同学习！
</p></strong>
</div>
<div class="ui-block-d" style="background: gray;">
<strong><p>
如有不懂，请加qq群：135430763，共同学习！
</p>
<p>
如有不懂，请加qq群：135430763，共同学习！
</p></strong>
</div>
<div class="ui-block-d" style="background: green;">
<strong><p>
如有不懂，请加qq群：135430763，共同学习！
</p>
<p>
如有不懂，请加qq群：135430763，共同学习！
</p></strong>
</div>
<div class="ui-block-d" style="background: blue;">
<strong><p>
如有不懂，请加qq群：135430763，共同学习！
</p>
<p>
如有不懂，请加qq群：135430763，共同学习！
</p></strong>
</div>
<div class="ui-block-d" style="background: red;">
<strong><p>
如有不懂，请加qq群：135430763，共同学习！
</p>
<p>
如有不懂，请加qq群：135430763，共同学习！
</p></strong>
</div>
</div>
</div> <div id="footer" data-role="footer" data-theme="b" data-position="fixed">
<h1>
涛哥伪专家管理系统
</h1>
</div>
</div>
</body>
</html>
看看执行效果截图：
好了，就到这里了，欢迎大家关注我的博客！
资料下载地址：http://download.csdn.net/detail/xmt1139057136/7548491
如有不懂，请加qq群：135430763，共同学习！
jqm的多列布局demo,html5的多列布局demo,多列布局的具体解说,html5开发实例具体解释的更多相关文章
- 免费的HTML5连载来了《HTML5网页开发实例具体解释》连载（六）媒体查询
响应式设计的还有一个重要技术手段是媒体查询.假设仅仅是简单的设计一个流式布局系统,那么能够保证每一个网格按比例的放大和缩小,但有可能会使得在小屏幕下(如手机设备)网格太小而严重影响阅读,这种设计称不上 ...
- 感谢各位亲们的大力支持，免费的HTML5学习课程《HTML5网页开发实例具体解释》连载已经结束了！
感谢各位亲们的大力支持,免费的HTML5学习课程<HTML5网页开发实例具体解释>连载已经结束了. 有兴趣的读者能够看我的博客,也能够看以下的链接逐个学习: 当里个当.免费的HTML5连 ...
- IT兄弟连 HTML5教程 CSS3属性特效 CSS3分栏布局
CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充.这种新语法能够让WEB开发人员轻松的让文本呈现多列显示.我们知道,当一行文字太长时,读者读起来就比较费 ...
- 免费的HTML5连载来了《HTML5网页开发实例详解》连载（六）媒体查询
响应式设计的另一个重要技术手段是媒体查询.如果只是简单的设计一个流式布局系统,那么可以保证每个网格按比例的放大和缩小,但有可能会使得在小屏幕下(如手机设备)网格太小而严重影响阅读,这样的设计称不上响应 ...
- 免费的HTML5连载来了《HTML5网页开发实例详解》连载（五）图解通过Fiddler加速开发
Fiddler是Windows底下最强大的请求代理调试工具,监控任何浏览器的HTTP/HTTPS流量,窜改客户端请求和服务器响应,解密HTTPS Web会话,图4.44为Fiddler原理示意图. 图 ...
- 免费的HTML5连载来了《HTML5网页开发实例详解》连载（三）DOCTYPE和字符集
在2.1.2节中通过新老DOCTYPE的对比,读者可以清晰地看到HTML 5在精简旧有结构上做出的努力.DOCTYPE在出现之初主要用于XML中,用作描述XML允许使用的元素.属性和排列方式.起初HT ...
- ccs之经典布局（二）（两栏，三栏布局）
接上篇ccs之经典布局(一)(水平垂直居中) 四.两列布局 单列宽度固定,另一列宽度是自适应. 1.float+overflow:auto; 固定端用float进行浮动,自适应的用overflow:a ...
- （私人收藏）[开发必备]HTML5最全快速查找离线手册（可查询可学习，带实例）
[开发必备]HTML5最全快速查找离线手册(可查询可学习,带实例) HTML5最全快速查找离线手册:https://pan.baidu.com/s/19seE8TJQSx4IsWgXtKQS0Aj9y ...
- 12.Quick QML-QML 布局(Row、Column、Grid、Flow和嵌套布局) 、Repeater对象
1.Row布局 Row中的item可以不需要使用anchors布局,就能通过行的形式进行布局. 并且item可以使用Positioner附加属性来访问有关其在Row中的位置及其他信息. 示例如下所示, ...
随机推荐
- SQL Server Insert操作中的锁
原文:SQL Server Insert操作中的锁 这篇博文简单介绍一下在SQL Server中一条Insert语句中用到的锁. 准备数据 首先我们建立一张表Table_1,它有两列Id(bigint ...
- [置顶] 轻量级语言Lua入门
作为一个脚本爱好者,而且是脚本(Perl)起家的我,一有空就喜欢学习下这些脚本语言.据说魔兽世界.愤怒小鸟都用到了它,所以今天研究下Lua这个叫法有点奇特的脚本 [转载请注明出处:http://blo ...
- HTTPDNS成为移动互联网的标配–原因与原理解析（转）
DNS,作用就是将域名解析成IP.一个DNS查询,先从本地缓存查找,如果没有或者已经过期,就从DNS服务器查询,如果客户端没有主动设置DNS服务器,一般是从服务商DNS服务器上查找.这就出现了不可控. ...
- vs2012 它已停止工作 - 解决方案
最近学习<Windows多媒体编程>本课程, 蛋疼, 学校原来是MFC... 然后安装vs2012. 后来又在几个插件.. 在这个问题. 开业,提示 vs2012 它已停止工作. wa ...
- NET 分布式架构开发项目实战
.NET 分布式架构开发项目实战 从头到尾,一步一步讲述一个真实的项目实战,关注点主要是架构的思考和实现,以及如何解决平时项目遇到的一些问题. 同时也司公布源代码. 如何构建高性能,稳定SOA应用之- ...
- 第3周 区_SQL Server中管理空间的基本单位
原文:第3周 区_SQL Server中管理空间的基本单位 哇哦,SQL Server性能调优培训已经进入第3周了!同时你已经对SQL Server内核运行机制有了很好的认识.今天我会讲下SQL Se ...
- 使用Spring的@Autowired 实现DAO, Service, Controller三层的注入（转）
简述: 结合Spring和Hibernate进行开发 使用@Autowired实现依赖注入, 实现一个学生注册的功能,做一个技术原型 从DAO(Repository) -> Service -& ...
- Windows下一个AndroidStudio 正在使用Git(AndroidStudio工程GitHub关联)
前提条件 : 1. 设备 Git client 下载链接 2. 有着 GitHub 账号 (假设你已经有了一些git基础, 假设还一点都不会, 请去找其它加成学习) AndroidStudio项目公布 ...
- 轮播图片 高效图片轮播，两个imageView实现
该轮播框架的优势: 文件少,代码简洁 不依赖任何其他第三方库,耦合度低 同时支持本地图片及网络图片 可修改分页控件位置,显示或隐藏 自定义分页控件的图片,就是这么个性 自带图片缓存,一次加载,永久使用 ...
- 64位内核注冊tty设备
在64位系统中,注冊tty设备须要注意的是,Android跑在EL0而且在32位模式下,kernel跑在EL1而且在64位模式下,不但内核须要打开CONFIG_COMPAT选项,非常多android上 ...