www.gusucode.com > 魅族手机官网幻灯片导航菜单源码程序 > 魅族手机官网幻灯片导航菜单/css/index.css
.wrapper { position: relative; width: 100%; height: 760px; overflow: hidden; } .bg-white { display: none; position: absolute; z-index: 998; width: 100%; height: 62px; background-color: #fff; } .header { position: relative; z-index: 999; left: 0; top: 0; height: 62px; } .header .container { width: 1240px; padding: 0 20px; margin: 0 auto; } .header .logo { float: left; padding-top: 30px; } .header .logo a { width: 115px; height: 20px; background: url(../images/logo_blue.png) no-repeat; } .nav { float: left; margin-left: 256px; } .nav-item { float: left; position: relative; } .nav-item a { padding: 20px 20px 0; height: 42px; line-height: 42px; } .nav-item a:hover { color: rgb(49, 165, 231); } .sub-nav { overflow: hidden; position: absolute; left: 0; top: 62px; z-index: 999; width: 100%; background-color: #fff; } .sub-nav__wrap { position: absolute; left: 0; top: 0; display: none; } .sub-nav__wrap[data-link="nav_iphone"] { padding-left: 390px; } .sub-nav__wrap[data-link="nav_subIphone"] { padding-left: 306px; } .sub-nav__wrap[data-link="nav_voice"] { padding-left: 578px; } .sub-nav__wrap[data-link="nav_parts"] { padding-left: 445px; } .sub-nav a { float: left; width: 140px; padding-top: 14px; text-align: center; color: #666; } .sub-nav a:hover { color: #111; } .sub-nav a img { display: inline-block; height: 80px; } .sub-nav a span { display: block; padding-top: 18px; font-size: 12px; } .user { float: right; position: relative; width: 60px; height: 62px; } .user:hover .user-hover, .user:hover .user-info { display: block; } .user-img { position: absolute; z-index: 3; width: 60px; padding-top: 30px; padding-left: 13px; } .user-img .arrow-bg, .user-img .arrow-font { position: absolute; top: 38px; left: 40px; } .user-img .arrow-bg { border-width: 6px; border-color: #999 transparent transparent transparent; border-style: solid dashed dashed; } .user-img .arrow-font { left: 41px; border-width: 5px; border-color: #fff transparent transparent transparent; border-style: solid dashed dashed; } .user .user-hover { display: none; position: absolute; z-index: 2; top: 0; right: 0; width: 60px; height: 75px; border-left: 1px solid #ccc; border-right: 1px solid #ccc; border-top: 3px solid #1395e4; background-color: #fff; } .user-info { display: none; position: absolute; z-index: 1; right: 0; top: 77px; height: 204px; border: 1px solid #ccc; background-color: #fff; font-size: 12px; } .user-info ul { padding: 0 20px; } .user-info li { width: 112px; margin-top: 20px; } .user-info a { color: #515151; } .user-info a:hover { color: rgb(49, 165, 231); } .user-info li.login {} .user-info li.login a { width: 112px; height: 32px; line-height: 32px; text-align: center; color: #fff; background-color: #3399ff; } .user-info li.register { color: #999; } .user-info li.register a { display: inline; color: #21A9E7; } .user-info li.register a:hover { text-decoration: underline; } /* ======== 幻灯片样式 ======== */ .slider-box { position: absolute; z-index: 1; left: 0; top: 0; overflow: hidden; } .slider { position: absolute; left: 0; top: 0; } .slider-item { float: left; cursor: default; } .slider-box .btn-box { position: absolute; bottom: 10px; width: 100%; text-align: center; font-size: 0; } .slider-box .btn-item { display: inline-block; width: 10px; height: 10px; margin: 0 12px; border-radius: 50%; background-color: #666; } .slider-box .btn-item__cur { width: 12px; height: 12px; margin-bottom: -2px; border: 1px solid #666; background-color: transparent; } .btn, .slider-title, .btn-box { z-index: 999; } /* ======== 主题样式 ======== */ .theme-white .header .logo a { background: url(../images/logo_white.png) no-repeat; } .theme-white .nav-item a { color: #fff; } .theme-white .nav-item a:hover { color: rgb(49, 165, 231); } .theme-white .slider-box .btn-item { background-color: #fff; } .theme-white .slider-box .btn-item__cur { background-color: transparent; border-color: #fff; } .theme-nav .header .logo a { background: url(../images/logo_blue.png) no-repeat !important; } .theme-nav .nav-item a { color: #333; } .theme-nav .nav-item a:hover { color: rgb(49, 165, 231); }