Difference between revisions of "Team:OUC-China/css/affix"
| Line 1: | Line 1: | ||
@media (min-width: 1030px) { | @media (min-width: 1030px) { | ||
| − | #myNav{width:200px;} | + | #myNav{width:200px;top:0px;} |
#myNav li{width:200px;} | #myNav li{width:200px;} | ||
} | } | ||
@media (min-width: 1200px) { | @media (min-width: 1200px) { | ||
| − | #myNav{width:250px;} | + | #myNav{width:250px;top: -30px;} |
#myNav li{width:250px;} | #myNav li{width:250px;} | ||
} | } | ||
| Line 36: | Line 36: | ||
} | } | ||
#myNav{ | #myNav{ | ||
| − | + | /* 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; | #BtnTop{position:fixed;top:85%;left:94%;z-index:2147483646;width:60px;height:60px;display:none;cursor:pointer; | ||
Revision as of 11:18, 19 October 2016
@media (min-width: 1030px) { #myNav{width:200px;top:0px;} #myNav li{width:200px;} } @media (min-width: 1200px) { #myNav{width:250px;top: -30px;} #myNav li{width:250px;} }
#myNav{ margin-top: 120px; margin-left: 10px; border:0; border-radius:0px; height:30px; font-family:Georgia; } #myNav li{ margin-top:10px; border:0; list-style:none; } #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{ /* 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;}
