Difference between revisions of "Team:OUC-China/css/affix"

(Created page with " ul.nav-tabs{ width: 140px; margin-top: 20px; border-radius: 4px; border: 1px solid #ddd; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067); } ul.nav-tabs li{ margin: 0; bor...")
 
 
(19 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
ul.nav-tabs{
+
 
−
width: 140px;
+
@media (min-width: 1200px) {  
−
margin-top: 20px;
+
#myNav{width:250px;}
−
border-radius: 4px;
+
#myNav li{width:250px;}
−
border: 1px solid #ddd;
+
}
−
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
+
 +
#myNav{
 +
margin-top: 120px;
 +
margin-left: 10px;
 +
width:200px;
 +
border:0;
 +
border-radius:0px;
 +
height:30px;
 +
font-family:Georgia;
 
}
 
}
−
ul.nav-tabs li{
+
#myNav li{
−
margin: 0;
+
margin-top:10px;
−
border-top: 1px solid #ddd;
+
border:0;
 +
list-style:none;
 +
width:200px;
 
}
 
}
−
ul.nav-tabs li:first-child{
+
#myNav li:first-child{
−
border-top: none;
+
border:0;border-top: none;
 
}
 
}
−
ul.nav-tabs li a{
+
#myNav li a{
 +
border:0;
 
margin: 0;
 
margin: 0;
−
padding: 8px 16px;
+
padding: 8px 0px;
−
border-radius: 0;
+
font-size:20px;
 +
text-decoration:none;
 +
color:black;
 +
}
 +
#myNav li.active a, #myNav li a:hover{
 +
color:#3399ff;
 
}
 
}
−
ul.nav-tabs li.active a, ul.nav-tabs li.active a:hover{
+
#myNav{
−
color: #fff;
+
top: 10px; /* Set the top position of pinned element */
−
background: #0088cc;
+
−
border: 1px solid #0088cc;
+
 
}
 
}
−
#myNav .active{
+
#BtnTop{position:fixed;top:85%;left:94%;z-index:2147483646;width:60px;height:60px;display:none;cursor:pointer;
−
color: #fff;
+
animation:myfirst 5s;
−
background: #0088cc;
+
-moz-animation:myfirst 5s;
−
border: 1px solid #0088cc;
+
-webkit-animation:myfirst 5s;
 +
-o-animation:myfirst 5s;
 +
animation-iteration-count:infinite;
 +
-moz-animation-iteration-count:infinite;
 +
-webkit-animation-iteration-count:infinite;
 +
-o-animation-iteration-count:infinite;
 +
animation-timing-function: linear;
 +
-moz-animation-timing-function: linear;  
 +
-webkit-animation-timing-function: linear;  
 +
-o-animation-timing-function: linear;  
 
}
 
}
−
#myNav a:hover{
+
 
