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中的位置及其他信息. 示例如下所示, ...

随机推荐

Codeforces Round #253 (Div. 1) （A, B, C)
Codeforces Round #253 (Div. 1) 题目链接 A:给定一些牌,然后如今要提示一些牌的信息,要求提示最少,使得全部牌能够被分辨出来. 思路:一共2^10种情况,直接暴力枚举,然 ...
C++用于修饰的keyword
1.const修饰指针 (1)const int *p=&x:不可改动*p的内容,但能够让指针p指向还有一个地址,和int const *p一样 (2)int *const p=&x: ...
FluentData
FluentData微型ORM 最近在帮朋友做一个简单管理系统,因为笔者够懒,但是使用过的NHibernate用来做这中项目又太不实际了,索性百度了微型ORM,FluentData是第一个跳入我眼睛的 ...
直接拿来用！最火的Android开源项目（三部完整版）
GitHub在中国的火爆程度无需多言,越来越多的开源项目迁移到GitHub平台上.更何况,基于不要重复造轮子的原则,了解当下比较流行的Android与iOS开源项目很是必要.利用这些项目,有时能够让你 ...
无法打开登录所请求的数据库 "ASPState"。登录失败。用户 'NT AUTHORITY/SYSTEM' 登录失败。
原文:无法打开登录所请求的数据库 "ASPState".登录失败. 用户 'NT AUTHORITY/SYSTEM' 登录失败. 无法打开登录 'ASPState' 中请求的数据库 ...
Google Map API V2密钥申请
之前用的都是v1,用的是MapView,好吧,仅仅能认命了.废话不再多说,開始android 的Google Maps Android API v2吧之前參考了http://www.cnblogs. ...
成都传智职工high翻竞赛场
日前,由石羊街道总工会.天府新谷园区党委联合主办的“2013年职工趣味竞赛”盛大开幕.传智播客成都java培训中心员工积极参与,活跃在各大项目的比赛中,员工们用笑脸.身影告诉大家:竞赛场上,我们hig ...
重新想象 Windows 8 Store Apps (30) - 信息: 获取包信息, 系统信息, 硬件信息, PnP信息, 常用设备信息
原文:重新想象 Windows 8 Store Apps (30) - 信息: 获取包信息, 系统信息, 硬件信息, PnP信息, 常用设备信息 [源码下载] 重新想象 Windows 8 Store ...
HDU 4284 状压dp+spfa
题意: 给定n个点 m条无向边 d元. 以下m行表示每条边 u<=>v 以及花费 w 以下top 以下top行 num c d 表示点标为num的城市工资为c 健康证价格为d 目标是经过 ...
[MSSQL]最小公约数
[摘要]一个朋友在展BOM的时候有这种需求,两列字段(数值):A ,B A=用量,B=底数,组成用量=用量/底数.A/B,若能被整除,显示整除的结果,若不能整除显示分数形式A/B(分数形式要是约分 ...

jqm的多列布局demo,html5的多列布局demo,多列布局的具体解说,html5开发实例具体解释

jqm的多列布局demo,html5的多列布局demo,多列布局的具体解说,html5开发实例具体解释的更多相关文章

随机推荐

热门专题