jquery moblie磁贴风格九宫格

最新推荐文章于 2017-12-22 11:34:34 发布

王者光荣

最新推荐文章于 2017-12-22 11:34:34 发布

阅读量350

点赞数

分类专栏：移动互联网开发移动互联网开发，html5 css js 文章标签： jquery moblie 磁贴风格九宫格

移动互联网开发同时被 3 个专栏收录

40 篇文章

订阅专栏

24 篇文章

订阅专栏

移动互联网开发，html5

22 篇文章

订阅专栏

本文展示了一个使用HTML和CSS实现的邮箱应用UI布局设计案例，该案例通过精心设计的图标和标签来组织不同功能模块，如收件箱、已发邮件、通讯录等，并采用统一的样式确保整体美观。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


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