Team:SYSU-China/test
From 2011.igem.org
(Difference between revisions)
Line 12: | Line 12: | ||
<link href="../style.css" rel="stylesheet" type="text/css" /> | <link href="../style.css" rel="stylesheet" type="text/css" /> | ||
<style type="text/css"> | <style type="text/css"> | ||
+ | #menu { | ||
+ | position:relative; | ||
+ | height:75px; | ||
+ | background:url(images/menu.png) repeat-x 0 center; | ||
+ | } | ||
+ | #menu .menu { | ||
+ | left:50px; | ||
+ | position:absolute; | ||
+ | } | ||
+ | #menu * { | ||
+ | list-style:none; | ||
+ | border:0; | ||
+ | padding:0; | ||
+ | margin:0; | ||
+ | } | ||
+ | #menu a { | ||
+ | display:block; | ||
+ | padding-left:33px; | ||
+ | } | ||
+ | #menu a span { | ||
+ | display:block; | ||
+ | padding:30px 33px 37px 2px; | ||
+ | white-space:nowrap; | ||
+ | } | ||
+ | #menu li { | ||
+ | float:left; | ||
+ | background:url(images/pix.gif); | ||
+ | } | ||
+ | #menu li li { float:none; } | ||
+ | #menu div { | ||
+ | display:none; | ||
+ | position:absolute; | ||
+ | background:url(images/pix.gif); | ||
+ | margin-top:-35px; | ||
+ | width:200px; | ||
+ | } | ||
+ | #menu div ul { position:relative; } | ||
+ | #menu div div { | ||
+ | margin:-50px 0 0 -9px; | ||
+ | left:100%; | ||
+ | } | ||
+ | #menu li:hover>div { display:block; } | ||
+ | |||
+ | /** ie7 */ | ||
+ | *:first-child+html #menu div div { display:block; top:-9999px; } | ||
+ | *:first-child+html #menu li:hover>div { top:auto; } | ||
+ | |||
+ | #menu div.columns { width:200px; } | ||
+ | #menu div.columns ul { | ||
+ | float:left; | ||
+ | width:200px; | ||
+ | position:static; | ||
+ | } | ||
+ | #menu div.columns a { white-space:normal; } | ||
+ | #menu div.two { width:400px; } | ||
+ | #menu div.two ul.one div { margin-left:-209px; } | ||
+ | #menu div.two ul.one div div, | ||
+ | #menu div.two ul.two div { margin-left:-9px; } | ||
+ | #menu div.three { width:600px; } | ||
+ | #menu div.three ul.one div { margin-left:-409px; } | ||
+ | #menu div.three ul.two div { margin-left:-209px; } | ||
+ | #menu div.three ul.one div div, | ||
+ | #menu div.three ul.two div div, | ||
+ | #menu div.three ul.three div { margin-left:-9px; } | ||
+ | #menu div.four { width:800px; } | ||
+ | #menu div.four ul.one div { margin-left:-609px; } | ||
+ | #menu div.four ul.two div { margin-left:-409px; } | ||
+ | #menu div.four ul.three div { margin-left:-209px; } | ||
+ | #menu div.four ul.one div div, | ||
+ | #menu div.four ul.two div div, | ||
+ | #menu div.four ul.three div div, | ||
+ | #menu div.four ul.four div { margin-left:-9px; } | ||
+ | #menu div.five { width:1000px; } | ||
+ | #menu div.five ul.one div { margin-left:-809px; } | ||
+ | #menu div.five ul.two div { margin-left:-609px; } | ||
+ | #menu div.five ul.three div { margin-left:-409px; } | ||
+ | #menu div.five ul.four div { margin-left:-209px; } | ||
+ | #menu div.five ul.one div div, | ||
+ | #menu div.five ul.two div div, | ||
+ | #menu div.five ul.three div div, | ||
+ | #menu div.five ul.four div div, | ||
+ | #menu div.five ul.five div { margin-left:-9px; } | ||
+ | |||
+ | #menu a, #menu a span { | ||
+ | font-family:'Trebuchet MS', Tahoma, Arial; | ||
+ | font-size:16px; | ||
+ | line-height:24px; | ||
+ | color:#fff; | ||
+ | text-decoration:none; | ||
+ | font-weight:normal; | ||
+ | } | ||
+ | #menu a { | ||
+ | text-shadow:rgb(64,49,25) -1px -1px 0; | ||
+ | background:url(images/item.png) no-repeat left -546px; | ||
+ | } | ||
+ | #menu a span { | ||
+ | background:url(images/item.png) no-repeat right 0; | ||
+ | color: #CCC; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | #menu li.current>a { background-position:left -637px; } | ||
+ | #menu li.current>a span { background-position:right -182px; } | ||
+ | #menu a.parent span { | ||
+ | background-position:right -91px; | ||
+ | padding-right:60px; | ||
+ | } | ||
+ | #menu li.current>a.parent span { background-position:right -273px; } | ||
+ | #menu>ul>li:hover>a, #menu a:hover { background-position:left -637px; } | ||
+ | #menu>ul>li:hover>a span, #menu a:hover span { | ||
+ | background-position:right -182px; | ||
+ | color: #FFF; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | #menu>ul>li:hover>a.parent span, #menu a.parent:hover span { | ||
+ | background-position:right -455px; | ||
+ | } | ||
+ | |||
+ | #menu div a { | ||
+ | margin-left:4px; | ||
+ | padding:4px 0 0 0; | ||
+ | width:190px; | ||
+ | background:url(images/subitem.png) no-repeat 0 top; | ||
+ | text-shadow:#111 -1px -1px 0; | ||
+ | } | ||
+ | #menu div a span { | ||
+ | font-size:14px; | ||
+ | background:url(images/subitem.png) no-repeat -384px bottom; | ||
+ | padding:3px 14px 10px 11px; | ||
+ | white-space:normal; | ||
+ | color:rgb(195,191,183); | ||
+ | } | ||
+ | #menu div a:hover, | ||
+ | #menu div ul>li:hover>a.parent, #menu div ul li a.parent:hover { | ||
+ | background-position:-192px top; | ||
+ | } | ||
+ | #menu div a:hover span { | ||
+ | color:#fff; | ||
+ | background-position:-768px bottom; | ||
+ | } | ||
+ | #menu div a.parent span { background-position:-576px bottom; } | ||
+ | #menu div ul>li:hover>a.parent span, #menu div ul li a.parent:hover span { | ||
+ | color:#fff; | ||
+ | background-position:-960px bottom; | ||
+ | } | ||
+ | |||
+ | #menu div { | ||
+ | background:url(images/columns.png) no-repeat -200px -14px; | ||
+ | padding-top:14px; | ||
+ | } | ||
+ | #menu div ul { | ||
+ | width:200px; | ||
+ | background:url(images/columns.png) no-repeat 0 bottom; | ||
+ | padding-top:11px; | ||
+ | padding-bottom:17px; | ||
+ | } | ||
+ | #menu div div { background-position:-200px top; } | ||
+ | #menu div div ul { padding-top:0; } | ||
+ | |||
+ | #menu div.columns { | ||
+ | padding-top:0; | ||
+ | margin-top:-21px; | ||
+ | } | ||
+ | #menu div div.columns { margin-top:-36px; } | ||
+ | #menu div.columns>ul { | ||
+ | padding-top:25px; | ||
+ | margin-top:-14px; | ||
+ | } | ||
+ | #menu div.two { background-position:-1000px bottom; } | ||
+ | #menu div.three { background-position:-1400px bottom; } | ||
+ | #menu div.four { background-position:-2000px bottom; } | ||
+ | #menu div.five { background-position:-2800px bottom; } | ||
+ | #menu div.columns ul.two, | ||
+ | #menu div.columns ul.three, | ||
+ | #menu div.columns ul.four, | ||
+ | #menu div.columns ul.five { background-position:-550px -14px; } | ||
+ | #menu div.columns ul.one { background-position:-400px -14px; } | ||
+ | #menu div.two ul.two, | ||
+ | #menu div.three ul.three, | ||
+ | #menu div.four ul.four, | ||
+ | #menu div.five ul.five { background-position:-800px -14px; } | ||
+ | |||
+ | #menu div.columns>ul>li>a { | ||
+ | margin-left:0; | ||
+ | width:200px; | ||
+ | } | ||
+ | #menu div.columns>ul.one>li>a { | ||
+ | margin-left:4px; | ||
+ | width:194px; | ||
+ | } | ||
+ | #menu div.two>ul.two>li>a, | ||
+ | #menu div.three>ul.three>li>a, | ||
+ | #menu div.four>ul.four>li>a, | ||
+ | #menu div.five>ul.five>li>a { | ||
+ | width:194px; | ||
+ | } | ||
+ | |||
+ | #menu.active a { | ||
+ | z-index:780; | ||
+ | position:relative; | ||
+ | } | ||
+ | #menu.active li { z-index:778; } | ||
+ | #menu.active div div { z-index:781; } | ||
+ | #menu.active div a { position:static; } | ||
+ | |||
+ | #menu.active li.back { | ||
+ | background:url(images/item.png) no-repeat left -637px; | ||
+ | height:91px; | ||
+ | position:absolute; | ||
+ | padding:0; | ||
+ | margin:0; | ||
+ | } | ||
+ | #menu.active li.back .left { | ||
+ | display:block; | ||
+ | padding:0; | ||
+ | width:auto; | ||
+ | background:url(images/item.png) no-repeat right -182px; | ||
+ | height:91px; | ||
+ | margin:0 5px 0 28px; | ||
+ | position:relative; | ||
+ | left:5px; | ||
+ | |||
+ | } | ||
+ | #menu.active li.current-back, #menu.active li.current-parent-back { background-position:left -637px; } | ||
+ | #menu.active li.current-back .left { background-position:right -182px; } | ||
+ | #menu.active li.current-parent-back .left { background-position:right -182px; } | ||
+ | |||
+ | #menu.active .spanbox { | ||
+ | position:absolute; | ||
+ | display:none; | ||
+ | background:url(images/pix.gif); | ||
+ | margin-top:-21px; | ||
+ | width:200px; | ||
+ | } | ||
+ | #menu.active div { | ||
+ | margin-top:-14px; | ||
+ | display:block; | ||
+ | position:relative; | ||
+ | } | ||
+ | #menu.active div .spanbox { | ||
+ | margin:0 0 0 -6px; | ||
+ | left:100%; | ||
+ | } | ||
+ | #menu.active .spanbox .spanbox { margin-top:-50px; } | ||
+ | #menu.active .spanbox .spanbox div { margin:0; } | ||
+ | |||
+ | /** ie7 */ | ||
+ | *:first-child+html #menu.active div div { top:auto; } | ||
+ | *:first-child+html .menu-images-preloading { visibility:hidden; } | ||
+ | |||
+ | #menu.active div.two ul.one .spanbox { margin-left:-206px; } | ||
+ | #menu.active div.two ul.one .spanbox .spanbox, | ||
+ | #menu.active div.two ul.two .spanbox { margin-left:-6px; } | ||
+ | #menu.active div.three ul.one .spanbox { margin-left:-406px; } | ||
+ | #menu.active div.three ul.two .spanbox { margin-left:-206px; } | ||
+ | #menu.active div.three ul.one .spanbox .spanbox, | ||
+ | #menu.active div.three ul.two .spanbox .spanbox, | ||
+ | #menu.active div.three ul.three .spanbox { margin-left:-6px; } | ||
+ | #menu.active div.four ul.one .spanbox { margin-left:-606px; } | ||
+ | #menu.active div.four ul.two .spanbox { margin-left:-406px; } | ||
+ | #menu.active div.four ul.three .spanbox { margin-left:-206px; } | ||
+ | #menu.active div.four ul.one .spanbox .spanbox, | ||
+ | #menu.active div.four ul.two .spanbox .spanbox, | ||
+ | #menu.active div.four ul.three .spanbox .spanbox, | ||
+ | #menu.active div.four ul.four .spanbox { margin-left:-6px; } | ||
+ | #menu.active div.five ul.one .spanbox { margin-left:-806px; } | ||
+ | #menu.active div.five ul.two .spanbox { margin-left:-606px; } | ||
+ | #menu.active div.five ul.three .spanbox { margin-left:-406px; } | ||
+ | #menu.active div.five ul.four .spanbox { margin-left:-206px; } | ||
+ | #menu.active div.five ul.one .spanbox .spanbox, | ||
+ | #menu.active div.five ul.two .spanbox .spanbox, | ||
+ | #menu.active div.five ul.three .spanbox .spanbox, | ||
+ | #menu.active div.five ul.four .spanbox .spanbox, | ||
+ | #menu.active div.five ul.five .spanbox { margin-left:-6px; } | ||
+ | #menu.active div.columns ul .spanbox div { margin-left:0; } | ||
+ | #menu.active div.two, | ||
+ | #menu.active div.three, | ||
+ | #menu.active div.four, | ||
+ | #menu.active div.five { padding-bottom:14px; } | ||
+ | |||
+ | .menu-images-preloading, | ||
+ | .menu-images-preloading div { | ||
+ | top:0; | ||
+ | left:0; | ||
+ | width:4px; | ||
+ | height:2px; | ||
+ | opacity:0.1; | ||
+ | overflow:hidden; | ||
+ | position:absolute; | ||
+ | } | ||
+ | .menu-images-preloading { width:2px; } | ||
+ | .menu-images-preloading .columns-png { background:url(images/columns.png) no-repeat; } | ||
+ | .menu-images-preloading .subitem-png { background:url(images/subitem.png) no-repeat; } | ||
+ | |||
#background_shadow { | #background_shadow { | ||
width: 1080px; | width: 1080px; |
Revision as of 18:54, 1 October 2011
![](BG_pics/project/project_intro_pics/m_c_sh.jpg)
asdfdfdsa
![](BG_pics/about_us/st_sh.jpg)
asdfdfdsa
![](BG_pics/about_us/lac_sh.jpg)
asdfdfdsa