Difference between revisions of "Team:NJAU China"

Line 9: Line 9:
 
     <title>Home</title>
 
     <title>Home</title>
 
     <style type="text/css">
 
     <style type="text/css">
−
    #content{
+
/*hidden default property*/
−
    width:100%;
+
#content{
−
    background:red;
+
width:100%;
 +
background:red;
 
padding:0;
 
padding:0;
 
     }
 
     }
Line 20: Line 21:
 
display:none;
 
display:none;
 
}
 
}
 +
 +
/*my own content,over default property*/
 
#mycontent{
 
#mycontent{
 
width:100%;
 
width:100%;
−
 
 
background:pink;
 
background:pink;
 +
}
 +
 +
* {
 +
margin:0;
 +
padding:0;
 +
}
 +
 +
body {
 +
/*font-family:Tahoma, Geneva, sans-serif;*/
 +
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
 +
font-size:1em;
 +
margin:0 auto;
 +
}
 +
.nav {
 +
    left:0;
 +
width:auto;
 +
    background-color:#252525;
 +
    padding:0 100px;
 +
position:relative;
 +
}
 +
 +
/* general styles */
 +
.menu, .menu ul {
 +
    list-style: none;
 +
width:100%;
 +
    margin:0 auto;
 +
}
 +
.menu {
 +
    height: 58px;
 +
}
 +
