Team:USTC-China/test

From 2011.igem.org

(Difference between revisions)
Line 1: Line 1:
{{Team:USTC-China/temp}}
{{Team:USTC-China/temp}}
 +
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<head>
Line 22: Line 23:
a:active, a:hover { color: #0683ab; text-decoration: underline; }
a:active, a:hover { color: #0683ab; text-decoration: underline; }
-
img { margin: auto; padding: 0px; border: none; display:block;}
+
img {
 +
margin: 0;
 +
padding: 0;
 +
border: none;
 +
display:block;
 +
}
p{
p{
Line 117: Line 123:
line-height:1.5em;
line-height:1.5em;
width: 738px;
width: 738px;
-
height: 50px;
+
height: 50px;;
}
}
#nav .on {
#nav .on {
color:#fff !important;
color:#fff !important;
-
background-image: url(https://static.igem.org/mediawiki/2011/0/00/USTC_Software_nav_button_bg.jpg) !important;
+
background-image: url(https://static.igem.org/mediawiki/2011/2/23/USTC_China_nav_button_bg.jpg) !important;
background-position: bottom left !important;
background-position: bottom left !important;
}
}
Line 132: Line 138:
     text-decoration:none;
     text-decoration:none;
text-transform: uppercase;
text-transform: uppercase;
-
background-image: url(https://static.igem.org/mediawiki/2011/0/00/USTC_Software_nav_button_bg.jpg);
+
background-image: url(https://static.igem.org/mediawiki/2011/2/23/USTC_China_nav_button_bg.jpg);
background-position: top left;
background-position: top left;
}
}
Line 138: Line 144:
#nav a:hover {
#nav a:hover {
     color:#fff;
     color:#fff;
-
background-image: url(https://static.igem.org/mediawiki/2011/0/00/USTC_Software_nav_button_bg.jpg);
+
background-image: url(https://static.igem.org/mediawiki/2011/2/23/USTC_China_nav_button_bg.jpg);
background-position: bottom left;
background-position: bottom left;
 +
background-color: #004370;
}
}
#nav li{
#nav li{
-
    float:left;
+
float:left;
-
    position:relative;
+
position:relative;
-
+
background: #004370;
}
}
Line 154: Line 161:
     display:none;
     display:none;
z-index: 1;
z-index: 1;
 +
background-color: #004370;
}
}
Line 159: Line 167:
     width:9em;
     width:9em;
     float:left;
     float:left;
-
background-color: #2e2e2e;
+
background-color: #004370;
 +
/* #2e2e2e*/
 +
/* #004370;*/
 +
/* #292929;*/
 +
/*#33ADFF;*/
background-image: none !important;
background-image: none !important;
}
}
#nav li ul a:hover {
#nav li ul a:hover {
-
background-color: #292929;
+
background-color: #33ADFF;
}
}
#nav ul ul{
#nav ul ul{
top:auto;
top:auto;
 +
background-color: #004370;
}
}
Line 226: Line 239:
clear:both;
clear:both;
}
}
 +
 +
/*box*/
.box_content{
.box_content{
width:267px;
width:267px;
height:300px;
height:300px;
float:left;
float:left;
-
margin:10px 10px 30px 10px;
+
margin:10px 5px 10px 10px;
background:url(https://static.igem.org/mediawiki/2011/a/a4/USTC-China_box_bg.gif) no-repeat top center;
background:url(https://static.igem.org/mediawiki/2011/a/a4/USTC-China_box_bg.gif) no-repeat top center;
}
}
Line 250: Line 265:
}
}
.box_text{
.box_text{
-
width:190px;
+
width:220px;
 +
float:left;
 +
text-align:justify;
 +
padding:0 0 0 10px;
 +
}
 +
a.details{
 +
float:right;
 +
padding:5px 15px 0 0;
 +
text-decoration:none;
 +
font-weight:bold;
 +
color:#f8851f;
 +
}
 +
 
 +
 
 +
 
 +
/*box*/
 +
 
 +
 
 +
 
 +
/*sbox*/
 +
.sbox_content{
 +
width:250px;
 +
height:600px;
 +
float:left;
 +
margin:10px,70px,20px,30px;
 +
background:url(images/USTC-China_box_bg.gif) no-repeat top center;
 +
}
 +
.sbox_title{
 +
padding:10px 0 10px 0;
 +
}
 +
.stitle_icon{
float:left;
float:left;
-
text-align:justify;
+
padding:0 5px 0 10px;
-
padding:0 0 0 10px;
+
}
 +
.sbox_text_content{
 +
width:230px;
 +
float:left;
 +
padding:15px 0 0 15px;
 +
}
 +
.sbox_icon{
 +
float:left;
 +
padding:0 5px 0 0 ;
 +
}
 +
.sbox_text{
 +
width:220px;
 +
float:left;
 +
text-align:justify;
 +
padding:0 0 0 10px;
}
}
a.details{
a.details{
Line 262: Line 321:
color:#f8851f;
color:#f8851f;
}
}
 +
 +
 +
 +
