<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>
相关推荐
在构建现代化的网页设计时,"jQuery Win8风格网站图片九宫格排列布局左右全屏图片滚动"是一种流行的设计模式,它结合了Windows 8操作系统的设计元素,为用户提供直观、动态的浏览体验。这种布局方式通常用于展示产品...
标题中的“仿360新闻的热搜图片,win8风格随机九宫格布局”指的是创建一个类似360新闻应用的热门搜索图片展示功能,采用了Windows 8的界面设计风格,并且图片以随机的九宫格形式进行排列。这个设计模式在网页开发中...
【jQuery动态磁贴效果——构建Win8风格的用户界面】 在网页设计中,引入动态磁贴效果能够为用户带来更具互动性和现代感的体验。这种效果最初由Windows 8操作系统引入,现在通过jQuery库,我们可以轻松地在网页上...
"仿win8磁贴 Android源码"就是一个这样的例子,它旨在为Android应用带来Windows 8风格的“磁贴”界面。Windows 8的磁贴设计以其大块色彩鲜明、动态更新的图标而闻名,这种设计语言在触屏设备上提供了良好的可操作性...
Bootstrap Metro是一种基于Twitter Bootstrap框架设计的现代化、响应式的前端开发工具,它采用了Windows 8的磁贴风格,这种风格以其鲜明的色彩和模块化的布局而闻名。Bootstrap Metro为开发者提供了构建美观、高效的...
在描述中提到,该模板具有多种风格,这意味着它提供了多样化的设计选择,可以适应不同的业务需求或个人品味。 HTML5是当前网页开发的标准,其强大的功能和兼容性使得这个模板可以在各种设备上流畅运行,包括桌面...
5. **JavaScript/jQuery**:动态效果和用户交互可能需要JavaScript或jQuery来处理,例如点击磁贴时的反馈效果,或者根据用户行为动态加载内容。 6. **图标设计**:磁贴中的图标设计是重要的组成部分,应简洁易懂,...
本主题聚焦于一个特定的jQuery插件——"win8 tiles风格标签jQuery插件",该插件旨在为网页创建Windows 8风格的磁贴效果。 Windows 8引入了一种全新的用户界面,其特征是大块、多彩的磁贴,这种设计被称为“Modern ...
4. **Win8 Metro风格**:这种设计风格强调简洁、大块的色彩和磁贴式布局,目的是提高用户体验和易用性,尤其在触屏设备上。在导航模板中,可能会使用这种风格来创建直观的导航图标和布局。 5. **源码**:提供源码...
Windows 8的界面设计引入了一种全新的扁平化、磁贴式的风格,这种风格在导航菜单上表现为大块的彩色图标和简洁的文字描述。在Web开发中,复现这一效果可以提升网站的现代感和用户体验。下面,我们将分析如何使用...
在前端开发领域,动态磁贴技术常用于创建富有视觉吸引力且交互性强的用户界面,尤其在Windows 8的Metro风格界面中广泛应用。本主题聚焦于使用jQuery实现前端动态磁贴技术,这是一种通过JavaScript库增强HTML和CSS来...
"android 动态磁贴metro风格源码"是一个专为Android系统定制的类似功能实现,旨在提供与Windows Phone中“metro”风格相似的交互体验。在这款应用中,用户可以创建动态的小部件,这些小部件不仅有美观的视觉效果,还...
蓝色扁平化仿win8图片展示网页模板_蓝色 扁平化 图片 展示 仿win8 磁贴 metro风格 相册 jquery 交互 背景蓝色扁平化仿win8图片展示网页模板_蓝色 扁平化 图片 展示 仿win8 磁贴 metro风格 相册 jquery 交互 背景
这个设计灵感来源于微软Windows 8操作系统,以其简洁、直观的界面和动态磁贴风格而闻名。它通常用于创建一个可折叠的侧边栏,包含网站或应用的主要导航链接,用户可以通过点击或滑动来展开和收起。 在实现这样的...
在本项目中,"jQuery实现win8风格文字宫格切换效果.zip" 提供了一个使用jQuery创建的Windows 8风格的文字网格切换效果。这种效果模仿了Windows 8操作系统中动态磁贴的视觉和交互体验,为网页增加了一种现代且吸引...
1. **jQuery Win8风格的页面返回顶部按钮**:这种设计灵感来源于Windows 8的磁贴界面,旨在为用户带来一致且直观的导航体验。页面滚动到一定距离后,返回顶部按钮会自动显示,用户点击即可快速回到页面顶部,提高...
3. **仿Win8磁贴风格**:模板中的部分元素模仿了Windows 8的磁贴布局,每个磁贴可作为一个图片展示单元,用户可以通过点击进入详细页面。 4. **交互性**:模板包含jQuery库,增强了网页的交互功能。例如,用户可以...
【标题】"仿win8动态磁贴"是一个前端开发项目,其目的是利用jQuery库来实现类似Windows 8操作系统中标志性的动态磁贴效果。这种效果为用户界面带来了生动且交互性强的体验,使得网页看起来更加现代化和吸引人。 ...
通过以上步骤,我们可以创建一个具有Win8磁贴风格的菜单界面,让用户在享受视觉盛宴的同时,也能体验到便捷的操作。无论是在桌面应用、移动应用还是网页设计中,模仿Win8磁贴效果都是一个创新且引人注目的设计选择。
【jQuery Win8风格带标题的宽屏图片切换滚动代码】是一种使用JavaScript库jQuery实现的,模仿Windows 8操作系统的界面风格的图片展示效果。这种效果通常用于网站的首页或者产品展示区域,为用户提供一个视觉冲击力强...