Difference between revisions of "Template:SMMU-China/CSS main"

Line 1: Line 1:
 
.big_framework {
 
.big_framework {
−
background-color:white;  
+
background-color: white;  
−
display:block;
+
display: block;
 
width: 100%;
 
width: 100%;
 
}
 
}
  
 
.big_framework .medium_framework {
 
.big_framework .medium_framework {
−
margin:auto;
+
margin: auto;
 
padding-top: 120px;
 
padding-top: 120px;
 
max-width: 1400px;
 
max-width: 1400px;
−
width:90%;
+
width: 90%;
 
text-align: center;
 
text-align: center;
 +
}
 +
 +
.blank_framework{
 +
height: 80px;
 
}
 
}
  
 
/*header*/
 
/*header*/
−
.index-nav{width: 100%;border-bottom: 1px solid #eeeeee;height: 50px;box-sizing: border-box;background:white;}
+
.index-nav{
−
.index-nav-frame{width: 1200px;margin: 0 auto;}
+
width: 100%;
−
.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;}
+
border-bottom: 1px solid #eeeeee;
−
.index-nav-frame-line.active{color:#b63b4d;}
+
height: 80px;
 +
box-sizing: border-box;
 +
background:white;
 +
position: fixed;
 +
margin-top: 7px;
 +
}
  
−
.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{
−
.index-nav-frame-line-li{width: 100%;font-weight: 500;text-align: center;background: white;color: #666666;}
+
width: 1200px;
−
.index-nav-frame-line-li:hover{background: #444359;color: white;}
+
margin: 0px 0px 0px 50%;
−
.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;}
+
.index-nav-frame-line{
 +
color: #333333;
 +
background: white;
 +
float: left;
 +
position: relative;
 +
display: block;
 +
outline: none;
 +
cursor: pointer;
 +
width: 150px;
 +
line-height: 80px;
 +
text-align: center;
 +
font-weight: 700;
 +
font-size: 16px;
 +
 
 +
}
 +
 
 +
.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;
 +
}
  
−
.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) {
 
@media only screen and (max-width:800px) {
−
.index-nav-frame-line-li a{display: block;color: white;}
+
.index-nav-frame-line-li a{
−
.nav-line{display: block;border-bottom: 1px solid #eeeeee;}
+
display: block;
−
.nav-small{display: block;}
+
color: white;
−
.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%;}
+
.nav-line{
−
.index-nav-frame-line{width: 100%;height: 0;overflow: hidden;}
+
display: block;
−
.index-nav-frame-line-center{position: relative;background: #444359;}
+
border-bottom: 1px solid #eeeeee;
−
.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;}
+
.nav-small{
−
.index-nav-frame-line:focus{height: auto;border-bottom: 1px solid #ccc;}
+
display: block;
−
.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;}
+
.nav-small:focus~.index-nav-frame-line{
−
.index-nav-frame-line:focus .index-nav-frame-line-focus{display: block;}
+
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:57, 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; }

.blank_framework{ height: 80px; }

/*header*/ .index-nav{ width: 100%; border-bottom: 1px solid #eeeeee; height: 80px; box-sizing: border-box; background:white; position: fixed; margin-top: 7px; }

.index-nav-frame{ width: 1200px; margin: 0px 0px 0px 50%; }

.index-nav-frame-line{ color: #333333; background: white; float: left; position: relative; display: block; outline: none; cursor: pointer; width: 150px; line-height: 80px; text-align: center; font-weight: 700; font-size: 16px;

}

.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; } }