(Created page with "@import url(https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css) html,body { margin: 0; padding: 0; height: 100%; width: 100%; } body { height: 100%; widt...") |
|||
Line 1: | Line 1: | ||
− | @import url(https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css) | + | @import url(https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css); |
html,body { | html,body { |
Revision as of 12:54, 28 September 2017
@import url(https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css);
html,body { margin: 0; padding: 0;
height: 100%; width: 100%;
} body {
height: 100%; width: 100%;
} /*.screen-hidden {
overflow: hidden;
}*/
- {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box; box-sizing: border-box;
} @media (min-width: 768px) .navbar-static-top {
border-radius: 0;
} .navbar-static-top {
z-index: 1000; border-width: 0 0 1px;
} @media (min-width: 768px) .navbar {
border-radius: 4px;
} .navbar-brand img {
/*width: 100%;*/ font-size: 0; padding: 0; margin: 0; height: 100%;
} .navbar { width: 100%; background-color: rgba(8,41,59,1);
background-image: url(img/bit-logo.svg); background-size: auto 100%; left: 0; /*border-color: #e7e7e7;*/ position: relative; min-height: 70px; /*margin-bottom: 20px;*/ /*border: 1px solid transparent;*/
} .navbar-header {
width: 200px; height: 50px;
display: block;
float: left;
} .navbar-nav {
/*margin-left: 100px;*/
float: left; list-style: none; }
- navbar a {
text-decoration: none; font-size: 13px; font-weight: bold;
}
- navbar * {
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
- navbar ul,
- navbar li {
margin: 0;
}
- navbar ul {
padding: 0; }
- navbar * {
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
} .navbar .myactive { background-color: rgba(255,255,255,0.1); } @media (min-width: 768px) .navbar-nav>li {
float: left;
} .nav { margin: 0; } .nav>li { padding: 0 20px;
position: relative; display: block; float: left;
} .nav>li a {
position: relative; display: block; padding-top: 25px; padding-bottom: 25px; line-height: 20px; color: #ccc; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;
} .nav>li a:hover {
color: rgba(255,255,255,0.5);
} /*------------------------dropup dropdown------------------------*/ .dropup, .dropdown {
position: relative;
} .dropdown-toggle:focus {
outline: 0;
} .dropdown-menu {
position: absolute; top: 100%; left: 0; z-index: 1000; display: none; float: left; min-width: 160px; padding: 5px 0; margin: 2px 0 0; list-style: none; font-size: 14px; text-align: left; background-color: #fff; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 4px; -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); background-clip: padding-box;
} .dropdown-menu.pull-right {
right: 0; left: auto;
} .dropdown-menu .divider {
height: 1px; margin: 9px 0; overflow: hidden; background-color: #e5e5e5;
} .dropdown-menu > li > a {
display: block; padding: 3px 20px; clear: both; font-weight: normal; line-height: 1.42857143; color: #333333; white-space: nowrap; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;
} .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
text-decoration: none; color: #262626; background-color: #f5f5f5; font-size: 2em;
} .dropdown-menu > .myactive > a, .dropdown-menu > .myactive > a:hover, .dropdown-menu > .myactive > a:focus {
color: #fff; text-decoration: none; outline: 0; background-color: #337ab7;
} .dropdown-menu > .disabled > a, .dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus {
color: #777777;
} .dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus {
text-decoration: none; background-color: transparent; background-image: none; filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); cursor: not-allowed;
} .open > .dropdown-menu {
display: block;
} .open > a {
outline: 0;
} .dropdown-menu-right {
left: auto; right: 0;
} .dropdown-menu-left {
left: 0; right: auto;
} .dropdown-header {
display: block; padding: 3px 20px; font-size: 12px; line-height: 1.42857143; color: #777777; white-space: nowrap;
} .dropdown-backdrop {
position: fixed; left: 0; right: 0; bottom: 0; top: 0; z-index: 990;
} /*------------------------dropup dropdown------------------------*/ .movepic-container {
/*position: relative;*/ width: 100%; height: 100%; margin: 0; padding: 0; display: flex; text-align: center; overflow: hidden;
} ul,ol,li {
/*font-size: 0;*//*控制ol,li之间没有空隙*/ list-style: none; /*padding: 0;*/
}
@media screen and (min-width: 678px) {
img { width: 100%; }
} @media screen and (min-width: 1024px) {
img { width: 100%; }
} .page-border {
position: absolute; width: 100%; height: 100%; margin: auto; /*overflow: hidden;*/
}
- fullpage {
position: relative; height: 100%; /*position: fixed;*/ width: 100%; top: -50px; /*top: -667px;控制出现那一页图片*/ text-align: center; font-size: 0;
/*translate3d(0px, px , 0px);*/ -webkit-transition: all 0.7s; -moz-transition: all 0.7s; -o-transition: all 0.7s; transition: all 0.7s;
} img {
margin: auto;
} .fp-section {
/*position: absolute;*/ /*visible的时候要加上*/ display: flex; height: 100%; width: 100%; /*-webkit-transition: all 1.5s; -moz-transition: all 1.5s; -o-transition: all 1.5s; transition: all 1.5s;*/ animation-duration: 0.5s; animation-timing-function: ease-out; animation-name: slidein;
} @keyframes slidein {
from { transform: translateY(500px); } to { transform: translateY(0); }
}
.circle {
display: none; z-index: 100; position: fixed; width: 100%; bottom: 60px;
display: flex;
} .circle ol {
display: none; margin: auto;
} .circle li {
float: left; margin: 2em;
} .circle li span {
display: block; height: 20px; width: 20px; border: 6px solid #333; border-radius: 50%; margin: auto; background-color: #fff;
} .circle li span:hover {
opacity: 0.8; box-shadow: 2px 2px 2px #fff;
} .fa-circle {
color: #444; text-shadow: 2px 2px 2px #fff;
}
- Maxamed {
width: 100%; display: flex; position: fixed; bottom: 3em;
} .nav__mine {
position: relative; margin: auto;
}
.nav__item {
line-height: 1; position: relative; /*display: block;*/ margin: 10px; padding: 0; letter-spacing: 0; color: currentColor; border: 0; background: none; -webkit-tap-highlight-color: rgba(0,0,0,0);
}
.nav__item:focus {
outline: none;
} .nav--maxamed .nav__item {
width: 36px; height: 36px;
}
.nav--maxamed .nav__item::before {
content: ; position: absolute; top: 0.75em; right: 0; width: 16px; height: 16px; box-shadow: inset 0 0 0 6px #3F598E; border: 2px solid #fff; border-radius: 50%; -webkit-transition: -webkit-transform 0.3s, box-shadow 0.3s; transition: transform 0.3s, box-shadow 0.3s;
}
.nav--maxamed .nav__item:not(.nav__item--current):focus::before, .nav--maxamed .nav__item:not(.nav__item--current):hover::before {
box-shadow: inset 0 0 0 6px #1D3045;
}
.nav--maxamed .nav__item--current::before {
-webkit-transform: scale3d(1.75,1.75,1); transform: scale3d(1.75,1.75,1); box-shadow: inset 0 0 0 1px #3F598E;
}
.nav--maxamed .nav__item-title {
position: absolute; left: 3.5em; top: 0; pointer-events: none; padding: 0.75em 0; font-weight: bold; white-space: nowrap; -webkit-transform-origin: 0 50%; transform-origin: 0 50%; opacity: 0; -webkit-transform: scale3d(0.5,0.5,1); transform: scale3d(0.5,0.5,1); -webkit-transition: opacity 0.5s, -webkit-transform 0.5s; transition: opacity 0.5s, transform 0.5s; -webkit-transition-timing-function: cubic-bezier(0.2,1,0.3,1); transition-timing-function: cubic-bezier(0.2,1,0.3,1);
}
.nav--maxamed .nav__item--current .nav__item-title {
opacity: 1; -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1);
}
/*====================下拉栏=============================*/
.caret {
display: inline-block; width: 0; height: 0; margin-left: 2px; vertical-align: middle; border-top: 4px dashed; border-top: 4px solid \9; border-right: 4px solid transparent; border-left: 4px solid transparent;
} .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
/*color: transparent;*/ color: white; /*background-color: #e7e7e7;*/ background-color: transparent;
} .navbar-default .navbar-nav>li>a {
color: #fff;
}
.nav>li a {
position: relative; display: block; padding-top: 25px; padding-bottom: 25px; line-height: 20px; color: white; /*background-color: #08293b;*/ -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;
}
.nav li>.dropdown-a {
position: relative; display: block; height: 50px; /*padding-top: 25px;*/ /*padding-bottom: 15px;*/ /*line-height: 50px;*/ color: white; background-color: #08293b; vertical-align:middle; text-align: center; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;
} .nav li>.dropdown-a>span {
position: relative; top: -12px;
} .nav>li a:hover {
/*background-color: transparent;*/ color: #aaa;
}
- navbar .dropdown-a:hover {
background-color: #08293b; opacity: 0.8;
}
- navbar>ul>li>a:hover {
color: #aaa;
}
- navbar>.nav>.myactive:hover {
color: #fff;
} .main-nav-link {
border: 0; margin: 0; height: 50px;
} .dropdown-menu li:ast-child .dropdown-a{
border-radius: 5px;
} .dropdown-menu li:last-child {
border-radius: 5px;
} .dropdown-menu {
border: 0; border-radius: 5px;
}