Metro UI(Win 8风格)页面设计小记

一、Metro风格菜单——简单

HTML

Metro UI(Win 8风格)页面设计小记
    <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>
Metro UI(Win 8风格)页面设计小记

CSS

Metro UI(Win 8风格)页面设计小记
.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;}
Metro UI(Win 8风格)页面设计小记

JavaScript

Metro UI(Win 8风格)页面设计小记
$(function(){
    $(".tile").mouseenter(function(){      
        $(this).addClass("selecionado");
    });
  
    $(".tile").mouseout(function(){    
        $(this).removeClass("selecionado");
    });
});
Metro UI(Win 8风格)页面设计小记

效果

Metro UI(Win 8风格)页面设计小记

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

HTML

Metro UI(Win 8风格)页面设计小记
<div class="s-mod w1100" style="height:710px">
    <div class="s-mod-loding"><img src="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>
Metro UI(Win 8风格)页面设计小记

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

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

CSS

Metro UI(Win 8风格)页面设计小记
.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;}
Metro UI(Win 8风格)页面设计小记

JQuery

Metro UI(Win 8风格)页面设计小记
$(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")
        })
    })
})
Metro UI(Win 8风格)页面设计小记

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

效果

Metro UI(Win 8风格)页面设计小记

参考:

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

Metro UI(Win 8风格)页面设计小记,布布扣,bubuko.com

Metro UI(Win 8风格)页面设计小记

上一篇:[转载] 与WIN不同,linux替换文件夹会删除原文件夹下的全部内容!


下一篇:Photoshop 合成的彩色水晶字