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

最新推荐文章于 2022-02-05 19:42:14 发布
最新推荐文章于 2022-02-05 19:42:14 发布
阅读量144 收藏
点赞数
文章标签： javascript ViewUI
因为移动设备屏幕宽度较小，所以一般不建议使用多列布局。但有时你可能须要并排放置一些元素（如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，共同学习！

weixin_34148456
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jqm的多列布局demo,html5的多列布局demo,多列布局的详细讲解,html5开发实例详解
06-25
jqm的多列布局demo,html5的多列布局demo,多列布局的详细讲解,html5开发实例详解
html5 css多列布局
weixin_34161064的博客
10-08 209
p{ text-indent: 2em; line-height: 2em;}h4{ -webkit-column-span:all; background: green; text-align: center;}section{ padding: 10px; background: rgba(180,60,30,0.6); /*column-wid...
jQuery mobile 学习10 布局的设置
responsecool的专栏
02-27 1609
jQuery mobile 学习10 布局的设置
jQuery mobile网格布局
CDSN大帝的专栏
12-15 642
3.4　内容格式化 jQuery Mobile中提供了许多非常有用的工具与组件，如多列的网格布局、折叠形的面板控制等，这些组件可以帮助开发者快速实现正文区域内容的格式化。 3.4.1　网格布局 jQuery Mobile提供的CSS样式“ui-grid”可以实现内容的网格布局。该样式有4种预设的配置布局：“ui-grid-a”、“ui-grid- b”、“ui-grid-c”、“
css 多列样式
weixin_43294560的博客
11-18 186
多列 分列 column-count=n数字 分几列 列间距 column-gap=npx 列间距 间距样式 column-rule=solid/dashed 2px red 列分割的样式 代码示例: <html> <head> <meta charset="utf-8"> <title></t...
jqm.rar_delphi 多线程_delphi 机器码_delphi 线程_机器码
09-22
多线程获取用户机器码,多线程获取用户机器码.rar
jqm视频播放器,html5视频播放器,html5音乐播放器,html5播放器,video开发demo,html5视频播放示例,html5手机视频播放器
06-21
jqm视频播放器,html5视频播放器,html5音乐播放器,html5播放器,video开发demo,html5视频播放示例,html5手机视频播放器html5 视频播放器 video示例 音频播放器 手机播放器
HTML5+PhoneGAP+JQM门店源代码框架
03-31
HTML5+PhoneGAP+JQM门店源代码框架。 未完成，包括后台JSON部分。自己查找，后来我屏蔽掉了，但是效果是好的，由于模拟器太慢了，最后屏蔽了，但是代码可用。 开发环境Dreamweaver cs5.5.后台ASP.NET。
基于HTML5和jQuery Mobile的移动学习APP设计与实现.pdf
08-26
基于HTML5和jQuery Mobile的移动学习APP设计与实现.pdf
jqm开发的音乐播放器
10-18
一个jqm的实例，一个前端的运用，有关播放器的
jQuery Mobile音乐播放实例源码
03-01
jQuery Mobile音乐播放代码 为什么使用 jQuery Mobile? 通过使用jQuery Mobile 可以 "写更少的代码，做更多的事情" : 它可以通过一个灵活及简单的方式来布局网页，且兼容所有移动设备。 lamp 不同设备使用了不同开发语言，jQuery Mobile可以很好的兼容不同的设备或操作系统： Android 和 Blackberry（黑莓） 使用JAVA语言。 iOS 使用 Objective C 语言 Windows Phone 使用 C# 和 .net, 等。 jQuery Mobile 解决了不同设备兼容的问题，因为它只使用HTML，CSS和 JavaScript，这是所有移动网络浏览器的标准！
CSS实现三栏布局的四种方法示例
09-24
可能有人不理解三栏布局是什么，其实三栏布局页面分为左中右三部分，然后对中间一部分做自适应的一种布局方式，下面这篇文章就给大家详细介绍了CSS实现三栏布局的四种方法，需要的朋友可以参考借鉴，下面来一起看看吧。
手机端各DEMO展示列表
03-09
手机端各DEMO展示列表 (提示：浏览器请切换到手机模式) 手机端弹出框 手机端上拉或下拉刷新 手机端列表 手机端启动或关闭遮罩加载 手机端banner滑动
HTML5开发移动web应用—JQuery Mobile(3)-列表
fareise的博客
03-11 2430
Jquery Mobile中提供了制作列表的组建，它的data-view为listview。下面是一个典型的Jquery Mobile列表，代码如下： 有序列表： 列表项 列表项 列表项 无序列表： 列表项 列表项 列表项 上面我们定义了两种类型的列表，一个是有序列表(ul)，
css colum 列设置
jasonjkj的博客
09-18 673
head> meta charset="UTF-8"> title>Titletitle> style> /* 1.column-count:整数; 列数 -webkit-column-count:3; -moz-column-count:3; 2.column-gap:
【JQuery Mobile移动应用开发实战】JQuery Mobile基础——JQuery Mobile的布局
lht964249279的博客
02-05 1472
《jQuery Mobile移动应用开发实战》学习笔记
34道常见的HTML+CSS面试题，附答案
web前端开发
01-27 948
接上《33道前端开发理论面试题，附答案》这篇文章，今天把HTML与CSS的面试题分享给大家，里面有参考答案。二、HTML2.1、&lt;image&gt;标签上title...
Android 使用RecyclerView实现多列布局及其优劣
热门推荐
baiiu
06-21 3万+
前言记录一下之前写的一个多列布局，经常用于筛选条件中，比如这样：这是一个4列数据和1列数据交错下的多列布局。之前我们写的时候用ScrollView包裹两个TextView作为Title，又包裹两个GridView作为4列数据，同时还要处理ScrollView和GridView的冲突(虽然很简单)。 现在可以直接使用RecyclerView一个布局来实现。接下来先介绍如何实现，再对比和之前实现方式优
package Jqm; import javax.swing.*; import java.awt.*; import java.io.IOException; public class xuanze { public static void main(String[] args) { yonghu yonghu=new yonghu(); } } class yonghu extends JFrame implements Appendable{ JLabel lb1,lb2,lb3; JPanel jp1,jp2,jp3; ImageIcon image; public yonghu() { super("用户选择界面"); this.setSize(300,280); this.setLocationRelativeTo(null); this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); this.setLayout(new FlowLayout()); jp1=new JPanel(); jp2=new JPanel(); jp3=new JPanel(); lb1=new JLabel("天上人间",JLabel.RIGHT); lb1.setBounds(100, 90, 100, 50); lb1.setFont(new Font("宋体", Font.BOLD, 25)); jp1.add(lb1); /*ImageIcon ImageIcon=new ImageIcon("src/jd.jpg"); ImageIcon.setImage(ImageIcon.getImage().getScaledInstance(400,400,Image.SCALE_DEFAULT)); JLabel img = new JLabel(ImageIcon); jp2.add(img);*/ this.add(jp1); this.add(jp2); this.add(jp3); this.setVisible(true); } @Override public Appendable append(CharSequence csq) throws IOException { return null; } @Override public Appendable append(CharSequence csq, int start, int end) throws IOException { return null; } @Override public Appendable append(char c) throws IOException { return null; } }
最新发布
06-03
2. JCheckBox：用于创建复选框，可以选择一个或多个选项。 3. JComboBox：用于创建下拉框，可以选择一个选项。 4. JRadioButton：用于创建单选按钮，可以选择一个选项。 5. JOptionPane：用于创建消息框、确认框...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值