<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> <link rel="stylesheet" href="./css/jquery.mobile-1.3.0.css"/> <script type="text/javascript" src="./js/jquery-1.8.3.js"></script> <script type="text/javascript" src="./js/jquery.mobile-1.3.0.js"></script> <style type="text/css"> .colorout{background:red;} .colorin{background:lightblue;} </style> </head> <body> <div data-role="page" id="a"> <div data-role="header" data-position="fixed" data-theme="b"> <h2> a页面的标题 </h2> </div> <!-- class="ui-grid-a" 添加了这个属性,JQM就可以识别出,这个div中的布局是2列的 class="ui-block-a" 和 class="ui-block-b" 这两个属性添加上就可以让JQM知道,哪个是左边的,哪个是右边的,这个两个属性的顺序不能乱 里面的两个区块是没有间距的 JQM一般的布局需求控制在五列之内,如果需要更多的布局,可以试着使用嵌套 --> <div data-role="content"> <h2>JQM的布局</h2> <br> <h3>两列布局</h3> <div class="ui-grid-a colorout"> <div class="ui-block-a colorin">a</div> <div class="ui-block-b colorin">b</div> </div> <br> <h3>三列布局</h3> <div class="ui-grid-b colorout"> <div class="ui-block-a colorin">left</div> <div class="ui-block-b colorin">middle</div> <div class="ui-block-c colorin">right</div> </div> <h3>四列布局</h3> <div class="ui-grid-c colorout"> <div class="ui-block-a colorin">A</div> <div class="ui-block-b colorin">B</div> <div class="ui-block-c colorin">C</div> <div class="ui-block-d colorin">D</div> </div> <br> <h3>五列布局</h3> <div class="ui-grid-d colorout"> <div class="ui-block-a colorin">A</div> <div class="ui-block-b colorin">B</div> <div class="ui-block-c colorin">C</div> <div class="ui-block-d colorin">D</div> <div class="ui-block-e colorin">E</div> </div> <br> <h3>嵌套列布局</h3> <div class="ui-grid-a colorout"> <div class="ui-block-a colorin"> <div class="ui-grid-d colorout"> <div class="ui-block-a colorin">A</div> <div class="ui-block-b colorin">B</div> <div class="ui-block-c colorin">C</div> <div class="ui-block-d colorin">D</div> <div class="ui-block-e colorin">E</div> </div> </div> <div class="ui-block-b colorin"> <div class="ui-grid-b colorout"> <div class="ui-block-a colorin">left</div> <div class="ui-block-b colorin">middle</div> <div class="ui-block-c colorin">right</div> </div> </div> </div> </div> <div data-role="footer" data-theme="a" data-position="fixed"> <h2>a页面的底部</h2> </div> </div> </body> </html>
时间: 2024-10-24 03:02:28