jQuery Mobile 网格布局

外部div使用class="ui-grid-a",而内部使用 class="ui-block-a"

  <div data-role="page">
<div data-role="header">
    <h1>头部栏标题</h1></div>
    <div class="ui-grid-a"> 
	  <div class="ui-block-a">
		<div class="ui-bar ui-bar-b h60">A</div>
	  </div> 
	  <div class="ui-block-b">
		<div class="ui-bar ui-bar-b h60">B</div>
	  </div>
	</div> 
	<div class="ui-grid-b"> 
	  <div class="ui-block-a">
		<div class="ui-bar ui-bar-c h60">A</div>
	  </div> 
	  <div class="ui-block-b">
		<div class="ui-bar ui-bar-c h60">B</div>
	  </div>
	  <div class="ui-block-c">
		<div class="ui-bar ui-bar-c h60">C</div>
	  </div>
	</div> 
	<div class="ui-grid-c"> 
	  <div class="ui-block-a">
		<div class="ui-bar ui-bar-d h60">A</div>
	  </div> 
	  <div class="ui-block-b">
		<div class="ui-bar ui-bar-d h60">B</div>
	  </div>
	  <div class="ui-block-c">
		<div class="ui-bar ui-bar-d h60">C</div>
	  </div>
	  <div class="ui-block-d">
		<div class="ui-bar ui-bar-d h60">D</div>
	  </div>
	</div> 
	<div class="ui-grid-d"> 
	  <div class="ui-block-a">
		<div class="ui-bar ui-bar-e h60">A</div>
	  </div> 
	  <div class="ui-block-b">
		<div class="ui-bar ui-bar-e h60">B</div>
	  </div>
	  <div class="ui-block-c">
		<div class="ui-bar ui-bar-e h60">C</div>
	  </div>
	  <div class="ui-block-d">
		<div class="ui-bar ui-bar-e h60">D</div>
	  </div>
	  <div class="ui-block-e">
		<div class="ui-bar ui-bar-e h60">E</div>
	  </div>
	</div> 
  <div data-role="footer"><h4>©2012 rttop.cn studio</h4></div>

 

 

 

你可能感兴趣的:(JQuery Mobile)