:root { --main-color: #124075; --second-color: #004490; } .header { position: fixed; width: 100%; /*background: #303848;*/ background:rgba(18,64,118,1); z-index: 99999; border-radius: 0; top: 0px; /*margin-bottom: 160px;*/ /*border-bottom: 1px solid #303848;*/ } #mainNav li{ font-family: 微软雅黑; font-size: 1.1em; } .navbar-inverse .navbar-toggle { border-color: #3d97e3; background-color: #3d97e3; } .header .navbar { margin: 0; background: transparent !important; } .navbar-inverse .navbar-toggle .icon-bar { /*background-color: #303848;*/; } .navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus { background: #3d97e3; } .navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus { color: #3d97e3; } .navbar-inverse .navbar-toggle:hover .icon-bar { background: #fff; } .navbar-inverse .navbar-nav > li > a { color: #FFFFFF; } .navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus { color: #3d97e3; } .navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus { color: #3d97e3; background: none; } .navbar-toggle { } /*----Nav ----*/ .header .navbar-brand { float: left; padding: 16px 15px; line-height: 18px; height: 50px; /*color:#303848;*/ } .navbar-brand b { color: #fff; /*font-family: 'Pacifico', cursive;*/ font-family: 微软雅黑; font-size: 0.8em; font-weight:400; } .logo { font-size: 2.2em; text-shadow: none; } .logo img{ width: 40px; display: inline-block; margin: 0; margin-right: 6px; } .logo:hover { color: #5A5A5A; } .header .navbar { margin: 0; background: #fff; border: 0; } .navbar-inverse .navbar-nav > li > a { font-size: 1.0em; line-height: normal; margin: 17px; padding: 6px 10px !important; border-radius: 5px; } .navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus { color: #3d97e3; background: none; } .navbar-nav > li:hover > a { color: #fff; } .header .navbar-nav > li > a { padding: 25px 18px; text-transform: uppercase; } #navigation { position: fixed; top: 0; right: 0; margin: 0; padding: 0; width: 200px; background: #ffffff; box-shadow: 0 10px 10px -10px #000000; } #navigation > li { margin: 0; padding: 0; list-style: none; } #navigation > li > a { margin: 1px; color: #000000; background: #cccccc; display: block; padding: 5px; text-decoration: none; transition: all 400ms; } #navigation > li > a.current, #navigation > li:hover > a { background: #999999; } .search{ width: 160px; height: 30px; position: relative; margin-left: 10px; margin-top: 20px; background: #FFFFFF; border-radius: 4px; } .search .form-control{ height: 30px; line-height: 30px; width: 130px; border: none; font-size: 12px; } .search i{ display: block; position: absolute; right: 0; top: 0; height: 30px; background: #FFFFFF url(../img/search.png) center no-repeat; background-size:85%; width: 30px; border-radius: 4px; cursor: pointer; } .search i:hover{ background: #FFFFFF url(../img/search1.png) center no-repeat; background-size:85%; } #login{ color: #FFFFFF; line-height: 30px; font-size: 14px; border: 1px solid #FFFFFF; height: 30px; padding: 0 10px; border-radius: 4px; margin-top: 20px; margin-left: 10px; box-sizing: border-box; cursor: pointer; } #login:hover{ color:#3d97e3; border: 1px solid #3d97e3; } @media (min-width: 768px) { .header .navbar-brand { padding-left: 0; } .navbar-nav { float: right; } .navbar-inverse .navbar-nav > li > a { padding: 5px 12px !important; border-radius: 5px; margin: 19px 0px; } } @media (max-width: 768px) { .header .navbar-nav > li > a { padding: 25px 12px; } .navbar-inverse .navbar-nav > li > a { font-size: 1em; padding: 5px 7px !important; border-radius: 5px; margin: 19px 0px; } } @media (max-width:760px) { .header .navbar-nav > li > a { padding: 7px 12px; font-size: 14px; } .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form { border-color: #A8A8A8; } } @media (max-width: 480px) { .navbar-inverse .navbar-nav > li > a { font-size: 0.9em; padding: 5px 7px !important; margin: 2px 0px; } .navbar-toggle { margin: 17px; } } @media (max-width: 320px) { nav#filter li { display: inline-block; margin: 7px; } } .intro1{ overflow: hidden; width: 100%; margin: 20px 0; } .intro1 h2{ color: #3d97e3; font-family: 'Pacifico', cursive; font-size: 24px; border-bottom: 2px solid #3d97e3; margin-bottom: -1px; line-height: 50px; font-weight: bold; margin: 0; width: 180px; text-align: center; margin: 0 auto; } .intro1 a{ display: block; background: url(../img/more_right.jpg) no-repeat right center; padding-right: 15px; margin-right: 12px; color: #333; float: right; margin-top: 18px; cursor: pointer; }