.menu li {
 +
    background: -moz-linear-gradient(#292929, #252525);
 +
    background: -ms-linear-gradient(#292929, #252525);
 +
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #252525));
 +
    background: -webkit-linear-gradient(#292929, #252525);
 +
    background: -o-linear-gradient(#292929, #252525);
 +
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525');
 +
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525')";
 +
    background: linear-gradient(#292929, #252525);
 +
    border-bottom: 2px solid #181818;
 +
    border-top: 2px solid #303030;
 +
    min-width:100px;
 +
   
 +
}
 +
.menu li img{
 +
display:block;
 +
width:60px;
 +
height:54px;
 +
margin:0;
 +
}
 +
.menu > li {
 +
    display: block;
 +
    float: left;
 +
    position: relative;
 +
}
 +
.menu a {
 +
    border-left: 3px solid rgba(0, 0, 0, 0);
 +
    color: #FFF;
 +
    display: block;
 +
    font-family:Arial, Helvetica, sans-serif;
 +
    font-size: 15px;
 +
font-weight:bold;
 +
    line-height: 54px;
 +
    padding: 0 30px;
 +
    text-decoration: none;
 +
}
 +
 +
/* onhover styles */
 +
.menu li:hover {
 +
    background-color: #1c1c1c;
 +
    background: -moz-linear-gradient(#1c1c1c, #1b1b1b);
 +
    background: -ms-linear-gradient(#1c1c1c, #1b1b1b);
 +
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1c1c1c), color-stop(100%, #1b1b1b));
 +
    background: -webkit-linear-gradient(#1c1c1c, #1b1b1b);
 +
    background: -o-linear-gradient(#1c1c1c, #1b1b1b);
 +
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b');
 +
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b')";
 +
    background: linear-gradient(#1c1c1c, #1b1b1b);
 +
    border-bottom: 2px solid #222222;
 +
    border-top: 2px solid #1B1B1B;
 +
}
 +
.menu li:hover > a {
 +
    border-radius: 5px 0 0 0;
 +
    border-left: 3px solid #369;
 +
    color:#369;
 +
}
 +
 +
/* submenu styles */
 +
.submenu {
 +
    left: 0;
 +
    max-height: 0;
 +
    position: absolute;
 +
    top: 100%;
 +
    z-index: 0;
 +
min-width:220px;
 +
    -webkit-perspective: 400px;
 +
    -moz-perspective: 400px;
 +
    -ms-perspective: 400px;
 +
    -o-perspective: 400px;
 +
    perspective: 400px;
 +
 +
}
 +
.submenu li {
 +
    opacity: 0;
 +
    -webkit-transform: rotateY(90deg);
 +
    -moz-transform: rotateY(90deg);
 +
    -ms-transform: rotateY(90deg);
 +
    -o-transform: rotateY(90deg);
 +
    transform: rotateY(90deg);
 +
 +
    -webkit-transition: opacity .4s, -webkit-transform .5s;
 +
    -moz-transition: opacity .4s, -moz-transform .5s;
 +
    -ms-transition: opacity .4s, -ms-transform .5s;
 +
    -o-transition: opacity .4s, -o-transform .5s;
 +
    transition: opacity .4s, transform .5s;
 +
}
 +
.menu .submenu li:hover a {
 +
    border-left: 3px solid #454545;
 +
    border-radius: 0;
 +
    color: #69F;
 +
}
 +
.menu > li:hover .submenu, .menu > li:focus .submenu {
 +
    max-height: 2000px;
 +
    z-index: 10;
 +
}
 +
.menu > li:hover .submenu li, .menu > li:focus .submenu li {
 +
    opacity: 1;
 +
    -webkit-transform: none;
 +
    -moz-transform: none;
 +
    -ms-transform: none;
 +
    -o-transform: none;
 +
    transform: none;
 +
}
 +
 +
/* CSS3 delays for transition effects */
 +
.menu li:hover .submenu li:nth-child(1) {
 +
    -webkit-transition-delay: 0s;
 +
    -moz-transition-delay: 0s;
 +
    -ms-transition-delay: 0s;
 +
    -o-transition-delay: 0s;
 +
    transition-delay: 0s;
 +
}
 +
.menu li:hover .submenu li:nth-child(2) {
 +
    -webkit-transition-delay: 50ms;
 +
    -moz-transition-delay: 50ms;
 +
    -ms-transition-delay: 50ms;
 +
    -o-transition-delay: 50ms;
 +
    transition-delay: 50ms;
 +
}
 +
.menu li:hover .submenu li:nth-child(3) {
 +
    -webkit-transition-delay: 100ms;
 +
    -moz-transition-delay: 100ms;
 +
    -ms-transition-delay: 100ms;
 +
    -o-transition-delay: 100ms;
 +
    transition-delay: 100ms;
 +
}
 +
.menu li:hover .submenu li:nth-child(4) {
 +
    -webkit-transition-delay: 150ms;
 +
    -moz-transition-delay: 150ms;
 +
    -ms-transition-delay: 150ms;
 +
    -o-transition-delay: 150ms;
 +
    transition-delay: 150ms;
 +
}
 +
.menu li:hover .submenu li:nth-child(5) {
 +
    -webkit-transition-delay: 200ms;
 +
    -moz-transition-delay: 200ms;
 +
    -ms-transition-delay: 200ms;
 +
    -o-transition-delay: 200ms;
 +
    transition-delay: 200ms;
 +
}
 +
.menu li:hover .submenu li:nth-child(6) {
 +
    -webkit-transition-delay: 250ms;
 +
    -moz-transition-delay: 250ms;
 +
    -ms-transition-delay: 250ms;
 +
    -o-transition-delay: 250ms;
 +
    transition-delay: 250ms;
 +
}
 +
.menu li:hover .submenu li:nth-child(7) {
 +
    -webkit-transition-delay: 300ms;
 +
    -moz-transition-delay: 300ms;
 +
    -ms-transition-delay: 300ms;
 +
    -o-transition-delay: 300ms;
 +
    transition-delay: 300ms;
 +
}
 +
.menu li:hover .submenu li:nth-child(8) {
 +
    -webkit-transition-delay: 350ms;
 +
    -moz-transition-delay: 350ms;
 +
    -ms-transition-delay: 350ms;
 +
    -o-transition-delay: 350ms;
 +
    transition-delay: 350ms;
 +
}
 +
 +
.submenu li:nth-child(1) {
 +
    -webkit-transition-delay: 350ms;
 +
    -moz-transition-delay: 350ms;
 +
    -ms-transition-delay: 350ms;
 +
    -o-transition-delay: 350ms;
 +
    transition-delay: 350ms;
 +
}
 +
.submenu li:nth-child(2) {
 +
    -webkit-transition-delay: 300ms;
 +
    -moz-transition-delay: 300ms;
 +
    -ms-transition-delay: 300ms;
 +
    -o-transition-delay: 300ms;
 +
    transition-delay: 300ms;
 +
}
 +
.submenu li:nth-child(3) {
 +
    -webkit-transition-delay: 250ms;
 +
    -moz-transition-delay: 250ms;
 +
    -ms-transition-delay: 250ms;
 +
    -o-transition-delay: 250ms;
 +
    transition-delay: 250ms;
 +
}
 +
.submenu li:nth-child(4) {
 +
    -webkit-transition-delay: 200ms;
 +
    -moz-transition-delay: 200ms;
 +
    -ms-transition-delay: 200ms;
 +
    -o-transition-delay: 200ms;
 +
    transition-delay: 200ms;
 +
}
 +
.submenu li:nth-child(5) {
 +
    -webkit-transition-delay: 150ms;
 +
    -moz-transition-delay: 150ms;
 +
    -ms-transition-delay: 150ms;
 +
    -o-transition-delay: 150ms;
 +
    transition-delay: 150ms;
 +
}
 +
.submenu li:nth-child(6) {
 +
    -webkit-transition-delay: 100ms;
 +
    -moz-transition-delay: 100ms;
 +
    -ms-transition-delay: 100ms;
 +
    -o-transition-delay: 100ms;
 +
    transition-delay: 100ms;
 +
}
 +
.submenu li:nth-child(7) {
 +
    -webkit-transition-delay: 50ms;
 +
    -moz-transition-delay: 50ms;
 +
    -ms-transition-delay: 50ms;
 +
    -o-transition-delay: 50ms;
 +
    transition-delay: 50ms;
 +
}
 +
.submenu li:nth-child(8) {
 +
    -webkit-transition-delay: 0s;
 +
    -moz-transition-delay: 0s;
 +
    -ms-transition-delay: 0s;
 +
    -o-transition-delay: 0s;
 +
    transition-delay: 0s;
 
}
 
}
 
     </style>
 
     </style>

Revision as of 18:11, 17 September 2015

Home