Difference between revisions of "Template:Team:NUDT CHINA/CSS"
PatriciaXie (Talk | contribs) |
PatriciaXie (Talk | contribs) |
||
| (15 intermediate revisions by the same user not shown) | |||
| Line 2: | Line 2: | ||
<html> | <html> | ||
<head> | <head> | ||
| + | <!--Javascript--> | ||
| + | <!--jQuery--> | ||
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script> | <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script> | ||
| − | + | <!--MENU--> | |
| + | <script type="text/javascript"> | ||
| + | $(document).ready(function() { | ||
| + | $('#menu li a').hover( | ||
| + | function() {$(this).animate({'paddingLeft': '1.2em', 'paddingRight': '1.2em'}, 'fast');}, | ||
| + | function() {$(this).animate({'paddingLeft': '0.5em', 'paddingRight': '0.5em'}, 'fast');} | ||
| + | ); | ||
| + | }); | ||
| + | </script> | ||
| + | <!--NAVIGATION--> | ||
| + | <script type="text/javascript"> | ||
| + | $(document).ready(function() { | ||
| + | $('#navigation li a').hover( | ||
| + | function() {$(this).animate({'paddingLeft': '1.2em', 'paddingRight': '1.2em'}, 'fast');}, | ||
| + | function() {$(this).animate({'paddingLeft': '0.5em', 'paddingRight': '0.5em'}, 'fast');} | ||
| + | ); | ||
| + | }); | ||
| + | $(function(){ | ||
| + | $("a").click(function(){ | ||
| + | $("html,body").animate({ scrollTop:$($(this).attr("href")).offset().top + "px"},1000);} | ||
| + | ); | ||
| + | }); | ||
| + | </script> | ||
| + | <!--iGEM_LOGO--> | ||
| + | <script type="text/javascript"> | ||
| + | $(document).ready(function() { | ||
| + | $("#iGEM_LOGO").mouseover( | ||
| + | function(){$(this).animate({'width': '140px', 'height': '140px'},"fast"); | ||
| + | }); | ||
| + | $("#iGEM_LOGO").mouseout( | ||
| + | function(){$(this).animate({'width': '137px', 'height': '137px'},"fast"); | ||
| + | }); | ||
| + | }); | ||
| + | </script> | ||
| + | <!--css--> | ||
<!--RESET--> | <!--RESET--> | ||
<style type="text/css"> | <style type="text/css"> | ||
| Line 21: | Line 57: | ||
background-position: 0px 0px; | background-position: 0px 0px; | ||
height: 100%; | height: 100%; | ||
| + | width: auto; | ||
| + | } | ||
| + | </style> | ||
| + | <!-- MAINCONTAINER--> | ||
| + | <style type="text/css"> | ||
| + | #mainContainer { | ||
| + | width: 900px; | ||
| + | overflow:visible; | ||
| + | float:center; | ||
| + | margin-left:20px; | ||
| + | margin-bottom: 10px; | ||
| + | } | ||
| + | </style> | ||
| + | <!--BANNER CONTAINER--> | ||
| + | <style type="text/css"> | ||
| + | #bannerContainer { | ||
| + | margin-left:180px; | ||
width: auto; | width: auto; | ||
} | } | ||
| Line 46: | Line 99: | ||
#menu li | #menu li | ||
{ | { | ||
| + | list-style-type:none; | ||
position: relative; | position: relative; | ||
font-family: "Trebuchet MS", Helvetica, sans-serif; | font-family: "Trebuchet MS", Helvetica, sans-serif; | ||
| − | font-size: | + | font-size: 15px; |
} | } | ||
#menu a | #menu a | ||
| Line 54: | Line 108: | ||
position: relative; | position: relative; | ||
display: inline-block; | display: inline-block; | ||
| − | margin: | + | margin: 4px 0px 0px 0px; |
padding: 0.3em .5em 0.3em; | padding: 0.3em .5em 0.3em; | ||
text-decoration: none; | text-decoration: none; | ||
| Line 76: | Line 130: | ||
color: #ffffff; | color: #ffffff; | ||
border-radius: 0 1em 1em 0; | border-radius: 0 1em 1em 0; | ||
| − | font-size: | + | font-size: 13px; |
} | } | ||
#menu a:hover | #menu a:hover | ||
| Line 99: | Line 153: | ||
{ | { | ||
position: fixed; | position: fixed; | ||
| − | top: | + | top: 170px; |
right: 0px; | right: 0px; | ||
text-align: right; | text-align: right; | ||
| Line 107: | Line 161: | ||
margin-right: 30px; | margin-right: 30px; | ||
margin-top: 0px; | margin-top: 0px; | ||
| + | margin-bottom: 30px; | ||
} | } | ||
#navigation ul | #navigation ul | ||
| Line 115: | Line 170: | ||
#navigation li | #navigation li | ||
{ | { | ||
| + | list-style-type:none; | ||
position: relative; | position: relative; | ||
font-family: "Trebuchet MS", Helvetica, sans-serif; | font-family: "Trebuchet MS", Helvetica, sans-serif; | ||
| − | font-size: | + | font-size: 15px; |
} | } | ||
#navigation a | #navigation a | ||
| Line 123: | Line 179: | ||
position: relative; | position: relative; | ||
display: inline-block; | display: inline-block; | ||
| − | margin: | + | margin: 4px 0px 0px 0px; |
padding: 0.3em .5em 0.3em; | padding: 0.3em .5em 0.3em; | ||
text-decoration: none; | text-decoration: none; | ||
| Line 132: | Line 188: | ||
cursor: pointer; | cursor: pointer; | ||
} | } | ||
| − | #navigation a.b | + | #navigation a.b |
{ | { | ||
position: relative; | position: relative; | ||
| Line 145: | Line 201: | ||
color: #ffffff; | color: #ffffff; | ||
border-radius: 1em 0em 0em 1em; | border-radius: 1em 0em 0em 1em; | ||
| − | font-size: | + | font-size: 13px; |
| + | } | ||
| + | #navigation a.t | ||
| + | { | ||
| + | position: relative; | ||
| + | display: inline-block; | ||
| + | margin: 1px 0px; | ||
| + | padding: 0.3em .5em 0.3em; | ||
| + | text-decoration: none; | ||
| + | background-color: #ffffff; | ||
| + | outline: none; | ||
| + | cursor: pointer; | ||
| + | background-color: #d82545; | ||
| + | color: #ffffff; | ||
| + | border-radius: 1em 0em 0em 1em; | ||
| + | font-size: 20px; | ||
} | } | ||
#navigation a:hover | #navigation a:hover | ||
| Line 156: | Line 227: | ||
background-color: #888887; | background-color: #888887; | ||
color:#f9d24b; | color:#f9d24b; | ||
| + | } | ||
| + | #navigation a.t:hover | ||
| + | { | ||
| + | background-color: #6b1877; | ||
| + | color:#ffffff; | ||
} | } | ||
#navigation span | #navigation span | ||
| Line 163: | Line 239: | ||
} | } | ||
</style> | </style> | ||
| − | <!-- | + | <!--IGEM LOGO--> |
<style type="text/css"> | <style type="text/css"> | ||
| − | # | + | #logoContainer { |
| + | position: fixed; | ||
| + | top: 30px; | ||
| + | right: 30px; | ||
| + | } | ||
| + | </style> | ||
| + | <!--NUDT_Container--> | ||
| + | <!--NUDT_Container--> | ||
| + | <style type="text/css"> | ||
| + | #NUDT_Container | ||
{ | { | ||
clear: both; | clear: both; | ||
width: 900px; | width: 900px; | ||
| − | margin: 30px | + | margin: 30px 180px; |
padding: 30px 0px; | padding: 30px 0px; | ||
font-family: 'verdana',sans-serif; | font-family: 'verdana',sans-serif; | ||
| Line 176: | Line 261: | ||
position: relative; | position: relative; | ||
} | } | ||
| − | # | + | #NUDT_Container ul |
{ | { | ||
list-style-position:inside; | list-style-position:inside; | ||
| Line 183: | Line 268: | ||
} | } | ||
| − | # | + | #NUDT_Container li |
{ | { | ||
padding: 0; | padding: 0; | ||
| Line 189: | Line 274: | ||
} | } | ||
| − | # | + | #NUDT_Container p{ |
text-decoration: none; | text-decoration: none; | ||
font-family: "Trebuchet MS", Helvetica, sans-serif; | font-family: "Trebuchet MS", Helvetica, sans-serif; | ||
| Line 197: | Line 282: | ||
font-size: 16px; | font-size: 16px; | ||
} | } | ||
| − | # | + | #NUDT_Container a { |
position: relative; | position: relative; | ||
| − | text-decoration: none; | + | text-decoration:none; |
| − | + | color:#d82545; | |
| − | + | ||
} | } | ||
| − | # | + | #NUDT_Container a:hover |
{ | { | ||
text-decoration:underline; | text-decoration:underline; | ||
| − | |||
} | } | ||
| − | # | + | #NUDT_Container h1, h2, h3, h4, h5{ |
color: #444; | color: #444; | ||
margin: 20px 0px; | margin: 20px 0px; | ||
| Line 217: | Line 300: | ||
position: relative; | position: relative; | ||
} | } | ||
| − | # | + | #NUDT_Container h1 { |
font:bold 28px/12px 'verdana',sans-serif; | font:bold 28px/12px 'verdana',sans-serif; | ||
border-left: 10px solid #444; | border-left: 10px solid #444; | ||
} | } | ||
| − | # | + | #NUDT_Container h2 { |
font:bold 24px/10px 'verdana',sans-serif; | font:bold 24px/10px 'verdana',sans-serif; | ||
border-left: 20px solid #444; | border-left: 20px solid #444; | ||
} | } | ||
| − | # | + | #NUDT_Container h3 { |
font:bold 22px/8px 'verdana',sans-serif; | font:bold 22px/8px 'verdana',sans-serif; | ||
border-left: 30px solid #444; | border-left: 30px solid #444; | ||
} | } | ||
| − | # | + | #NUDT_Container h4 { |
font:bold 22px/6px 'verdana',sans-serif; | font:bold 22px/6px 'verdana',sans-serif; | ||
border-left: 35px solid #444; | border-left: 35px solid #444; | ||
} | } | ||
| − | # | + | #NUDT_Container h5 { |
font:bold 20px/4px 'verdana',sans-serif; | font:bold 20px/4px 'verdana',sans-serif; | ||
border-left: 40px solid #444; | border-left: 40px solid #444; | ||
} | } | ||
| − | # | + | /*CASE*/ |
| − | font: | + | #NUDT_Container ca { |
| − | + | position: relative; | |
| + | display: inline-block; | ||
| + | margin: 10px 100px; | ||
| + | padding: 10px 20px; | ||
| + | text-decoration: none; | ||
| + | background-color: #bcbcbc; | ||
| + | color: #000000; | ||
| + | border-radius: 8px 8px; | ||
| + | outline: none; | ||
| + | cursor: pointer; | ||
| + | font-family: "Trebuchet MS", Helvetica, sans-serif; | ||
| + | font-size: 16px; | ||
} | } | ||
</style> | </style> | ||
| − | </ | + | <!--Common--> |
| − | + | <div id = "mainContainer"> | |
| − | + | <div id = "bannerContainer"> | |
| − | <img src="https://static.igem.org/mediawiki/2015/9/99/Menu.png"/> | + | <img src="https://static.igem.org/mediawiki/2015/0/06/Team_NUDT_CHINA_banner.jpg" style="width: 900px"/> |
| − | + | </div> | |
| + | <div id = "menu"> | ||
| + | <img src="https://static.igem.org/mediawiki/2015/9/99/Menu.png"/> | ||
<li><a id = "HOME" href="https://2015.igem.org/Team:NUDT_CHINA"><span>HOME</span></a></li> | <li><a id = "HOME" href="https://2015.igem.org/Team:NUDT_CHINA"><span>HOME</span></a></li> | ||
| Line 259: | Line 355: | ||
<li><a id = "Basic" href = "https://2015.igem.org/Team:NUDT_CHINA/Basic_Part" class = "b"><span>Basic Parts</span></a></li> | <li><a id = "Basic" href = "https://2015.igem.org/Team:NUDT_CHINA/Basic_Part" class = "b"><span>Basic Parts</span></a></li> | ||
<li><a id = "Composite" href="https://2015.igem.org/Team:NUDT_CHINA/Composite_Part" class = "b"><span>Composite Parts</span></a></li> | <li><a id = "Composite" href="https://2015.igem.org/Team:NUDT_CHINA/Composite_Part" class = "b"><span>Composite Parts</span></a></li> | ||
| − | + | ||
<li><a id = "NOTEBOOK" href="https://2015.igem.org/Team:NUDT_CHINA/Notebook"><span>NOTEBOOK</span></a></li> | <li><a id = "NOTEBOOK" href="https://2015.igem.org/Team:NUDT_CHINA/Notebook"><span>NOTEBOOK</span></a></li> | ||
| Line 268: | Line 364: | ||
<li><a id = "MODELING" href="https://2015.igem.org/Team:NUDT_CHINA/Modeling"><span>MODELING</span></a></li> | <li><a id = "MODELING" href="https://2015.igem.org/Team:NUDT_CHINA/Modeling"><span>MODELING</span></a></li> | ||
<li><a id = "MEASUREMENT" href="https://2015.igem.org/Team:NUDT_CHINA/Measurement"><span>MEASUREMENT</span></a></li> | <li><a id = "MEASUREMENT" href="https://2015.igem.org/Team:NUDT_CHINA/Measurement"><span>MEASUREMENT</span></a></li> | ||
| − | + | <li><a id = "ENTREPRENEURSHIP" href="https://2015.igem.org/Team:NUDT_CHINA/Entrepreneurship"><span>ENTREPRENEURSHIP</span></a></li> | |
| − | <li><a id = "ENTREPRENEURSHIP" href="https://2015.igem.org/Team:NUDT_CHINA/Entrepreneurship"><span>ENTREPRENEURSHIP</span></a></li> | + | </div> |
| − | + | <div id = "logoContainer"> | |
| − | + | <a href="https://igem.org/Main_Page"><img id = "iGEM_LOGO" src="https://static.igem.org/mediawiki/2015/e/ec/TEAM_NUDT_CHINA_iGEM_Logo.png" style="width: 130px; height:135px"/></a> | |
| − | + | </div> | |
| − | + | </head> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | </ | + | |
</html> | </html> | ||
Latest revision as of 00:45, 22 August 2015
