jqm的多列布局demo,html5的多列布局demo,多列布局的详细讲解,html5开发实例详解

由于移动设备屏幕宽度较小，所以一般不建议使用多列布局。但有时你可能需要并排放置一些元素（如按钮之类的）。

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开发实例详解

时间： 2024-10-03 14:14:39

jqm的多列布局demo,html5的多列布局demo,多列布局的详细讲解,html5开发实例详解的相关文章

免费的HTML5连载来了《HTML5网页开发实例详解》连载（三）DOCTYPE和字符集

在2.1.2节中通过新老DOCTYPE的对比,读者可以清晰地看到HTML 5在精简旧有结构上做出的努力.DOCTYPE在出现之初主要用于XML中,用作描述XML允许使用的元素.属性和排列方式.起初HTML借鉴了XML中DOCTYPE的使用方法,并赋予了新用法,如大家熟知的触发浏览器的标准模式.假使在制作一张页面时,没有设定DOCTYPE,则浏览器会以怪异模式状态进行处理(即Quirks模式),该模式与标准模式在盒模型.样式.布局等都存在较大差异.因此,DOCTYPE在制作页面时是不可或缺的部分.

免费的HTML5连载来了《HTML5网页开发实例详解》连载（六）媒体查询

响应式设计的另一个重要技术手段是媒体查询.如果只是简单的设计一个流式布局系统,那么可以保证每个网格按比例的放大和缩小,但有可能会使得在小屏幕下(如手机设备)网格太小而严重影响阅读,这样的设计称不上响应式设计.媒体查询可以来解决这一问题.媒体查询可以为特定的浏览器和设备提供特定的样式.媒体查询是CSS 3的一个新特性,是对媒体类型的扩展. 提示:W3C列出了10种媒体类型,请参考http://www.w3.org/TR/CSS2/media.html#media-types. 在响应式设计中,媒体

免费的HTML5连载来了《HTML5网页开发实例详解》连载（五）图解通过Fiddler加速开发

Fiddler是Windows底下最强大的请求代理调试工具,监控任何浏览器的HTTP/HTTPS流量,窜改客户端请求和服务器响应,解密HTTPS Web会话,图4.44为Fiddler原理示意图. 图4.44 Fiddler原理示意图 Fiddler安装的系统要求为Windows XP或Windows 8中的版本,其中Fiddler2依赖于Microsoft.NET Framework 2.0,最新的Fiddler4依赖于Microsoft.NET Framework 4.0. Fiddler

当里个当，免费的HTML5连载来了《HTML5网页开发实例详解》连载（一）

读懂<HTML5网页开发实例详解>这本书你还在用Flash嘛?帮主早不用了乔布斯生前在公开信<Flash之我见>中预言:像HTML 5这样在移动时代中创立的新标准,将会在移动设备上获得胜利. --国际巨头Google.苹果等都支持HTML 5标准,要不要学,你看着办! BAT三巨头都偷偷用上HTML 5了 HTML 5目前在国内的发展达到了空前的高度,以BAT三大巨头互联网公司为例,他们都已经争先恐后地将HTML 5的新技术融入到现实的开发领域中了.本书的例子会涉及WebQQ.

《HTML5网页开发实例详解》连载（四）HTML5中的FileSystem接口

HTML 5除了提供用于获取文件信息的File对象外,还添加了FileSystem相关的应用接口.FileSystem对于不同的处理功能做了细致的分类,如用于文件读取和处理的FileReader和FileList对象.用于创建和写入的Blob和FileWriter对象.用于目录和文件系统访问的DirectoryReader和LocalFileSystem对象等,FileSystem功能的出现是浏览器在文件系统上的突破,具有里程碑的意义,虽然目前还尚未完全成熟,但足以让开发者发挥更大的想象空间.

免费的HTML5连载来了《HTML5网页开发实例详解》连载（四）HTML5中的FileSystem接口

读懂《HTML5网页开发实例详解》这本书

你还在用Flash嘛?帮主早不用了乔布斯生前在公开信<Flash之我见>中预言:像HTML 5这样在移动时代中创立的新标准,将会在移动设备上获得胜利. ——国际巨头Google.苹果等都支持HTML 5标准,要不要学,你看着办! BAT三巨头都偷偷用上HTML 5了 HTML 5目前在国内的发展达到了空前的高度,以BAT三大巨头互联网公司为例,他们都已经争先恐后地将HTML 5的新技术融入到现实的开发领域中了.本书的例子会涉及WebQQ.一淘网.大众点评网等公司在HTML 5方向的技术运用情

Android开发之详解五大布局

为了适应各式各样的界面风格,Android系统提供了5种布局,这5种布局分别是: LinearLayout(线性布局) TableLayout(表格布局) RelativeLayout(相对布局) AbsoluteLayout(绝对布局) FrameLayout(框架布局) 利用这五种布局,可以在屏幕上将控件随心所欲的摆放,而且控件的大小和位置会随着屏幕大小的变化作出相应的调整.下面是这五个布局在View的继承体系中的关系:<ignore_js_op> 一,LinearLayout(线性布局)

Maven多模块布局实例详解

一.开场白使用Maven有段时间了,只能感慨真是个好东西,让我从传统模式体会到了严谨.规范.敏捷.方便的特性. 如果你懂Maven或许看过Juven翻译的<Maven权威指南>: 发个牢骚:由于Maven的出身问题导致学习曲线陡峭,所有有些人就开始说Maven不好用:原因有二:一是排斥Maven,二是没有耐心和精下心来学习,引用老毛的话来提醒我说的那些人: 没有调查就没有发言权到了Maven这里就是(适用于技术方面): 没有深入学习也没有发言权如果Maven不好那么Spring.Hibe