|
|
(4 intermediate revisions not shown) |
Line 1: |
Line 1: |
- | __NOTOC__
| + | <html> |
- | {{:Team:SYSU-China/header/temp}}
| + | <head><script type="text/javascript"> |
- | <html xmlns="http://www.w3.org/1999/xhtml"> | + | window.onload = function(){ |
- | <head> | + | if(document.getElementById && document.all && ! |
- | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | + | |
- | <title>Human Practice Main Page-Sun Yat-sen Univ.</title>
| + | navigator.userAgent.match(/Opera/)){ |
- | <link type="text/css" href="menu.css" rel="stylesheet" />
| + | var obj = document.getElementById("topnavi"); |
- | <script type="text/javascript" src="jquery.js"></script>
| + | for(var i=0;i<obj.childNodes.length;i++) |
- | <script type="text/javascript" src="menu.js"></script>
| + | { |
- | <style type="text/css">
| + | if(obj.childNodes[i].className=="menu") |
- | </style>
| + | { |
- | <link href="../style.css" rel="stylesheet" type="text/css" />
| + | obj.childNodes[i].onmouseover = function(){pull(this)}; |
- | <style type="text/css">
| + | obj.childNodes[i].onmouseout = function(){pull(this)}; |
- | #background_shadow {
| + | } |
- | width: 1080px;
| + | } |
- | margin-right: auto;
| + | |
- | margin-left: auto;
| + | |
- | background-image: url(background_shadow/upper_background_shadow.png);
| + | |
- | background-repeat: repeat-y;
| + | |
- | margin-top: 0px;
| + | |
- | margin-bottom: 0px;
| + | |
- | padding-left: 40px;
| + | |
| } | | } |
- | body {
| |
- | background-color: #f5f5f5;
| |
- | padding: 0px;
| |
- | margin: 0%;
| |
- | margin-left: 0px;
| |
| } | | } |
- | div#feature_list {
| |
- | width: 1000px;
| |
- | height: 500px;
| |
- | overflow: hidden;
| |
- | position: relative;
| |
- | }
| |
| | | |
- | div#feature_list ul {
| + | function pull(obj){ |
- | position: absolute;
| + | for(var i=0;i<obj.childNodes.length;i++) |
- | top: 0;
| + | if(obj.childNodes[i].nodeName.toUpperCase()=="UL") |
- | list-style: none;
| + | obj.childNodes[i].style.display=obj.childNodes |
- | padding: 0;
| + | |
- | margin: 0;
| + | |
- | }
| + | |
| | | |
- | ul#tabs {
| + | [i].style.display=="block"?"none":"block"; |
- | left: 0;
| + | } |
- | z-index: 2;
| + | </script> |
- | width: 200px;
| + | <style type = "text/css"> |
- | background-color: #333333;
| + | <!-- |
- | height: 100px;
| + | h2 { |
- | }
| + | font-weight:bold; |
| + | } |
| | | |
- | ul#tabs li {
| + | a { |
- | font-size: 12px;
| + | font-weight:bold; |
- | font-family: Arial;
| + | } |
- | background-color: #33333;
| + | |
- | }
| + | |
- |
| + | |
- | ul#tabs li img {
| + | |
- | border: none;
| + | |
- | float: left;
| + | |
- | background-color: #33333;
| + | |
- | }
| + | |
| | | |
- | ul#tabs li a {
| + | #footer-box { |
- | color: #222;
| + | width: 965px; |
- | text-decoration: none;
| + | } |
- | display: block;
| + | |
- | height: 100px;
| + | |
- | outline: none;
| + | |
- | background-color: #33333;
| + | |
- | }
| + | |
| | | |
- | ul#tabs li a:hover {
| + | #contentSub { |
- | text-decoration: underline;
| + | display:none; |
- | background-color: #33333;
| + | } |
- | }
| + | |
| | | |
- | ul#tabs li a.current {
| + | #siteSub { |
- | color: #FFF;
| + | display:none; |
- | width: 250px;
| + | } |
- | background-color: #33333;
| + | |
- | background-image: url(feature-tab-current.png);
| + | |
- | }
| + | |
| | | |
- | ul#tabs li a.current:hover {
| + | #search-controls { |
- | text-decoration: none;
| + | display:none; |
- | cursor: default;
| + | } |
- | background-color: #33333;
| + | |
- | }
| + | |
| | | |
- | ul#output {
| + | .firstHeading { |
- | width: 800px;
| + | display:none; |
- | height: 500px;
| + | } |
- | position: relative;
| + | |
- | left: -50px;
| + | |
- | }
| + | |
| | | |
- | ul#output li {
| + | #search-controls { |
- | position: relative;
| + | display:none; |
- | width: 800px;
| + | } |
- | height: 500px;
| + | |
- | left: 250px;
| + | |
- | top: 0px;
| + | |
- | }
| + | |
- |
| + | |
- | ul#output li a {
| + | |
- | position: absolute;
| + | |
- | bottom: 10px;
| + | |
- | right: 10px;
| + | |
- | padding: 8px 12px;
| + | |
- | text-decoration: none;
| + | |
- | font-size: 11px;
| + | |
- | color: #FFF;
| + | |
- | background: #000;
| + | |
- | -moz-border-radius: 5px;
| + | |
- | }
| + | |
- |
| + | |
- | ul#output li a:hover {
| + | |
- | background: #D33431;
| + | |
- | }
| + | |
| | | |
| + | #top-section { |
| + | height:25px; |
| + | width:975px; |
| + | color: blue; |
| + | background-color: gray; |
| | | |
- | #logo_bar {
| |
- | position:relative;
| |
- | width:93px;
| |
- | height:125px;
| |
- | z-index:5;
| |
- | left: 20px;
| |
- | top: -75px;
| |
- | background-image: url(main_pages/logo_green.png);
| |
| } | | } |
| | | |
- | .contact_bottombar {
| + | #catlinks { |
- | margin: 0px;
| + | background-color: #FEFEEB; |
- | width: 1000px;
| + | border: none; |
- | font-family: Arial, Helvetica, sans-serif;
| + | clear: both; |
- | padding: 20px;
| + | margin-top: 0em; |
- | font-size: 12px;
| + | padding: 0px; |
- | line-height: 5px;
| + | } |
| + | |
| + | #p-logo { |
| + | display:none; |
| } | | } |
- | .title_container {
| + | |
- | width: 960px;
| + | IMG{border-width:0;} |
- | margin-right: 20px;
| + | |
- | margin-left: 20px;
| + | body{ |
| + | background-color: black; |
| + | |
| + | } |
| + | |
| + | #header{ |
| + | background-color: white; |
| + | width: 970px; |
| + | height: 300px; |
| + | background:white; |
| + | margin-bottom:0px; |
| + | } |
| + | #contents1{ |
| + | width:820px; |
| + | |
| + | padding:0 10px; |
| + | margin:0px 50px 0px 50px; |
| + | background-color:white; |
| + | margin-bottom:50px |
| + | |
| + | } |
| + | #container{ |
| + | align:center; |
| + | width:800px; |
| + | background-color:gray; |
| + | } |
| + | #globalnavi{ |
| + | margin: 0; |
| + | padding: 10; |
| + | width: 965px; |
| + | height:25px; |
| + | font-size:12px; |
| + | *font-size:12px; |
| + | background:black; repeat-x scroll 0 0; |
| + | font-family : Arial,'MS Pゴシック',sans-serif ; |
| } | | } |
| | | |
- | .mainpage_project_WholeContainer {
| + | #globalnavi ul{ |
- | background-color: #5a7b22;
| + | list-style: none; |
- | background-image: url(main_pages/BG_pics/project.png);
| + | margin: 0; |
- | background-position: top;
| + | padding: 10; |
- | width: 1000px;
| + | position: relative; |
- | background-repeat: no-repeat;
| + | |
- | }
| + | |
- | .mainpage_human_practice_WholeContainer {
| + | |
- | background-color: #cda901;
| + | |
- | background-image: url(main_pages/BG_pics/human_practice.png);
| + | |
- | background-position: top;
| + | |
- | width: 1000px;
| + | |
- | background-repeat: no-repeat;
| + | |
- | }
| + | |
- | .mainpage_aboutus_WholeContainer {
| + | |
- | background-color: #000;
| + | |
- | background-image: url(main_pages/BG_pics/aboutus.png);
| + | |
- | background-position: top;
| + | |
- | width: 1000px;
| + | |
- | background-repeat: no-repeat;
| + | |
| } | | } |
| | | |
- | #main_page_clearer { | + | #globalnavi li{ |
- | background-color: transparent;
| + | float: left; |
- | height: 535px;
| + | margin: 0; |
- | width: 1000px;
| + | padding: 10; |
- | clear: both;
| + | |
| } | | } |
| | | |
- | .main_page_clearer_light {
| + | #globalnavi li a{ |
- | background-color: transparent;
| + | text-align: center; |
- | height: 20px;
| + | display:block; |
- | width: 100%;
| + | padding: 3px 10px 3px 10px; |
- | clear: both;
| + | color: white; |
| + | font-weight: bold; |
| + | text-decoration: none; |
| + | border-right:1px solid #808080; |
| + | margin:2px 0px 0px 0px; |
| } | | } |
- | #main_page_content_WholeBox {
| |
- | width: 1000px;
| |
- | padding-top: 0px;
| |
- | padding-right: 20px;
| |
- | padding-bottom: 0px;
| |
- | padding-left: 20px;
| |
- | background-color: transparent;
| |
- | height: auto;
| |
- | }
| |
- | .main_page_content_box {
| |
- | background-color: transparent;
| |
- | float: left;
| |
- | width: 306px;
| |
- | margin-top: 20px;
| |
- | margin-right: 20px;
| |
- | margin-bottom: 0px;
| |
- | margin-left: 0px;
| |
- | height: auto;
| |
- | }
| |
- | .main_page_content_box_r0 {
| |
- | background-color: transparent;
| |
- | float: left;
| |
- | width: 306px;
| |
- | margin-top: 20px;
| |
- | margin-right: 0px;
| |
- | margin-bottom: 20px;
| |
- | margin-left: 0px;
| |
| | | |
| + | #globalnavi li a:hover{ |
| + | background-color:#808080; |
| + | color: white; |
| + | font-weight: bold; |
| + | text-decoration: none; |
| + | border-right:1px solid #808080; |
| } | | } |
- | .main_page_introduction_bar { | + | #topnavi li.menu ul { |
- | padding: 0px;
| + | display:none; /* ドロップダウン部分を見えなくする(通常時) */ |
- | float: left;
| + | position:absolute; |
- | height: 34px;
| + | background-color:#000000; |
- | width: 227px;
| + | |
- | margin-top: 0px;
| + | |
- | margin-right: 4px;
| + | |
- | margin-bottom: 0px;
| + | |
- | margin-left: 0px;
| + | |
| } | | } |
- | .main_page_introduction_bar p {
| + | #topnavi li.menu:hover ul { |
- | font-size: 18px;
| + | display: block; /* メニュー部分をブロック要素にする */ |
- | color: #000;
| + | |
- | font-family: Arial, Helvetica, sans-serif;
| + | |
- | text-align: center;
| + | |
- | vertical-align: middle;
| + | |
- | }
| + | |
- | .main_page_content_more_bar a{
| + | |
- | float: right;
| + | |
- | height: 34px;
| + | |
- | width: 75px;
| + | |
- | background-image: url(main_pages/BG_pics/more.png);
| + | |
- | clear: right;
| + | |
- | }
| + | |
- | .main_page_content_more_bar a:hover {
| + | |
- | background-image: url(main_pages/BG_pics/more_light.png);
| + | |
- | float: right;
| + | |
- | height: 34px;
| + | |
- | width: 75px;
| + | |
- | clear: right;
| + | |
- | }
| + | |
- | .main_page_content_picbox {
| + | |
- | height: 136px;
| + | |
- | width: 100%;
| + | |
- | float: left;
| + | |
- | }
| + | |
- | .main_page_content_textbox {
| + | |
- | background-color: #d9d9d9;
| + | |
- | width: 100%;
| + | |
- | float: left;
| + | |
- | overflow: hidden;
| + | |
- | }
| + | |
- | .main_page_content_Whole_intro_bar {
| + | |
- | clear: right;
| + | |
- | float: left;
| + | |
- | width: 100%;
| + | |
- | margin-top: 0px;
| + | |
- | margin-right: 0px;
| + | |
- | margin-bottom: 5px;
| + | |
- | margin-left: 0px;
| + | |
| } | | } |
| + | #topnavi li.menu ul li { |
| + | border-bottom:1px solid #808080; |
| + | float:none; /* ドロップダウン部分をfloatを効かせない(多分。。。) |
| | | |
- | .main_page_content_textbox p {
| + | */ |
- | font-family: Arial, Helvetica, sans-serif;
| + | |
- | font-size: 14px;
| + | |
- | padding-right: 12px;
| + | |
- | padding-left: 12px;
| + | |
| } | | } |
- | .main_page_content_box_r0 .main_page_content_textbox p { | + | #topnavi li.menu li a{ |
- | font-family: Arial, Helvetica, sans-serif;
| + | border-bottom:1px solid #808080; |
- | font-size: 14px;
| + | text-align:left; |
| } | | } |
- | | + | h1{ |
- | </style>
| + | color: black; |
- | </head>
| + | text-decoration: underline ; |
- | | + | |
- | <body>
| + | |
- | <div id="background_shadow">
| + | } |
- | <div class="mainpage_aboutus_WholeContainer">
| + | p{ |
- |
| + | color:black; |
- | <!--------here begins the manu bar section--!-->
| + | } |
- | <div class="title_container"> | + | |
- | <div id="menu">
| + | |
- | <ul class="menu">
| + | |
- | <li><a href="#"><span></span></a></li>
| + | |
- | <li><a href="#"><span>NEWS</span></a></li>
| + | |
- | <li><a href="#"><span>STORY</span></a></li>
| + | |
- | <li><a href="#" class="parent"><span>PROJECT</span></a>
| + | |
- | <div>
| + | |
- | <ul>
| + | |
- | <li><a href="#"><span>Modules Construction</span></a>
| + | |
- | <li><a href="#"><span>Modules Verification</span></a></li>
| + | |
- | <li><a href="#"><span>Functional Verification</span></a></li>
| + | |
- | <li><a href="#"><span>Notes</span></a></li>
| + | |
- | <li><a href="#"><span>Date Page</span></a></li>
| + | |
- | <li><a href="#"><span>Safety</span></a></li>
| + | |
- | </ul>
| + | |
- | </div>
| + | |
- | </li>
| + | |
- | <li><a href="#" class="parent"><span>HUMAN PRACTICE</span></a>
| + | |
- | <div>
| + | |
- | <ul>
| + | |
- | <li><a href="#"><span>App</span></a>
| + | |
- | <li><a href="#"><span>LabCraft Board Game</span></a></li>
| + | |
- | <li><a href="#"><span>Workshop</span></a></li>
| + | |
- | <li><a href="#"><span>Survey</span></a></li>
| + | |
- | </ul>
| + | |
- | </div>
| + | |
- | </li>
| + | |
- |
| + | |
- | <li><a href="#" class="parent"><span>ABOUT US</span></a>
| + | |
- | <div>
| + | |
- | <ul>
| + | |
- | <li><a href="#"><span>Team Members</span></a>
| + | |
- | <li><a href="#"><span>Spcial Thanks</span></a></li>
| + | |
- | <li><a href="#"><span>Logo and T-shirt</span></a></li>
| + | |
- | </ul>
| + | |
- | </div>
| + | |
- | </li>
| + | |
- | | + | |
- | </ul> | + | |
- | </div><!--here ends the manu!--> | + | |
- | </div><!--here ends the title_container!-->
| + | |
- |
| + | |
- | <div id="logo_bar"></div>
| + | |
| | | |
- | <!--------here ends the title_section------!-->
| + | --> |
- | <div id="main_page_clearer"></div>
| + | </style type> |
- |
| + | </head> |
- | <!------here begins the main content section--!-->
| + | |
- | | + | |
- | <div id="main_page_content_WholeBox">
| + | |
- | <!---------------------------------------------!-->
| + | |
- | <div class="main_page_content_box">
| + | |
- | <div class="main_page_content_Whole_intro_bar">
| + | |
- | <div class="main_page_introduction_bar"><img src="BG_pics/about_us/team_members.png" width="227" height="34" /></div>
| + | |
- | <div class="main_page_content_more_bar"><a href="#"></a></div>
| + | |
- | </div>
| + | |
- | <div class="main_page_content_picbox"><img src="BG_pics/project/project_intro_pics/m_c_sh.jpg" width="306" height="136" /></div>
| + | |
- | <div class="main_page_content_textbox"><p>asdfdfdsa</p></div>
| + | |
- | </div>
| + | |
- | <!---------------------------------------------!-->
| + | |
- | <div class="main_page_content_box">
| + | |
- | <div class="main_page_content_Whole_intro_bar">
| + | |
- | <div class="main_page_introduction_bar"><img src="BG_pics/about_us/special_thanks.png" width="227" height="34" /></div>
| + | |
- | <div class="main_page_content_more_bar"><a href="#"></a></div>
| + | |
- | </div>
| + | |
- | <div class="main_page_content_picbox"><img src="BG_pics/about_us/st_sh.jpg" width="306" height="136" /></div>
| + | |
- | <div class="main_page_content_textbox"><p>asdfdfdsa</p></div>
| + | |
- |
| + | |
- | </div>
| + | |
- | <!---------------------------------------------!-->
| + | |
- | <div class="main_page_content_box_r0">
| + | |
- | <div class="main_page_content_Whole_intro_bar">
| + | |
- | <div class="main_page_introduction_bar"><img src="BG_pics/about_us/logo_and_tshirt.png" width="227" height="34" /></div>
| + | |
- | <div class="main_page_content_more_bar"><a href="#"></a></div>
| + | |
- | </div>
| + | |
- | <div class="main_page_content_picbox"><img src="BG_pics/about_us/lac_sh.jpg" width="306" height="136" /></div>
| + | |
- | <div class="main_page_content_textbox"><p>asdfdfdsa</p></div>
| + | |
- | | + | |
- | </div>
| + | |
- | <!---------------------------------------------!-->
| + | |
- | <div class="main_page_clearer_light"></div>
| + | |
- | <!---------------------------------------------!-->
| + | |
- |
| + | |
- | </div><!--here ends the main_page_content_WholeBox!-->
| + | |
- | <div class="main_page_clearer_light"></div>
| + | |
- | </div><!--here ends the mainpage_project_WholeContainer!-->
| + | |
- | | + | |
- | <!--here begins the contact_bottombar!-->
| + | |
- | <div class="contact_bottombar">
| + | |
- | <p>From the 2011 iGEM team SYSU-China (2011)</p>
| + | |
- | <p>Sun Yat-Sen University, Guangzhou, China</p>
| + | |
- | <p>Address: 135# Xingang Rd.(W.), Haizhu Guangzhou, P.R.China</p>
| + | |
- | <p><a href="http://www.sysu.edu.cn">visit the Sun Yat-sen university website</a></p>
| + | |
- | <p>Thanks Apycom jQuery Menus and <a href="http://apycom.com/">visit their website</a>
| + | |
- | </div>
| + | |
- | <!--here ends the contact_bottombar!-->
| + | |
| | | |
- | </div><!--here ends the backgroud_shadow_bar!-->
| |
- | </body>
| |
| </html> | | </html> |