专栏首页业余草jqm的多列布局demo,html5的多列布局demo,多列布局的详细讲解,html5开发实例详解

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

点击下载

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • HTML5的data-*自定义属性

    HTML5增加了一项新功能是自定义数据属性,也就是data-*自定义属性。在HTML5中我们可以使用以data-为前缀来设置我...

    业余草
  • html5开发手机打电话发短信功能,html5的高级开发,html5开发大全,html手机电话短信功能详解

    在很多的手机网站上,有打电话和发短信的功能,对于这些功能是如何实现的呢。其实不难,今天我们就用html5来实现他们。简单的让你...

    业余草
  • 移动新闻网站,掌上移动新闻,移动新闻客户端,jQuery Mobile移动新闻网站,移动新闻网站demo,新闻阅读器开发

    我们坐在地铁上,常常拿出手机查看新浪移动新闻,腾讯新闻,或者刷微信看新闻等等功能。你们有没有想过他们是如何实现的。移动互联网,越来越热闹了。

    业余草
  • Swiper实现全屏视觉差轮播

    Swiper作为当代流行的js框架,非常受到青睐,这里演示swiper在pc端全屏视觉轮播的效果,这也是pc端常用的一种特性

    用户3159471
  • Vue路由详解(路由基础,路由轮播,路由传参,通配符路由)

    一. Vue路由基础知识点: 1.router-view: 类似angular里的插座,用于承载路由的切换组件 2.router-link: 类似angula...

    生南星
  • webAPP页面切换之滑动-swiper2(切换页面默认显示顶部)

    最近做一个web页面,希望在手机上能滑动切换页面,第一次这种要求,在网上找到了一个插件swiper,swiper2可以在电脑和手机上使用,于是选择这个插件,在使...

    tianyawhl
  • 独家 | Two Sigma用新闻来预测股价走势,带你吊打Kaggle(附代码)

    可以根据历史数据预测股票价格吗?最直接的回答可能是:“不能”。这是因为股市价格波动很大,并且取决于很多因素。量化所有这些因素几乎是不可能的,因此预测股价仍然是一...

    量化投资与机器学习微信公众号
  • 用Python分析一下那些"吸粉"无数的高票房电影

    奈何烂片层出不穷,电影荒就成了常事,不如回归经典,看一看电影历史上票房排行位于前端的一些电影,票房高的电影不一定精彩,但烂片票房低则是必然

    数据森麟
  • 基于Django的电子商务网站开发(连载15)

    表3-2为用户信息显示模块的测试用例。测试程序测试产品代码是否能够将当前登录用户的用户信息正确地被显示出来。

    小老鼠
  • 飞机延误了怎么办?这款小程序,给你航班内部消息爆料

    然而,市面上主流的航班动态预测服务,却仅能查到航班预计起飞信息。我们想了解的更多信息,却不知道要从哪里才能得知。比如:

    知晓君

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动