jquery moblie磁贴风格九宫格

<style>  
        /* center icons */  
        .ui-grid-a { text-align: center; }  
          
        /* set row height */  
        .ui-block-a, .ui-block-b { height: 150px; position: relative; }  
          
        /* set label size and color */  
        .icon-label { color:#009966; display: block; font-size:12px; }  
          
        /* position the icons at the bottom of the block to adjust for uneven icon heights */  
        .icon-springboard { position: absolute; bottom: 0; width: 100%;}  
          
        a:link, a:visited, a:hover, a:active { text-decoration:none; }  
    </style>
<div data-role="content" data-theme="b">
				<div class="ui-grid-a">  
					<div class="ui-block-a">  
						<div class="icon-springboard">  
							<a href="#" >
								<img src="images/Live Mail.png" alt="Coming Soon" style="width:130px;height:130px;">
								<span class="icon-label">收件箱</span>
							</a>  
						</div>  
					</div>      
					  
					<div class="ui-block-b">  
						<div class="icon-springboard">      
							<a href="#">  
								<img src="images/Email Chat.png" alt="Coming Soon" style="width:130px;height:130px;">  
								<span class="icon-label">已发邮件</span>  
							</a>  
						</div>  
					</div>
					<div class="ui-block-a">  
						<div class="icon-springboard">  
							<a href="#" >
								<img src="images/myspace_grn.png" alt="Coming Soon" style="width:130px;height:130px;">
								<span class="icon-label">通讯录</span>
							</a>  
						</div>  
					</div>      
					  
					<div class="ui-block-b">  
						<div class="icon-springboard">      
							<a href="#">  
								<img src="images/Google Drive Folder.png" alt="Coming Soon" style="width:130px;height:130px;">  
								<span class="icon-label">网络硬盘</span>  
							</a>  
						</div>  
					</div>
					  
					<div class="ui-block-a">  
						<div style="position: absolute; bottom: 0; width:100%;">  
							<a href="#">  
								<img src="images/Gmai lalt.png" alt="Tickets" style="width:130px;height:130px;">  
								<span class="icon-label">写邮件</span>  
							</a>    
						</div>  
					</div>      
					  
					<div class="ui-block-b">  
						<div style="position: absolute; bottom: 0; width:100%;">  
							<a href="ch4/contact-us.html">  
								<img src="images/Gmail.png" alt="Contact Us" style="width:130px;height:130px;">  
								<span class="icon-label">我的邮件</span>
							</a>  
						</div>  
					</div>  
				</div>
			</div>

 

 

猜你喜欢

转载自hylxinlang.iteye.com/blog/1953225