Difference between revisions of "Team:NJAU China"
Cassie0707 (Talk | contribs) |
Cassie0707 (Talk | contribs) |
||
Line 9: | Line 9: | ||
<title>Home</title> | <title>Home</title> | ||
<style type="text/css"> | <style type="text/css"> | ||
− | + | /*hidden default property*/ | |
− | + | #content{ | |
− | + | 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