/*box*/
 +
 +
/* footer */
/* footer */
#mfooter{
#mfooter{
-
width:900px;
+
width:900px;
-
height:45px;
+
height:60px;
-
color:#508aa1;
+
color:#508aa1;
-
text-align: center;
+
text-align: center;
-
background-color:#e8eff2;
+
background-color:#e8eff2;
}
}
Line 292: Line 357:
border: none;
border: none;
}
}
-
 
-
#footer-box { background-color: transparent; border:none;} /*This is important!*/
 
#totop_box {
#totop_box {
Line 326: Line 389:
/* end of footer*/
/* end of footer*/
</style>
</style>
 +
 +
 +
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
 +
<script type="text/javascript">
 +
$(document).ready(function() {
 +
//Set Default State of each portfolio piece
 +
$(".paging").show();
 +
$(".paging a:first").addClass("active");
 +
 +
//Get size of images, how many there are, then determin the size of the image reel.
 +
var imageWidth = $(".window").width();
 +
var imageSum = $(".image_reel img").size();
 +
var imageReelWidth = imageWidth * imageSum;
 +
 +
//Adjust the image reel to its new size
 +
$(".image_reel").css({'width' : imageReelWidth});
 +
 +
//Paging + Slider Function
 +
rotate = function(){
 +
var triggerID = $active.attr("rel") - 1; //Get number of times to slide
 +
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
 +
 +
$(".paging a").removeClass('active'); //Remove all active class
 +
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
 +
 +
//Slider Animation
 +
$(".image_reel").animate({
 +
left: -image_reelPosition
 +
}, 500 );
 +
 +
};
 +
 +
//Rotation + Timing Event
 +
rotateSwitch = function(){
 +
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
 +
$active = $('.paging a.active').next();
 +
if ( $active.length === 0) { //If paging reaches the end...
 +
$active = $('.paging a:first'); //go back to first
 +
}
 +
rotate(); //Trigger the paging and slider function
 +
}, 4000); //Timer speed in milliseconds
 +
};
 +
 +
rotateSwitch(); //Run function on launch
 +
 +
//On Hover
 +
$(".image_reel a").hover(function() {
 +
clearInterval(play); //Stop the rotation
 +
}, function() {
 +
rotateSwitch(); //Resume rotation
 +
});
 +
 +
//On Click
 +
$(".paging a").click(function() {
 +
$active = $(this); //Activate the clicked paging
 +
//Reset Timer
 +
clearInterval(play); //Stop the rotation
 +
rotate(); //Trigger rotation immediately
 +
rotateSwitch(); // Resume rotation
 +
return false; //Prevent browser jump to link anchor
 +
});
 +
 +
});
 +
</script>
 +
 +
<style type="text/css">
 +
 +
/*--Window & Text Table--*/
 +
table#rotator_news {
 +
pading-bottom: 10px;
 +
}
 +
 +
/*--Main Image Rotator Container--*/
 +
.main_view {
 +
float: left;
 +
position: relative;
 +
/*border: 0px solid #fff;*/
 +
width: 650px;
 +
}
 +
/*--Image Rotator Window/Masking Styles--*/
 +
.window {
 +
height:400px;
 +
width: 650px;
 +
overflow: hidden; /*--Hides anything outside of the set width/height--*/
 +
position: relative;
 +
}
 +
.image_reel {
 +
position: absolute;
 +
top: 0;
 +
left: -3px;
 +
}
 +
.image_reel img {float: left;}
 +
 +
/*--Paging Styles--*/
 +
.paging {
 +
position: absolute;
 +
bottom: 0px; right: -15px;
 +
width: 400px; height:47px; /*--Increase this width when adding more numbers in paging--*/
 +
z-index: 100; /*--Assures the paging stays on the top layer--*/
 +
text-align: center;
 +
line-height: 40px;
 +
background: url(paging_bg2.png) no-repeat;
 +
display: none; /*--Hidden by default, will be later shown with jQuery--*/
 +
}
 +
.paging a {
 +
padding: 5px;
 +
text-decoration: none;
 +
color: #fff;
 +
}
 +
.paging a.active {
 +
font-weight: bold;
 +
/*background: #cdcdcd;*/
 +
border: 1px solid #cdcdcd;
 +
-moz-border-radius: 3px;
 +
-khtml-border-radius: 3px;
 +
-webkit-border-radius: 3px;
 +
}
 +
.paging a:hover {font-weight: bold;}
 +
</style>
 +
</head>
</head>
Line 339: Line 522:
     <li><a href="#">Project</a>
     <li><a href="#">Project</a>
-
<ul>
+
<ul>
<li><a href="#">module</a></li>
<li><a href="#">module</a></li>
    <li><a href="#"> results</a>
    <li><a href="#"> results</a>
Line 377: Line 560:
       </ul>
       </ul>
    
    
-
       <div id="logo"><img src="https://static.igem.org/mediawiki/2011/d/d9/USTC-China_logo.png" width="100" height="84"/></div>
