`
hylxinlang
  • 浏览: 128658 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论
阅读更多
<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>

 

 

  • 大小: 53 KB
0
2
分享到:
评论

相关推荐

    jquery win8风格网站图片九宫格排列布局左右全屏图片滚动

    在构建现代化的网页设计时,"jQuery Win8风格网站图片九宫格排列布局左右全屏图片滚动"是一种流行的设计模式,它结合了Windows 8操作系统的设计元素,为用户提供直观、动态的浏览体验。这种布局方式通常用于展示产品...

    仿360新闻的热搜图片,win8风格随机九宫格布局

    标题中的“仿360新闻的热搜图片,win8风格随机九宫格布局”指的是创建一个类似360新闻应用的热门搜索图片展示功能,采用了Windows 8的界面设计风格,并且图片以随机的九宫格形式进行排列。这个设计模式在网页开发中...

    jquery动态磁贴效果 jquery仿win8动态磁贴效果

    【jQuery动态磁贴效果——构建Win8风格的用户界面】 在网页设计中,引入动态磁贴效果能够为用户带来更具互动性和现代感的体验。这种效果最初由Windows 8操作系统引入,现在通过jQuery库,我们可以轻松地在网页上...

    仿win8磁贴 Android源码

    "仿win8磁贴 Android源码"就是一个这样的例子,它旨在为Android应用带来Windows 8风格的“磁贴”界面。Windows 8的磁贴设计以其大块色彩鲜明、动态更新的图标而闻名,这种设计语言在触屏设备上提供了良好的可操作性...

    Bootstrap Metro磁贴风格后台UI界面整站模板

    Bootstrap Metro是一种基于Twitter Bootstrap框架设计的现代化、响应式的前端开发工具,它采用了Windows 8的磁贴风格,这种风格以其鲜明的色彩和模块化的布局而闻名。Bootstrap Metro为开发者提供了构建美观、高效的...

    win8磁贴格子图片展示html5模板.rar

    在描述中提到,该模板具有多种风格,这意味着它提供了多样化的设计选择,可以适应不同的业务需求或个人品味。 HTML5是当前网页开发的标准,其强大的功能和兼容性使得这个模板可以在各种设备上流畅运行,包括桌面...

    仿去哪儿磁贴效果

    5. **JavaScript/jQuery**:动态效果和用户交互可能需要JavaScript或jQuery来处理,例如点击磁贴时的反馈效果,或者根据用户行为动态加载内容。 6. **图标设计**:磁贴中的图标设计是重要的组成部分,应简洁易懂,...

    win8 tiles风格标签jQuery插件.zip

    本主题聚焦于一个特定的jQuery插件——"win8 tiles风格标签jQuery插件",该插件旨在为网页创建Windows 8风格的磁贴效果。 Windows 8引入了一种全新的用户界面,其特征是大块、多彩的磁贴,这种设计被称为“Modern ...

    基于jQuery的Win8 Metro风格的html导航模板

    4. **Win8 Metro风格**:这种设计风格强调简洁、大块的色彩和磁贴式布局,目的是提高用户体验和易用性,尤其在触屏设备上。在导航模板中,可能会使用这种风格来创建直观的导航图标和布局。 5. **源码**:提供源码...

    jquery win8风格图标导航菜单特效

    Windows 8的界面设计引入了一种全新的扁平化、磁贴式的风格,这种风格在导航菜单上表现为大块的彩色图标和简洁的文字描述。在Web开发中,复现这一效果可以提升网站的现代感和用户体验。下面,我们将分析如何使用...

    前端动态磁贴技术

    在前端开发领域,动态磁贴技术常用于创建富有视觉吸引力且交互性强的用户界面,尤其在Windows 8的Metro风格界面中广泛应用。本主题聚焦于使用jQuery实现前端动态磁贴技术,这是一种通过JavaScript库增强HTML和CSS来...

    android 动态磁贴metro风格源码

    "android 动态磁贴metro风格源码"是一个专为Android系统定制的类似功能实现,旨在提供与Windows Phone中“metro”风格相似的交互体验。在这款应用中,用户可以创建动态的小部件,这些小部件不仅有美观的视觉效果,还...

    蓝色扁平化仿win8图片展示网页模板_蓝色 扁平化 图片 展示 仿win8 磁贴 metro风格 相册 jquery 交互 背景

    蓝色扁平化仿win8图片展示网页模板_蓝色 扁平化 图片 展示 仿win8 磁贴 metro风格 相册 jquery 交互 背景蓝色扁平化仿win8图片展示网页模板_蓝色 扁平化 图片 展示 仿win8 磁贴 metro风格 相册 jquery 交互 背景

    JQuery WIN8 风格左侧导航栏

    这个设计灵感来源于微软Windows 8操作系统,以其简洁、直观的界面和动态磁贴风格而闻名。它通常用于创建一个可折叠的侧边栏,包含网站或应用的主要导航链接,用户可以通过点击或滑动来展开和收起。 在实现这样的...

    jQuery实现win8风格文字宫格切换效果.zip

    在本项目中,"jQuery实现win8风格文字宫格切换效果.zip" 提供了一个使用jQuery创建的Windows 8风格的文字网格切换效果。这种效果模仿了Windows 8操作系统中动态磁贴的视觉和交互体验,为网页增加了一种现代且吸引...

    jquery win8风格的页面返回顶部按钮带二维码和qq在线客服

    1. **jQuery Win8风格的页面返回顶部按钮**:这种设计灵感来源于Windows 8的磁贴界面,旨在为用户带来一致且直观的导航体验。页面滚动到一定距离后,返回顶部按钮会自动显示,用户点击即可快速回到页面顶部,提高...

    蓝色扁平化仿win8图片展示网页模板-蓝色 扁平化 图片 展示 仿win8 磁贴 metro风格 相册 jquery

    3. **仿Win8磁贴风格**:模板中的部分元素模仿了Windows 8的磁贴布局,每个磁贴可作为一个图片展示单元,用户可以通过点击进入详细页面。 4. **交互性**:模板包含jQuery库,增强了网页的交互功能。例如,用户可以...

    仿win8动态磁贴

    【标题】"仿win8动态磁贴"是一个前端开发项目,其目的是利用jQuery库来实现类似Windows 8操作系统中标志性的动态磁贴效果。这种效果为用户界面带来了生动且交互性强的体验,使得网页看起来更加现代化和吸引人。 ...

    模仿win8磁贴效果

    通过以上步骤,我们可以创建一个具有Win8磁贴风格的菜单界面,让用户在享受视觉盛宴的同时,也能体验到便捷的操作。无论是在桌面应用、移动应用还是网页设计中,模仿Win8磁贴效果都是一个创新且引人注目的设计选择。

    jquery win8风格带标题的宽屏图片切换滚动代码

    【jQuery Win8风格带标题的宽屏图片切换滚动代码】是一种使用JavaScript库jQuery实现的,模仿Windows 8操作系统的界面风格的图片展示效果。这种效果通常用于网站的首页或者产品展示区域,为用户提供一个视觉冲击力强...

Global site tag (gtag.js) - Google Analytics