Biomod/2013/Tianjin: Difference between revisions

From OpenWetWare
Jump to navigationJump to search
No edit summary
No edit summary
Line 7: Line 7:
body{
body{
width: 960px;
width: 960px;
height: auto;
height:auto;
margin: 0 auto;
margin: 0 auto;
font-size:12px;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
font-family:Arial, Helvetica, sans-serif;
background-color:#FFF;
background-color:#fcfcfc;
border:#000 thin solid;
border:#000 thin solid;
}
}
Line 33: Line 33:
}
}


.cont{
.content1{
height:50px;
height:50px;
width:960px;
width:960px;
Line 43: Line 43:
.text-box{
.text-box{
width:960px;
width:960px;
height:500px;
height:auto;
margin-top:0px;
margin-top:0px;
float:left;
float:left;
Line 71: Line 71:


#content{margin:0;padding:0;height:1000px;border:0px;}
#content{margin:0;padding:0;height:1000px;border:0px;}
#column-content{background-color:#FFF;}


/*hidden section*/
/*hidden section*/
.firstHeading{display:none;}
.firstHeading{display:none;}
#sidebar-main{display:none;}
#sidebar-main{display:none;}
Line 83: Line 86:


</div>
</div>




Line 88: Line 92:


<style type="text/css">
<style type="text/css">
.sddm{z-index: 30;width:auto; height:65px;position:relative;float:left;background-color:#FFF;position:raletive;margin-left:0px;}
.sddm{z-index: 30;width: 960px;height:20px;position:relative;float:left;background-color:#303437;position:raletive;margin-left:0px;}
.sddm ul{margin-left:0px;}
.sddm ul{margin-left:0px;}
.sddm li{margin: 0;list-style: none;float: left;font: bold 14px arial;height:60px;background-color:#FFF;}
.sddm li{margin: 0;list-style: none;float: left;font: bold 14px arial;height:20px;background-color:#FFF;border-left:#fff thin solid;border-right:#fff thin solid;}
.sddm li a{display: block;margin:0;width: 159px;background: #FFF;color: #000;text-align: center;text-decoration: none;border-top:#ECECEC 5px solid;}
.sddm li a{display: block;margin:0;width: 158px;height:20px;background:#303437;color: #FFF;text-align: center;text-decoration: none;}
.sddm li a:hover{background:#FCFCFC;color:#0babe7;border-top:#0babe7 5px solid;}
.sddm li a:hover{background:#999;color:#000;}
.sddm div{position: absolute;width:158px;z-index:999;visibility: hidden;margin-top:1px;padding: 0;}
.sddm div a{position: relative;display: block;margin: 0;padding: 5px 5px;width: auto;white-space: nowrap;text-align:center;text-decoration: none;color: #FFF;font: 12px arial;height:20px;}
.sddm div a:hover{background:#999;color:#000;}


</style>
</style>
<script>
var timeout        = 500;
var closetimer = 0;
var ddmenuitem      = 0;


function mopen(id)
{  mcancelclosetime();
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';}
function mclose()
{ if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';}
function mclosetime()
{      closetimer = window.setTimeout(mclose, timeout);}
function mcancelclosetime()
{ if(closetimer)
{  window.clearTimeout(closetimer);
closetimer = null;}}
document.onclick = mclose;
</script>




<div class="cont">
<div class="content1">
<!--<ul class="sddm">
<ul class="sddm">
 
     <li><a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()" style="padding:15px 0px;">Home</a>
     <li><a href="#" style="padding:20px 0px 15px 0px;height:30px;">Home</a>
</li>
<li><a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()" style="padding:15px 0px;">Team</a>
        <div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="#">Item1</a>
<a href="#">Item2</a>
<a href="#">Item3</a>
<a href="#">Item4</a>
</div>
</li>
</li>
    <li><a href="#" style="padding:20px 0px 15px 0px;height:30px;">Team</a>
<li><a href="#" onmouseover="mopen('m3')" onmouseout="mclosetime()" style="padding:15px 0px;">Designs</a>
        <div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="#">Item1</a>
<a href="#">Item2</a>
<a href="#">Item3</a>
<a href="#">Item4</a>
</div>
</li>
</li>
    <li><a href="#" style="padding:20px 0px 15px 0px;height:30px;">Designs</a>
<li><a href="#" onmouseover="mopen('m4')" onmouseout="mclosetime()" style="height:35px;padding:8px 0px 7px 0px;">Experiments &amp; Results</a>
        <div id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="#">Item1</a>
<a href="#">Item2</a>
<a href="#">Item3</a>
<a href="#">Item4</a>
</div>
</li>
</li>
     <li><a href="#" style="padding:20px 0px 15px 0px;height:30px;">Experiments & Results</a>
     <li><a href="#" onmouseover="mopen('m5')" onmouseout="mclosetime()" style="padding:15px 0px;">Protocol</a>
        <div id="m5" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="#">Item1</a>
<a href="#">Item2</a>
<a href="#">Item3</a>
<a href="#">Item4</a>
</div>
</li>
</li>
     <li><a href="#" style="padding:20px 0px 15px 0px;height:30px;">Protocol</a>
     <li><a href="#" onmouseover="mopen('m6')" onmouseout="mclosetime()" style="padding:15px 0px;">Attributions</a>
        <div id="m6" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="#">Item1</a>
<a href="#">Item2</a>
<a href="#">Item3</a>
<a href="#">Item4</a>
</div>
</li>
</li>
    <li><a href="#"  style="padding:20px 0px 15px 0px;height:30px;">Attributions</a>
</ul>
        </li>
</ul>-->
</div>
</div>


<div class="text-box">
<div class="text-box">


<style type="text/css">
.box{ width:960px;height:1000px; margin:0 auto; overflow:hidden;}
.main{ width:710px; height:auto; float:right;position:relative;padding:10px 10px 10px 10px;}
.fixed{ width:220px; height:400px; font:normal; text-align:center;float:left;word-spacing:0.1em;top:10px;margin-top:10px;}
.main img{border:hidden;margin-bottom:5px;}
.main div,li,p{font-family:Arial;line-height:150%;word-spacing:0.1em;}
.box p{color:#000;font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:150%;text-align:left; clear:both;}
.box h1{text-decoration:none;font-weight:normal;color:#0babe7;}
.img1{margin:0 150px 15px 150px;padding:5px 5px 5px 5px;background-color:#fafafa;border:thin solid #999; vertical-align:middle;width:400px;}
.img1 a{target="_blank";}
</style>
<script type="text/javascript">
$(document).ready(function(e) {
t = $('.fixed').offset().top;
mh = $('.main').height();
fh = $('.fixed').height();
$(window).scroll(function(e){
s = $(document).scrollTop();
if(s > t - 100){
$('.fixed').css('position','fixed');
if(s + fh - 2000 > mh){
$('.fixed').css('top',mh-s-fh+'px');
}
}else{
$('.fixed').css('position','');
}
})
});
</script>
<div class="box">
<div class="sub">
<div class="fixed">
<style type="text/css">
li{margin-bottom:0px;}
.cont ul,li{list-style: none;} 
.cont ul {padding: 0; margin: 0;text-align:center;} 
.cont .hmain{background-color:#303437 ;width: 220px;font-size:16px;float: left;border-top:#fff thin solid;border-bottom:#fff thin solid;} 
 
.cont a {text-decoration: none; /* padding-left: 10px;*/  display: block;  display: inline-block; width: 220px;padding-top: 7px;padding-bottom: 7px;} 
.cont .hmain a{color:#fff;  }
.cont .hmain a:hover{color:#000;background:#999;border-top:#000 thin solid;border-bottom:#000 thin solid;  } 
.cont .hmain ul {display: none;} 
.cont .hmain li a{font-size:14px;color:#000;background-color:#404748;line-height:150%;border:#000 thin solid ;}
.cont .hmain li a:hover{color:#404748;background:#999; line-height:150%;border:#999 thin solid ;}
</style>
<script type="text/javascript">
$(document).ready(function(){ 
    $(".hmain").hover(function(){ 
        $(this).children("ul").slideDown(); 
        changeIcon($(this).children("a")); 
    },function(){ 
        $(this).children("ul").slideUp(); 
        changeIcon($(this).children("a")); 
    }); 
});
</script>
<div class="cont">
        <ul>
            <li class="hmain" style="margin-top:20px;">
                    <a href="#">Biobrick</a>
               
            </li>
            <li class="hmain">
                <a href="#">Others</a>
               
            </li>
            <li class="hmain">
                <a href="#">Judging Criteria</a>
            </li>
           
            <li>
                <a href="#"><img src="#" width="200px" height="200px" border="none" style="margin-top:80px;"/></a>
            </li>
        </ul>
</div>
</div>
</div>
</div>


<div class="vedio">
<div class="main">
123456
</div>


</div>
</div>


<div class="link">
<div class="link">
<p><br />
<br />
E-mail:austinamens@gmail.com | Address:Building No.20, No.92 Weijin Road, Tianjin, China | Zip-code:300072
<br />Copyright 2013 © Tianjin University iGEM Team</p>
</div>
</div>
<!--<div class="vedio">
</div>-->
<!--top button section-->
<div style="display: block" id="goTopBtn">
<a href="#top" title="Top"><img border=0 src="#"></a>
</div>
<a href="http://openwetware.org/index.php?title=Biomod/2013/Tianjin&action=edit">edit</a>
<a href="http://openwetware.org/index.php?title=Biomod/2013/Tianjin&action=edit">edit</a>
</div>
 





Revision as of 07:02, 24 October 2013

<html> </div>

<style>

  • {margin:0;padding:0;font-family:"微软雅黑","Arial";}

body{ width: 960px; height:auto; margin: 0 auto; font-size:12px; font-family:Arial, Helvetica, sans-serif; background-color:#fcfcfc; border:#000 thin solid; }

h1,h2,h3,h4,h5,h6{border:none;}

p {margin:0.5em 0 !important; text-decoration:none; font-family:Arial, Helvetica, sans-serif; font-size:12px; }

.logo-section{ height:220px; width:960px; position:relative; float:left; margin-top:5px; background:url(#) no-repeat; /*background-color:#0F6;*/ }

.content1{ height:50px; width:960px; position:relative; float:left; /*background-color:#F90;*/ }

.text-box{ width:960px; height:auto; margin-top:0px; float:left; position:relative; /*background-color:#96F;*/ }


.vedio{ width:960px; height:300px; position:relative; float:left; /*background-color:#FCC;*/ }

.link{ margin:0 auto; width:960px; height:200px; text-align:center; /*background-color:#FF6;*/ float:left; }

  1. goTopBtn {POSITION: fixed;TEXT-ALIGN: center;LINE-HEIGHT: 30px;WIDTH: 100px;BOTTOM: 35px;HEIGHT: 100px;FONT-SIZE: 12px;RIGHT: 30px;}
  1. content{margin:0;padding:0;height:1000px;border:0px;}
  1. column-content{background-color:#FFF;}

/*hidden section*/

.firstHeading{display:none;}

  1. sidebar-main{display:none;}
  2. p-cactions{display:none;}
  3. p-personal{display:none;}

</style>

<!--banner section--> <div class="logo-section">

</div>


<!--content section-->

<style type="text/css"> .sddm{z-index: 30;width: 960px;height:20px;position:relative;float:left;background-color:#303437;position:raletive;margin-left:0px;} .sddm ul{margin-left:0px;} .sddm li{margin: 0;list-style: none;float: left;font: bold 14px arial;height:20px;background-color:#FFF;border-left:#fff thin solid;border-right:#fff thin solid;} .sddm li a{display: block;margin:0;width: 158px;height:20px;background:#303437;color: #FFF;text-align: center;text-decoration: none;} .sddm li a:hover{background:#999;color:#000;} .sddm div{position: absolute;width:158px;z-index:999;visibility: hidden;margin-top:1px;padding: 0;} .sddm div a{position: relative;display: block;margin: 0;padding: 5px 5px;width: auto;white-space: nowrap;text-align:center;text-decoration: none;color: #FFF;font: 12px arial;height:20px;} .sddm div a:hover{background:#999;color:#000;}

</style> <script> var timeout = 500; var closetimer = 0; var ddmenuitem = 0;

function mopen(id) { mcancelclosetime(); if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; ddmenuitem = document.getElementById(id); ddmenuitem.style.visibility = 'visible';} function mclose() { if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';} function mclosetime() { closetimer = window.setTimeout(mclose, timeout);} function mcancelclosetime() { if(closetimer) { window.clearTimeout(closetimer); closetimer = null;}} document.onclick = mclose; </script>


<div class="content1"> <ul class="sddm">

   <li><a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()" style="padding:15px 0px;">Home</a>

</li> <li><a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()" style="padding:15px 0px;">Team</a>

       <div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">

<a href="#">Item1</a> <a href="#">Item2</a> <a href="#">Item3</a> <a href="#">Item4</a> </div> </li> <li><a href="#" onmouseover="mopen('m3')" onmouseout="mclosetime()" style="padding:15px 0px;">Designs</a>

       <div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">

<a href="#">Item1</a> <a href="#">Item2</a> <a href="#">Item3</a> <a href="#">Item4</a> </div> </li> <li><a href="#" onmouseover="mopen('m4')" onmouseout="mclosetime()" style="height:35px;padding:8px 0px 7px 0px;">Experiments &amp; Results</a>

       <div id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">

<a href="#">Item1</a> <a href="#">Item2</a> <a href="#">Item3</a> <a href="#">Item4</a> </div> </li>

   <li><a href="#" onmouseover="mopen('m5')" onmouseout="mclosetime()" style="padding:15px 0px;">Protocol</a>
       <div id="m5" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">

<a href="#">Item1</a> <a href="#">Item2</a> <a href="#">Item3</a> <a href="#">Item4</a> </div> </li>

   <li><a href="#" onmouseover="mopen('m6')" onmouseout="mclosetime()" style="padding:15px 0px;">Attributions</a>
       <div id="m6" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">

<a href="#">Item1</a> <a href="#">Item2</a> <a href="#">Item3</a> <a href="#">Item4</a> </div> </li> </ul> </div>


<div class="text-box">

<style type="text/css"> .box{ width:960px;height:1000px; margin:0 auto; overflow:hidden;}

.main{ width:710px; height:auto; float:right;position:relative;padding:10px 10px 10px 10px;} .fixed{ width:220px; height:400px; font:normal; text-align:center;float:left;word-spacing:0.1em;top:10px;margin-top:10px;} .main img{border:hidden;margin-bottom:5px;} .main div,li,p{font-family:Arial;line-height:150%;word-spacing:0.1em;}


.box p{color:#000;font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:150%;text-align:left; clear:both;} .box h1{text-decoration:none;font-weight:normal;color:#0babe7;} .img1{margin:0 150px 15px 150px;padding:5px 5px 5px 5px;background-color:#fafafa;border:thin solid #999; vertical-align:middle;width:400px;} .img1 a{target="_blank";}

</style>

<script type="text/javascript"> $(document).ready(function(e) { t = $('.fixed').offset().top; mh = $('.main').height(); fh = $('.fixed').height(); $(window).scroll(function(e){ s = $(document).scrollTop(); if(s > t - 100){ $('.fixed').css('position','fixed'); if(s + fh - 2000 > mh){ $('.fixed').css('top',mh-s-fh+'px'); } }else{ $('.fixed').css('position',''); } }) }); </script>


<div class="box">

<div class="sub"> <div class="fixed"> <style type="text/css"> li{margin-bottom:0px;} .cont ul,li{list-style: none;} .cont ul {padding: 0; margin: 0;text-align:center;} .cont .hmain{background-color:#303437 ;width: 220px;font-size:16px;float: left;border-top:#fff thin solid;border-bottom:#fff thin solid;}

.cont a {text-decoration: none; /* padding-left: 10px;*/ display: block; display: inline-block; width: 220px;padding-top: 7px;padding-bottom: 7px;} .cont .hmain a{color:#fff; } .cont .hmain a:hover{color:#000;background:#999;border-top:#000 thin solid;border-bottom:#000 thin solid; } .cont .hmain ul {display: none;} .cont .hmain li a{font-size:14px;color:#000;background-color:#404748;line-height:150%;border:#000 thin solid ;} .cont .hmain li a:hover{color:#404748;background:#999; line-height:150%;border:#999 thin solid ;} </style>

<script type="text/javascript"> $(document).ready(function(){

   $(".hmain").hover(function(){  
       $(this).children("ul").slideDown();  
       changeIcon($(this).children("a"));  
   },function(){  
       $(this).children("ul").slideUp();  
       changeIcon($(this).children("a"));  
   });  

}); </script> <div class="cont">

       <ul> 
           <li class="hmain" style="margin-top:20px;"> 
                   <a href="#">Biobrick</a> 
               
           </li> 
           <li class="hmain"> 
               <a href="#">Others</a> 
               
           </li> 
           <li class="hmain"> 
               <a href="#">Judging Criteria</a>
           </li> 


           <li> 
               <a href="#"><img src="#" width="200px" height="200px" border="none" style="margin-top:80px;"/></a> 
           </li>
       </ul> 

</div> </div> </div>

<div class="main"> 123456 </div>

</div>

<div class="link"> <p><br /> <br /> E-mail:austinamens@gmail.com | Address:Building No.20, No.92 Weijin Road, Tianjin, China | Zip-code:300072 <br />Copyright 2013 © Tianjin University iGEM Team</p> </div>


</div>


<!--<div class="vedio">

</div>-->


<!--top button section--> <div style="display: block" id="goTopBtn"> <a href="#top" title="Top"><img border=0 src="#"></a> </div>


<a href="http://openwetware.org/index.php?title=Biomod/2013/Tianjin&action=edit">edit</a>





</html>