+
       <div id="logo"><img src="images/USTC-China_logo.png" width="100" height="84"/></div>
        
        
        
        
Line 386: Line 569:
      
      
     <div id="middle_box">
     <div id="middle_box">
-
     <div align="center" ><img src="https://static.igem.org/mediawiki/2011/f/fc/USTC-China_middle_banner.gif" width="900"/> </div>
+
     <div align="center" ><img src="images/USTC-China_middle_banner.gif" width="900"/> </div>
   </div>
   </div>
 +
 
 +
 
 +
 
 +
  <br/>
 +
 
 +
  <table width="900" height="398" border="0">
 +
    <tr>
 +
      <td width="661">  <table id="rotator_news">
 +
<tr>
 +
<td id="window_images">
 +
<div class="main_view">
 +
    <div class="window">
 +
        <div class="image_reel">
 +
                    <img src="https://static.igem.org/mediawiki/2011/e/e5/NO1.png" style=" margin-right:0px; width:650px; height:400px" alt="" />
 +
                    <img src="https://static.igem.org/mediawiki/2011/3/3a/NO2.png" style=" margin-right:0px; width:650px; height:400px" alt="" />
 +
                    <img src="https://static.igem.org/mediawiki/2011/5/50/NO3.jpg" style=" margin-right:0px; width:650px; height:400px" alt="" />
 +
                    <img src="https://static.igem.org/mediawiki/2011/3/3e/NO4.png" style=" margin-right:0px; width:650px; height:400px" alt="" />
 +
                    <img src="https://static.igem.org/mediawiki/2011/c/cd/NO5.png" style=" margin-right:0px; width:650px; height:400px" alt="" />
 +
                    <img src="https://static.igem.org/mediawiki/2011/c/c3/NO6.png" style=" margin-right:0px; width:650px; height:400px" alt="" />
 +
                    <img src="https://static.igem.org/mediawiki/2011/c/c3/NO7.png" style=" margin-right:0px; width:650px; height:400px" alt="" />             
 +
        </div>
 +
    </div>
 +
    <div class="paging">
 +
        <a href="#" rel="1">1</a>
 +
        <a href="#" rel="2">2</a>
 +
        <a href="#" rel="3">3</a>
 +
        <a href="#" rel="4">4</a>
 +
        <a href="#" rel="5">5</a>
 +
        <a href="#" rel="6">6</a>
 +
        <a href="#" rel="7">7</a>
 +
 +
    </div>
 +
</div> <!-- close "main_view" div -->
 +
</td>
 +
</tr>
 +
</table></td>
 +
     
 +
     
 +
     
 +
     
 +
     
 +
     
 +
     
 +
     
 +
     
 +
     
 +
     
 +
     
 +
     
 +
     
 +
     
 +
     
 +
     
 +
     
 +
     
 +
      <td width="229"><img src="images/USTC-China_MODULE.png" width="235" />
 +
          <img src="images/USTC_China_RESULTS.png" width="235" />
 +
          <img src="images/USTC_China_application.png" width="235" />
 +
          <img src="images/USTC-China_MODELING.png" width="235" />
 +
         
 +
         
 +
         
 +
        </td>
 +
    </tr>
 +
  </table>
 +
  <br/>
 +
 
 +
    <br/>
 +
    <br/> <br/>
 +
 
 +
 
 +
 
 +
 
 +
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
     <div id="main_content">
     <div id="main_content">
      
      
Line 510: Line 775:
   <ul class="mfooter_menu">
   <ul class="mfooter_menu">
-
                 <li><a href="#" target="_parent">Home</a></li>
+
                 <li><a href="./index.html" target="_parent">Home</a></li>
-
                 <li><a href="#" target="_parent">Project</a></li>
+
                 <li><a href="#" class="current">Project</a></li>
-
                 <li><a href="#" target="_parent">Parts</a></li>
+
                 <li><a href="./03_model.html" target="_parent">Parts</a></li>
-
                 <li><a href="#" target="_parent"> Team</a></li>
+
                 <li><a href="./03_model.html" target="_parent"> Team</a></li>
-
                 <li><a href="#" target="_parent">WetLab</a></li>
+
                 <li><a href="./04_notebook.html" target="_parent">WetLab</a></li>
-
                 <li class="last_menu"><a href="#" target="_parent">Human Practice</a></li>
+
                 <li class="last_menu"><a href="./06_team.html" target="_parent">Human Practice</a></li>
                  
                  
   </ul>
   </ul>

Revision as of 10:52, 5 October 2011

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Team:USTC-China - 2011.igem.org


1 2 3 4 5 6 7




Project

We organized an interesting project Self-Organized Bacteria Project. E.colis become smarter after our changes...
+ details

Bio-Parts

Here we presents the bio-parts we submitted and modulated.
+ details

Modeling

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+ details

WetLab

Here presents our journeys of iGEM. We keep our timetable, experiment progress.
+ details

Human Practice

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+ details

Team

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+ details



































Retrieved from "http://2011.igem.org/Team:USTC-China/test"