Metro UI（Win 8风格）页面设计小记

一、Metro风格菜单——简单

HTML

    <div class="pagina "><div class="linha">         <div class="tile amarelo"><span class="titulo">Tile 1</span><br/></div><div class="tile azul"><span class="titulo">Tile 2</span><br/></div><div class="tile tileLargo vermelho"><span class="titulo">Tile 3</span><br/></div><div class="tile verde"><span class="titulo">Tile 4</span><br/></div>          <div class="tile tileLargo amarelo"><span class="titulo">Tile 5</span><br/></div></div><div class="linha">         <div class="tile tileLargo amarelo"></div><div class="tile azul"></div>          <div class="tile verde"></div><div class="tile vermelho"></div>          <div class="tile tileLargo verde"></div></div>      <div class="linha">         <div class="tile amarelo"></div><div class="tile verde"></div><div class="tile vermelho"></div>          <div class="tile tileLargo verde"></div><div class="tile azul"></div><div class="tile verde"></div>  </div></div>

CSS

.pagina{ width:auto; height:auto;}
.linha{width:auto;padding:5px;height:auto;display:table;
}
.tile{height:100px;  width:100px;       /*tile 1 width*/float:left;margin:0 5px 0 0;padding:2px;
}
.tileLargo{    width:210px;}  /*tile 2 width*/
/* Classes colors of tiles */
.amarelo{    background:#DAA520;}
.vermelho{   background:#CD0000; }
.azul{       background:#4682B4;}
.verde{      background-color: #2E8B57;}
/* highlight the tile clicked */
.selecionado{  background-color: #483D8B;}

JavaScript

$(function(){$(".tile").mouseenter(function(){      $(this).addClass("selecionado");});$(".tile").mouseout(function(){    $(this).removeClass("selecionado");});
});

效果

二、Metro风格菜单——带有动画效果

HTML

<div class="s-mod w1100" style="height:710px"><div class="s-mod-loding"><img src="data:images/loading_d.gif"></div><ul><li class="s-mod-item" w="266" h="127" l="0" t="0" bg="#e8443a" cbg="#d92e24"><div class="s-mod-wrap"><div class="s-mod-def"><span>1.商品展示管理模块</span></div><div class="s-mod-cur"><span>自主添加产品类别，不限级数。后台对产品实现增、查、删、改等功能。前端对产品进行列表展示、详细页面展示。详细页面包含产品小图、大图、详细参数、文字内容介绍、多图滚动展示、图片放大展示、关联资讯介绍展示。</span></div></div></li><li class="s-mod-item" w="266" h="127" l="278" t="0" bg="#aa5096" cbg="#922a7b"><div class="s-mod-wrap"><div class="s-mod-def"><span>2.会员注册、登陆管理模块</span></div><div class="s-mod-cur"><span>管理会员注册信息、会员列表，建立会员等级权限组，分配会员至权限组，然后根据权限使用网站的其它各个功能模块。</span></div></div></li><li class="s-mod-item" w="127" h="266" l="556" t="0" bg="#1CA1E2" cbg="#1182BA"><div class="s-mod-wrap"><div class="s-mod-def"><span>3.会员基本资料管理模块</span></div><div class="s-mod-cur"><span>对会员注册的基本资料进行查看、修改。</span></div></div></li><li class="s-mod-item" w="127" h="127" l="695" t="0" bg="#FFD302" cbg="#EAC203"><div class="s-mod-wrap"><div class="s-mod-def"><span>4.商品多条件组合搜索管理模块</span></div><div class="s-mod-cur"><span>在产品列表页面实现对产品按照价格、尺寸、日期、型号、产地等多条件字段组合搜索功能。</span></div></div></li><li class="s-mod-item" w="266" h="127" l="834" t="0" bg="#0C6DB2" cbg="#09578E"><div class="s-mod-wrap"><div class="s-mod-def"><span>5.会员权限设置管理模块</span></div><div class="s-mod-cur"><span>管理会员注册信息、会员列表，建立会员等级权限组，分配会员至权限组，然后根据权限使用网站的其它各个功能模块。</span></div></div></li><li class="s-mod-item" w="127" h="127" l="0" t="139" bg="#9B4C13" cbg="#8F4108"><div class="s-mod-wrap"><div class="s-mod-def"><span>6.商品订单下载管理模块</span></div><div class="s-mod-cur"><span>将企业产品手册、说明书、宣传画册等资料上传至网站，用户通过网站下载，可分用户权限实现下载控制，需与会员管理系统配合。</span></div></div></li><li class="s-mod-item" w="127" h="127" l="139" t="139" bg="#8DC027" cbg="#76A31B"><div class="s-mod-wrap"><div class="s-mod-def"><span>7.商品数据导入/导出管理模块</span></div><div class="s-mod-cur"><span>在网站管理平台对产品型号、类别、价格；产品图片等数据进行批量上传，批量下载的管理。</span></div></div></li><li class="s-mod-item" w="266" h="127" l="278" t="139" bg="#FF0198" cbg="#D80683"><div class="s-mod-wrap"><div class="s-mod-def"><span>8.产品数据导入导出管理模块</span></div><div class="s-mod-cur"><span>在网站管理平台对产品型号、类别、价格；产品图片等数据进行批量上传，批量下载的管理。</span></div></div></li><li class="s-mod-item" w="266" h="127" l="695" t="139" bg="#4837cd" cbg="#3c2bb7"><div class="s-mod-wrap"><div class="s-mod-def"><span>7.购物车管理模块</span></div><div class="s-mod-cur"><span>包含在线订购单提交，可在线提交单个或连续多个订单，在线支付、物流管理、退换货管理。必须与会员系统配合。</span></div></div></li><li class="s-mod-item" w="127" h="127" l="973" t="139" bg="#2b7ab7" cbg="#1e669d"><div class="s-mod-wrap"><div class="s-mod-def"><span>8.QQ营销咨询3合1管理模块</span></div><div class="s-mod-cur"><span>可以把QQ、MSN、旺旺做成一个3合1的滚动窗口，用户点击可与企业洽谈生意，通过此系统大大方便访客与企业的交流。</span></div></div></li><li class="s-mod-item" w="127" h="266" l="0" t="278" bg="#33ac5b" cbg="#209747"><div class="s-mod-wrap"><div class="s-mod-def"><span>9.流量统计管理模块</span></div><div class="s-mod-cur"><span>集成第三方提供的网站流量统计系统，通过统计可以可看网站的访问量，以及互联网品牌指数。</span></div></div></li><li class="s-mod-item" w="266" h="127" l="139" t="278" bg="#bf7030" cbg="#ae6021"><div class="s-mod-wrap"><div class="s-mod-def"><span>10.新闻资讯管理模块</span></div><div class="s-mod-cur"><span>不限层级添加新闻资讯类别，可自主管理公司简介、公司新闻、产品新闻、行业知识等。在后台进行增、删、查、改等一系列操作。</span></div></div></li><li class="s-mod-item" w="127" h="266" l="417" t="278" bg="#914ae2" cbg="#7d33d0"><div class="s-mod-wrap"><div class="s-mod-def"><span>11.在线咨询管理模块</span></div><div class="s-mod-cur"><span>实现网站前台页面提交咨询内容及联系方式，后台查询咨询内容及咨询人情况，并进行在线咨询的回复，前台页面自动显示。</span></div></div></li><li class="s-mod-item" w="266" h="266" l="556" t="278" bg="#e42ec4" cbg="#cf19af"><div class="s-mod-wrap"><div class="s-mod-def"><span>12.会员中心管理模块</span></div><div class="s-mod-cur"><span>实现会员填写字段注册，对填写内容进行有效性校验。 根据注册信息的用户名、密码、验证码进行会员登陆。 对会员注册的基本资料进行查看、修改。 管理会员注册信息、会员列表，建立会员等级权限组，分配会员至权限组，然后根据权限使用网站的其它各个功能模块。</span></div></div></li><li class="s-mod-item" w="266" h="127" l="834" t="278" bg="#4392ec" cbg="#206fc8"><div class="s-mod-wrap"><div class="s-mod-def"><span>13.友情链接管理模块</span></div><div class="s-mod-cur"><span>与客户网站交换文字链接、图片链接均可，通过链接提升网站的PR值，有利于SEO优化排名。</span></div></div></li><li class="s-mod-item" w="127" h="127" l="139" t="417" bg="#20c8a6" cbg="#13af90"><div class="s-mod-wrap"><div class="s-mod-def"><span>14.会员管理模块</span></div><div class="s-mod-cur"><span>会员短信、邮箱校验模,块 会员短信、邮箱验模块,密码问题保护模块,红包推,广管理模块 ,会员API接口.</span></div></div></li><li class="s-mod-item" w="127" h="127" l="834" t="417" bg="#a3ca1d" cbg="#8bb00c"><div class="s-mod-wrap"><div class="s-mod-def"><span>15.订单管理模块</span></div><div class="s-mod-cur"><span>订单管理模块</span></div></div></li><li class="s-mod-item" w="266" h="127" l="0" t="556" bg="#d8493a" cbg="#ba3122"><div class="s-mod-wrap"><div class="s-mod-def"><span>16.订单管理模块</span></div><div class="s-mod-cur"><span>订单管理模块</span></div></div></li><li class="s-mod-item" w="127" h="266" l="278" t="417" bg="#c44a8c" cbg="#b72b77"><div class="s-mod-wrap"><div class="s-mod-def"><span>17.订单管理模块</span></div><div class="s-mod-cur"><span>订单管理模块</span></div></div></li><li class="s-mod-item" w="266" h="127" l="417" t="556" bg="#8e48f7" cbg="#7026df"><div class="s-mod-wrap"><div class="s-mod-def"><span>18.订单管理模块</span></div><div class="s-mod-cur"><span>订单管理模块</span></div></div></li><li class="s-mod-item" w="127" h="127" l="695" t="556" bg="#7a92c2" cbg="#5876b2"><div class="s-mod-wrap"><div class="s-mod-def"><span>18.订单管理模块</span></div><div class="s-mod-cur"><span>订单管理模块</span></div></div></li><li class="s-mod-item" w="127" h="127" l="834" t="556" bg="#7f9861" cbg="#658242"><div class="s-mod-wrap"><div class="s-mod-def"><span>18.订单管理模块</span></div><div class="s-mod-cur"><span>订单管理模块</span></div></div></li><li class="s-mod-item" w="127" h="266" l="973" t="417" bg="#876f5a" cbg="#755a41"><div class="s-mod-wrap"><div class="s-mod-def"><span>18.订单管理模块</span></div><div class="s-mod-cur"><span>订单管理模块</span></div></div></li></ul>
</div>

说明：每个<li>（参考单元格）宽高：127，边距：12（可根据自己意思自由设定。只要好看就行），并设置了伪属性

w——宽度
h——高度
l——左侧距离
t——顶部距离
bg——默认底色
cbg——鼠标划过后底色

CSS

.w1100{width:1100px;margin:0 auto;}
.s-mod{margin:20px auto 0;position:relative;}
.s-mod-loding{text-align:center;}
.s-mod ul{display:none;}
.s-mod-item{display:block;position:absolute;}
.s-mod-wrap{position:relative;overflow:hidden;}
.s-mod-def{position:absolute;left:0;top:0;z-index:1;padding:0 12px;color:#fff;font-size:18px;line-height:25px;text-align:center;}
.s-mod-def span{display:block;}
.s-mod-cur{position:absolute;left:0;top:0;z-index:2;padding:0 12px;color:#fff;line-height:18px;}
.s-mod-cur span{display:block;}

JQuery

$(function(){$(".s-mod ul").fadeIn(300,function(){$(".s-mod .s-mod-loding").remove();})    $(".s-mod ul .s-mod-item").each(function(){var i=$(this);var o={w:1*i.attr("w"),h:1*i.attr("h"),l:1*i.attr("l"),t:1*i.attr("t"),bg:i.attr("bg"),cbg:i.attr("cbg"),speed:600};var wrap=i.find(".s-mod-wrap");var def=i.find(".s-mod-def");var cur=i.find(".s-mod-cur");i.css({width:o.w,height:o.h,left:o.l,top:o.t});wrap.css({width:o.w,height:o.h});def.css({width:(o.w-24),height:o.h,backgroundColor:o.bg});cur.css({width:(o.w-24),height:o.h,backgroundColor:o.cbg,top:o.h});def.find("span").css({paddingTop:((o.h-def.find("span").height())/2)})cur.find("span").css({paddingTop:((o.h-cur.find("span").height())/2)})//滑动效果i.hover(function(){def.stop().animate({top:-o.h},o.speed,"easeOutBounce")cur.stop().animate({top:0},o.speed,"easeOutBounce")},function(){def.stop().animate({top:0},o.speed,"easeOutBounce")cur.stop().animate({top:o.h},o.speed,"easeOutBounce")})})
})

这里使用了jquery.easing.js插件，读者可自行去百度，或参考我的转载： http://www.cnblogs.com/JoannaQ/p/3568126.html

效果

参考：

http://mrbool.com/creating-a-metro-style-menu-in-html-and-css/26266
QQ群朋友共享的文件

Metro UI（Win 8风格）页面设计小记相关推荐

Android开发-UI界面--类微信页面设计
Android开发-UI界面–类微信页面设计一.功能说明设计一个类似微信的主页面框架,UI布局为上中下结构,包含了四个tag页面二.开发技术本次用到了layout.xml.控件.监听.fr ...
Windows Phone灵魂诠释:Metro UI界面完全解析
Metro在微软的内部开发名称为" typography-based design language"(基于排版的设计语言).它最早出现在微软电子百科全书95,此后微软又有许多知名 ...
Metro UI 界面完全解析 (转载)
Metro在微软的内部开发名称为" typography-based design language"(基于排版的设计语言).它最早出现在微软电子百科全书95,此后微软又有许多知名 ...
5个设计师必备的页面设计工具！
在现代科技飞速发展的时代,设计软件的选择越来越多.本文将盘点 5 大主流页面设计工具其中,即时设计是一款协同页面设计工具,提供在线编辑和保存等功能,同时拥有免费设计素材和在线留言评论等实用功能.它的云 ...
UI设计灵感|时尚简约风格网页页面设计
简约类型的网页布局,使用网格进行布局,不仅提升了整体的秩序性,还让版面视觉更加统一. 来看看集设网www.ijishe.com设计师交流社区精选的这组网页设计帮你提升版面的灵动感. 设计没思路,那么 ...
Win8 Metro UI风格的Web设计资源分享
最近微软已经正式发布了windows 8操作系统,window操作系统的风格已经完全改变成了瓦片状的Metro UI. 对于微软来说这是一个巨大的改变,而且所有微软的平台包括,桌面,平板,移动及其网站 ...
实例：如何设计一款好的Metro UI应用
据说 Windows Phone 标志性 Metro UI 的灵感最初来源于伦敦地铁指示图的设计,而这也是 "Metro" 这个名称的来历.从其对明亮色彩的广泛应用.以简单方块形式 ...
HteOS - Win10 Metro UI 风格的Web桌面
HteOS - Win10 Metro UI 风格的Web桌面全新的Web桌面应用开发框架全新设计全新Web桌面设计,Win10 Metro风格UI 响应式设计,适配PC端.移动端所有设备全面 ...
特别推荐：15个精美 Metro UI 风格 WordPress 主题
Metro 风格的设计在移动应用和 Web 设计领域成为流行趋势,在过去数月被讨论得非常多.Metro UI 的设计带给你的第一印象是彩色方块和简约的设计,这有利于以文字为主的界面导航. Metro ...

Metro UI（Win 8风格）页面设计小记

Metro UI（Win 8风格）页面设计小记相关推荐

最新文章

热门文章