<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>