Biomod/2013/Tianjin: Difference between revisions
Xiaoke Huang (talk | contribs) No edit summary |
Xiaoke Huang (talk | contribs) 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:# | background-color:#fcfcfc; | ||
border:#000 thin solid; | border:#000 thin solid; | ||
} | } | ||
Line 33: | Line 33: | ||
} | } | ||
. | .content1{ | ||
height:50px; | height:50px; | ||
width:960px; | width:960px; | ||
Line 43: | Line 43: | ||
.text-box{ | .text-box{ | ||
width:960px; | width:960px; | ||
height: | 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: | .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: | .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: | .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:# | .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=" | <div class="content1"> | ||
<ul class="sddm"> | |||
<li><a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()" style="padding:15px 0px;">Home</a> | |||
<li><a href="#" style="padding: | </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="#" 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="#" onmouseover="mopen('m4')" onmouseout="mclosetime()" style="height:35px;padding:8px 0px 7px 0px;">Experiments & 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="#" | <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="#" | <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> | ||
</ul> | |||
</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=" | <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> | ||
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; }
- goTopBtn {POSITION: fixed;TEXT-ALIGN: center;LINE-HEIGHT: 30px;WIDTH: 100px;BOTTOM: 35px;HEIGHT: 100px;FONT-SIZE: 12px;RIGHT: 30px;}
- content{margin:0;padding:0;height:1000px;border:0px;}
- column-content{background-color:#FFF;}
/*hidden section*/
.firstHeading{display:none;}
- sidebar-main{display:none;}
- p-cactions{display:none;}
- 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 & 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>