顶部导航条

当前版本:V1 最近更新:2016-04-28 组件收集:Sign

 

组件说明

常规页面顶部导航条布局,常用于活动专题

更新日志

  • 2016/04/28 新增 顶部导航条剑灵版
  • 2016/04/28 新增 顶部导航条NBA2K版
  • 2016/04/28 新增 顶部导航条base版

base样式

当前版本:V1 最近更新:2016-04-28 组件作者:Sign

1、html结构

    

2、样式代码

    /* common */
    .fl{float:left;}
    .fr{float:right;}
    /* common */

    .topnav{background:#141414;}
    .topnav-logo{width:150px;height:60px;background:url(###);}
    .topnav-wrap{width:1000px;}
    .topnav-wrap{margin:0 auto;padding: 10px;    overflow: hidden;}
    .topnav-logo{display:block;text-indent:-9999px;}
    .topnav-btn{display:block;text-align:center;}
    .topnav-btn-gw,.topnav-btn-khd{width:90px;height:40px;line-height:40px;font-size:12px;margin:10px;background:#f64838;color:#020000;}

DEMO演示

demo

NBA2K顶部导航条

当前版本:V1 最近更新:2016-04-28 组件作者:Sign

1、html结构

    

2、样式代码

    .fl{float:left;}
    .fr{float:right;}
    .topnav{min-width:1000px;background:#141414;height:80px;font:12px/1.5 '\5FAE\8F6F\96C5\9ED1',tahoma,'\5b8b\4f53',sans-serif;}
    .topnav-wrap{width:1000px;height:80px;margin:0 auto;}
    .topnav-logo{background:url(http://ossweb-img.qq.com/images/nba2k/cp/a20151021sign/logo.jpg) no-repeat;width:121px;height:45px;margin:17px 0 0 20px;}
    .topnav-links{padding:24px 0 0 592px;height:32px;}
    .topnav-btn{display:block;text-align:center;text-decoration:none;outline:none;}
    .topnav-qr-thumb{width:34px;height:32px;background:url(http://ossweb-img.qq.com/images/nba2k/cp/a20151021sign/ewm.jpg) no-repeat;display:block;text-indent:-9999px;}
    .topnav-btn-gw,.topnav-btn-khd{width:92px;height:32px;font-size:12px;line-height:32px;margin-right:11px;background:#f64838;color:#020000;}

    /*浮层*/
    .topnav-qr{position:relative}
    .topnav-qr-box{background:url(http://ossweb-img.qq.com/images/nba2k/cp/a20151021sign/fc_bg.png) no-repeat;width:311px;height:209px;position:absolute;z-index:20;left:-174px;top:31px;display:none;}
    .topnav-qr:hover .topnav-qr-box{display:block;}
    .topnav-qrcode{margin:15px 0 0 5px;}
    .topnav-qr-box-info{padding:15px 0 0 20px;}
    .topnav-qr-box-info strong{color:#141414;font-size:14px;}
    .topnav-qr-box-info p{color:#4d4800;font-size:12px;line-height:24px;}
    .topnav-btn-xz{display:block;width:137px;height:44px;text-align:center;line-height:40px;margin-top:10px;overflow:hidden;background:#f43f30;color:#fff;font-size:18px;font-weight:bold;}
    .topnav-btn-xz:hover{background:#fb664e;}
    .hvr-wobble-horizontal{-webkit-animation-name:hvr-wobble-horizontal;animation-name:hvr-wobble-horizontal;-webkit-animation-duration:0.75s;animation-duration:0.75s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}
    @-webkit-keyframes hvr-wobble-horizontal{
        10%{-webkit-transform:translateX(3px) rotate(2deg);transform:translateX(3px) rotate(2deg);}
        20%{-webkit-transform:translateX(-3px) rotate(-2deg);transform:translateX(-3px) rotate(-2deg);}
        30%{-webkit-transform:translateX(3px) rotate(2deg);transform:translateX(3px) rotate(2deg);}
        40%{-webkit-transform:translateX(-3px) rotate(-2deg);transform:translateX(-3px) rotate(-2deg);}
        50%{-webkit-transform:translateX(2px) rotate(1deg);transform:translateX(2px) rotate(1deg);}
        60%{-webkit-transform:translateX(-2px) rotate(-1deg);transform:translateX(-2px) rotate(-1deg);}
        70%{-webkit-transform:translateX(2px) rotate(1deg);transform:translateX(2px) rotate(1deg);}
        80%{-webkit-transform:translateX(-2px) rotate(-1deg);transform:translateX(-2px) rotate(-1deg);}
        90%{-webkit-transform:translateX(1px) rotate(0);transform:translateX(1px) rotate(0);}
        100%{-webkit-transform:translateX(-1px) rotate(0);transform:translateX(-1px) rotate(0);}
    }
    @keyframes hvr-wobble-horizontal{
        10%{-webkit-transform:translateX(3px) rotate(2deg);transform:translateX(3px) rotate(2deg);}
        20%{-webkit-transform:translateX(-3px) rotate(-2deg);transform:translateX(-3px) rotate(-2deg);}
        30%{-webkit-transform:translateX(3px) rotate(2deg);transform:translateX(3px) rotate(2deg);}
        40%{-webkit-transform:translateX(-3px) rotate(-2deg);transform:translateX(-3px) rotate(-2deg);}
        50%{-webkit-transform:translateX(2px) rotate(1deg);transform:translateX(2px) rotate(1deg);}
        60%{-webkit-transform:translateX(-2px) rotate(-1deg);transform:translateX(-2px) rotate(-1deg);}
        70%{-webkit-transform:translateX(2px) rotate(1deg);transform:translateX(2px) rotate(1deg);}
        80%{-webkit-transform:translateX(-2px) rotate(-1deg);transform:translateX(-2px) rotate(-1deg);}
        90%{-webkit-transform:translateX(1px) rotate(0);transform:translateX(1px) rotate(0);}
        100%{-webkit-transform:translateX(-1px) rotate(0);transform:translateX(-1px) rotate(0);}
    }

    /*浮层*/

DEMO演示

demo


剑灵顶部导航条

当前版本:V1 最近更新:2016-04-28 组件作者:troykang

1、html结构

    

2、样式代码

    /*reset css*/
    body,div,h1,h2,h3,h4,h5,form,img,ul,ol,li,dl,dt,dd,p,fieldset,legend,input{margin:0;padding:0;}
    body{font:12px/1.5 '\5FAE\8F6F\96C5\9ED1','\9ED1\4F53',tahoma,sans-serif;background:#010101;color:#fff;min-width:1000px;padding-top:42px;}
    li{list-style:none;}
    h1,h2,h3,h4 {font-size:100%;}
    em{font-style:normal;}
    img{border:0;}
    table{border-collapse:collapse;}
    a{color:#fff;text-decoration:none;outline:none;}
    a:hover{color:#E82E0F;text-decoration:none;}
    area:focus{outline:none;}
    .wm{width:1000px;margin:0 auto;}
    input{background:none; border:none;outline:none;}
    fieldset{border:none;}
    legend{display:none;}
    .ti{ text-indent:-999em;}
    html,body{ height:100%;}
    /* html5 */
    article,aside,audio,canvas,command,datalist,details,embed,figcaption,figure,footer,header,hgroup,keygen,meter,nav,output,progress,section,source,video {display:block;margin:0;padding:0;}
    mark,rp,rt,ruby,summary,time {display:inline;margin:0;padding:0;}
    .pr{position:relative;}
    .pa{position:absolute;}
    .ti{text-indent:-999em;}
    .hid{display:none;}
    .clearfix:after {content: "";display: block;visibility: hidden;height: 0;clear: both;}
    .clearfix {zoom: 1;}
    .noma{ margin:0 !important;}
    img{ display:block;}
    /*images*/
    .spr{background:url(http://ossweb-img.qq.com/images/bns/act/a20150415game/spr24.png) no-repeat;_background:url(http://ossweb-img.qq.com/images/bns/act/a20150415game/spr8.png) no-repeat;}
    .btns{background:url(http://ossweb-img.qq.com/images/bns/act/a20150415game/btns.png) no-repeat;}
    .head-spr{background:url(http://ossweb-img.qq.com/images/bns/act/a20150415game/hspr.png) no-repeat;}
    /*Global topbar for bns*/
    .logo{height:104px;width:150px;top:42px;left:0;z-index:900;}
    .topbar{width:100%;height:48px;background-repeat:repeat-x;background-position:0 -104px;overflow:hidden;z-index:100;}
    .topnav{float:left;height:30px;padding:8px 0 0 125px;}
    .topnav li{float:left;height:30px;padding:0 10px;line-height:27px;background-position:-82px -154px;}
    .topnav a{display:inline-block;zoom:1;}
    .topnav .wechat{font-family:'宋体',tahoma;font-size:12px;}
    .login{float:right;padding:6px 25px 0 0;}
    .login-btn{float:right;background-position:0 -186px;width:62px;height:32px;padding-right:15px;line-height:30px;text-align:center;}
    .logout{background-position:0 -218px;width:87px;padding-right:20px;}
    .login-text{float:right;color:#fff;font-family:'宋体',tahoma;font-size:12px;padding:8px 10px 0 14px;}
    .icon-user{background-position:0 -154px;width:9px;height:13px;overflow:hidden;left:48px;top:9px;}
    .login-text .icon-user{left:0;top:9px;}
    .icon-out{background-position:-10px -159px;width:11px;height:8px;overflow:hidden;left:60px;top:11px;}

DEMO演示

demo