(Replaced content with ".big_framework { background-color:white; display:block; width: 100%; } .big_framework .medium_framework { margin:auto; padding-top: 120px; max-width: 1400px;...") |
|||
Line 14: | Line 14: | ||
/*header*/ | /*header*/ | ||
+ | .index-nav{width: 100%;border-bottom: 1px solid #eeeeee;height: 50px;box-sizing: border-box;background:white;} | ||
+ | .index-nav-frame{width: 1200px;margin: 0 auto;} | ||
+ | .index-nav-frame-line{color: #333333;background: white;float: left;position: relative;display: block;outline: none;cursor: pointer;width: 100px;line-height: 50px;text-align: center;font-weight: 700;} | ||
+ | .index-nav-frame-line.active{color:#b63b4d;} | ||
+ | |||
+ | .index-nav-frame-line-center{opacity: 0;height: 0;position: absolute;overflow: hidden;width: 100%;transition: all 0.5s;-webkit-transition: all 0.5s;-moz-transition: all 0.5s;/* Firefox 4 */-o-transition: all 0.5s; /* Opera */} | ||
+ | .index-nav-frame-line-li{width: 100%;font-weight: 500;text-align: center;background: white;color: #666666;} | ||
+ | .index-nav-frame-line-li:hover{background: #444359;color: white;} | ||
+ | .index-nav-frame-line-li:hover a{background: #444359;color: white;} | ||
+ | .index-nav-frame-line-focus:focus{display: none;} | ||
+ | .index-nav-frame-line:hover .index-nav-frame-line-center{height:auto;opacity: 1;} | ||
+ | |||
+ | .nav-line{height: 50px;width: 100%;position: relative;display: none;outline: none;} | ||
+ | .nav-small{width: 30px;height: 30px;position: absolute;right: 10px;top:10px;cursor: pointer;display: none;outline: none;} | ||
+ | .nav-small img{width: 100%;height: 100%;object-fit: cover;} | ||
+ | .nav-small-focus{position: absolute;width: 100%;height: 100%;display: none;} | ||
+ | .nav-small-focus:focus{display: none;} | ||
+ | @media only screen and (max-width:800px) { | ||
+ | .index-nav-frame-line-li a{display: block;color: white;} | ||
+ | .nav-line{display: block;border-bottom: 1px solid #eeeeee;} | ||
+ | .nav-small{display: block;} | ||
+ | .nav-small:focus~.index-nav-frame-line{height: auto;border-bottom: 1px solid #ccc;} | ||
+ | .nav-small:focus .nav-small-focus{display: block;} | ||
+ | .index-nav-frame{width: 100%;} | ||
+ | .index-nav-frame-line{width: 100%;height: 0;overflow: hidden;} | ||
+ | .index-nav-frame-line-center{position: relative;background: #444359;} | ||
+ | .index-nav-frame-line:hover .index-nav-frame-line-center{height:0;opacity: 0;} | ||
+ | .index-nav-frame-line-li{border-bottom: 1px solid #4b4a5e;color: #d9d9d9;background: #444359;} | ||
+ | .index-nav-frame-line-li:hover{background: #b63b4d;} | ||
+ | .index-nav-frame-line:focus{height: auto;border-bottom: 1px solid #ccc;} | ||
+ | .index-nav-frame-line:focus>.index-nav-frame-line-center{height:auto;opacity: 1;} | ||
+ | .index-nav-frame-line:focus .index-nav-frame-line-header{color: #B63B4D;} | ||
+ | .index-nav-frame-line-focus{display: none;width: 100%;height: 50px;position: absolute;left: 0;top: 0;} | ||
+ | .index-nav-frame-line:focus .index-nav-frame-line-focus{display: block;} | ||
+ | |||
+ | } |
Revision as of 11:28, 24 July 2019
.big_framework { background-color:white; display:block; width: 100%; }
.big_framework .medium_framework { margin:auto; padding-top: 120px; max-width: 1400px; width:90%; text-align: center; }
/*header*/ .index-nav{width: 100%;border-bottom: 1px solid #eeeeee;height: 50px;box-sizing: border-box;background:white;} .index-nav-frame{width: 1200px;margin: 0 auto;} .index-nav-frame-line{color: #333333;background: white;float: left;position: relative;display: block;outline: none;cursor: pointer;width: 100px;line-height: 50px;text-align: center;font-weight: 700;} .index-nav-frame-line.active{color:#b63b4d;}
.index-nav-frame-line-center{opacity: 0;height: 0;position: absolute;overflow: hidden;width: 100%;transition: all 0.5s;-webkit-transition: all 0.5s;-moz-transition: all 0.5s;/* Firefox 4 */-o-transition: all 0.5s; /* Opera */} .index-nav-frame-line-li{width: 100%;font-weight: 500;text-align: center;background: white;color: #666666;} .index-nav-frame-line-li:hover{background: #444359;color: white;} .index-nav-frame-line-li:hover a{background: #444359;color: white;} .index-nav-frame-line-focus:focus{display: none;} .index-nav-frame-line:hover .index-nav-frame-line-center{height:auto;opacity: 1;}
.nav-line{height: 50px;width: 100%;position: relative;display: none;outline: none;} .nav-small{width: 30px;height: 30px;position: absolute;right: 10px;top:10px;cursor: pointer;display: none;outline: none;} .nav-small img{width: 100%;height: 100%;object-fit: cover;} .nav-small-focus{position: absolute;width: 100%;height: 100%;display: none;} .nav-small-focus:focus{display: none;} @media only screen and (max-width:800px) { .index-nav-frame-line-li a{display: block;color: white;} .nav-line{display: block;border-bottom: 1px solid #eeeeee;} .nav-small{display: block;} .nav-small:focus~.index-nav-frame-line{height: auto;border-bottom: 1px solid #ccc;} .nav-small:focus .nav-small-focus{display: block;} .index-nav-frame{width: 100%;} .index-nav-frame-line{width: 100%;height: 0;overflow: hidden;} .index-nav-frame-line-center{position: relative;background: #444359;} .index-nav-frame-line:hover .index-nav-frame-line-center{height:0;opacity: 0;} .index-nav-frame-line-li{border-bottom: 1px solid #4b4a5e;color: #d9d9d9;background: #444359;} .index-nav-frame-line-li:hover{background: #b63b4d;} .index-nav-frame-line:focus{height: auto;border-bottom: 1px solid #ccc;} .index-nav-frame-line:focus>.index-nav-frame-line-center{height:auto;opacity: 1;} .index-nav-frame-line:focus .index-nav-frame-line-header{color: #B63B4D;} .index-nav-frame-line-focus{display: none;width: 100%;height: 50px;position: absolute;left: 0;top: 0;} .index-nav-frame-line:focus .index-nav-frame-line-focus{display: block;}
}