−
color: #fff;
+
@keyframes myfirst
−
background: #0088cc;
+
{
−
border: 1px solid #0088cc;
+
from {transform:rotate(0deg);
 +
-ms-transform:rotate(0deg);
 +
-moz-transform:rotate(0deg);
 +
-webkit-transform:rotate(0deg);
 +
-o-transform:rotate(0deg);}
 +
to {transform:rotate(360deg);
 +
-ms-transform:rotate(360deg);
 +
-moz-transform:rotate(360deg);
 +
-webkit-transform:rotate(360deg);
 +
-o-transform:rotate(360deg);}
 
}
 
}
−
ul.nav-tabs li:first-child a{
+
 
−
border-radius: 4px 4px 0 0;
+
@-moz-keyframes myfirst
 +
{
 +
from {transform:rotate(0deg);
 +
-ms-transform:rotate(0deg);
 +
-moz-transform:rotate(0deg);
 +
-webkit-transform:rotate(0deg);
 +
-o-transform:rotate(0deg);}
 +
to {transform:rotate(360deg);
 +
-ms-transform:rotate(360deg);
 +
-moz-transform:rotate(360deg);
 +
-webkit-transform:rotate(360deg);
 +
-o-transform:rotate(360deg);}
 
}
 
}
−
ul.nav-tabs li:last-child a{
+
 
−
border-radius: 0 0 4px 4px;
+
@-webkit-keyframes myfirst
 +
{
 +
from {transform:rotate(0deg);
 +
-ms-transform:rotate(0deg);
 +
-moz-transform:rotate(0deg);
 +
-webkit-transform:rotate(0deg);
 +
-o-transform:rotate(0deg);}
 +
to {transform:rotate(360deg);
 +
-ms-transform:rotate(360deg);
 +
-moz-transform:rotate(360deg);
 +
-webkit-transform:rotate(360deg);
 +
-o-transform:rotate(360deg);}
 
}
 
}
−
ul.nav-tabs.affix{
+
 
−
top: 30px; /* Set the top position of pinned element */
+
@-o-keyframes myfirst
 +
{
 +
from {transform:rotate(0deg);
 +
-ms-transform:rotate(0deg);
 +
-moz-transform:rotate(0deg);
 +
-webkit-transform:rotate(0deg);
 +
-o-transform:rotate(0deg);}
 +
to {transform:rotate(360deg);
 +
-ms-transform:rotate(360deg);
 +
-moz-transform:rotate(360deg);
 +
-webkit-transform:rotate(360deg);
 +
-o-transform:rotate(360deg); }
 
}
 
}
−
#myScrollspy{display:none;}
 
−
#BtnTop{ display:inline-block; display:none; width:139px; height:40px;background:#0088cc; color:black; cursor:pointer;text-decoration:none;text-indent:16px; border-radius: 0 0 4px 4px;border: 1px solid #ddd;}
 
−
#BtnTop span{ display:block; width:140px; height:40px; line-height:20px; font-size:14px;}
 
 
 
−
#BtnTop:hover{ background:#0088cc; color:#fff; zoom:1;}
 
 
p{text-align: justify;}
 
p{text-align: justify;}

Latest revision as of 03:48, 11 November 2016

@media (min-width: 1200px) { #myNav{width:250px;} #myNav li{width:250px;} }

#myNav{ margin-top: 120px; margin-left: 10px; width:200px; border:0; border-radius:0px; height:30px; font-family:Georgia; } #myNav li{ margin-top:10px; border:0; list-style:none; width:200px; } #myNav li:first-child{ border:0;border-top: none; } #myNav li a{ border:0; margin: 0; padding: 8px 0px; font-size:20px; text-decoration:none; color:black; } #myNav li.active a, #myNav li a:hover{ color:#3399ff; } #myNav{ top: 10px; /* Set the top position of pinned element */ } #BtnTop{position:fixed;top:85%;left:94%;z-index:2147483646;width:60px;height:60px;display:none;cursor:pointer; animation:myfirst 5s; -moz-animation:myfirst 5s; -webkit-animation:myfirst 5s; -o-animation:myfirst 5s; animation-iteration-count:infinite; -moz-animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite; -o-animation-iteration-count:infinite; animation-timing-function: linear; -moz-animation-timing-function: linear; -webkit-animation-timing-function: linear; -o-animation-timing-function: linear; }

@keyframes myfirst { from {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);} to {transform:rotate(360deg); -ms-transform:rotate(360deg); -moz-transform:rotate(360deg); -webkit-transform:rotate(360deg); -o-transform:rotate(360deg);} }

@-moz-keyframes myfirst { from {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);} to {transform:rotate(360deg); -ms-transform:rotate(360deg); -moz-transform:rotate(360deg); -webkit-transform:rotate(360deg); -o-transform:rotate(360deg);} }

@-webkit-keyframes myfirst { from {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);} to {transform:rotate(360deg); -ms-transform:rotate(360deg); -moz-transform:rotate(360deg); -webkit-transform:rotate(360deg); -o-transform:rotate(360deg);} }

@-o-keyframes myfirst { from {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);} to {transform:rotate(360deg); -ms-transform:rotate(360deg); -moz-transform:rotate(360deg); -webkit-transform:rotate(360deg); -o-transform:rotate(360deg); } }

p{text-align: justify;}