Template:WHUcss

From 2011.igem.org

(Difference between revisions)
 
(457 intermediate revisions not shown)
Line 1: Line 1:
-
<html>
+
<html xmlns="http://www.w3.org/1999/xhtml">
-
<style>
+
<head>
-
@charset "UTF-8";
+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-
/* CSS Document */
+
<link href='http://fonts.googleapis.com/css?family=Prata|Vidaloka|Adamina|Andika|Vollkorn|Numans|Tienne|Alice|Lobster|Droid+Serif|Droid+Sans|Open+Sans|Oswald|PT+Sans|Ubuntu' rel='stylesheet' type='text/css'>
 +
<link href='http://fonts.googleapis.com/css?family=Molengo' rel='stylesheet' type='text/css'>
 +
<style type="text/css">
 +
html, body {
 +
font-family:Calibri;
 +
  margin: 0;
 +
  padding: 0;
 +
}
 +
#visit h3
 +
{
 +
font-family: 'Lobster',"Bodoni MT",tahoma,宋体b8b\4f53,sans-serif, cursive;
 +
font-size:22px;
 +
color:#EB5649;
 +
}
 +
div.back
 +
{
 +
background:#FCD208;
 +
height:160px
 +
}
-
body{
+
.static
-
background-color:#936;
+
{
 +
font-size:22px;
 +
font-style:semi-bold;
 +
margin:5px;
 +
font-family: 'Vollkorn',tahoma,宋体b8b\4f53,sans-serif;
 +
color:#4CB848;
 +
}
 +
.dyna
 +
{
 +
font-size:25px;
 +
margin:5px;
 +
font-family: 'Vollkorn',tahoma,宋体b8b\4f53,sans-serif;
 +
font-style:Italic;
 +
color:#EB5649;
 +
}
 +
 +
#menus
 +
{
 +
height:26px;
 +
text-align:center;
 +
position:absolute;
 +
top:167px;
 +
width:960px;
 +
left:35px;
}
}
 +
 
 +
#menus ul li ul{
 +
position:absolute;
 +
        z-index:99;
 +
        display:none;
 +
        top:22px;
 +
        left:-19px;
 +
        -webkit-border-radius: 5px;
 +
        -moz-border-radius:5px;
 +
        background-color:#FFF;
 +
     
 +
}
 +
#menus ul li ul a li
 +
{
 +
display:block; width:118px; height:26px;-moz-border-radius:5px; -webkit-border-radius: 5px;
 +
       
 +
}
 +
li.mainlevel
 +
{
 +
-webkit-border-radius: 5px;
 +
-moz-border-radius:5px;
 +
}
 +
#menulist a
 +
{
 +
width:90px;
 +
}
 +
#menus ul li
 +
{
 +
position:relative;
 +
width:88px; 
 +
float:left;
 +
height:26px; 
 +
display:inline;
 +
padding:0px 5px;
-
#menulist{
+
}
-
position:absolute;
+
#menus ul li a{
-
top:140px;
+
        font-size:18.5px;  
-
left:0px;
+
        text-decoration:none;
-
         height:30px;
+
        color:black;
-
width:975;
+
         height:26px;
-
background:Aliceblue;
+
         z-index:99;
-
list-style:none;
+
        width:118px;
-
        margin-left:15px;
+
        font-family: 'Lobster',tahoma,宋体b8b\4f53,sans-serif, cursive;
-
         z-index:0;
+
     
-
      }
+
-
#menus{
+
-
font-size:18px;
+
-
font-family:Calibri;
+
-
list-style-image: none;
+
-
list-style-type: none;
+
-
+
}
}
 +
#menulist a:hover{color:#fff;text-decoration:none;}
-
ul.menu 
+
 
-
{
+
 
-
display:none;  
+
#groupparts
-
        list-style:none;  
+
{
-
left:-10px;
+
position:absolute;
-
        z-index:1
+
top:230px;
 +
z-index:1;
 +
left:150px;
}
}
-
ul.menu li
+
#head{margin:auto; width:1000px;}
 +
#title
 +
{text-align:center;  font-family: 'Lobster',"Bodoni MT",tahoma,宋体b8b\4f53,sans-serif, cursive;
 +
font-size:22px;padding-top: .5em;font-weight: bold;
 +
color:#EB5649;}
 +
#countdown
{
{
-
background-color:Aliceblue;
+
position:absolute;
-
margin-left:-25px;
+
-webkit-border-radius: 5px;
 +
-moz-border-radius:5px;
 +
width:170px;
 +
height:200px;
 +
top:1460px;
 +
background:#FCD208;
 +
left:1010px;
 +
font-size:15px;
}
}
-
li:hover .menu,.over .menu{
+
 
-
display:block;      
+
#back
 +
{
 +
text-align:left;
}
}
-
#menulist li
+
#visit
{
{
-
    float:left;
+
position:absolute;
-
    width:85px;
+
text-align:center;
 +
-webkit-border-radius: 5px;
 +
-moz-border-radius:5px;
 +
width:170px;
 +
height:150px;
 +
top:1682px;
 +
left:1015px;
 +
background:#FCD208;
}
}
-
#menulist a{
+
 
-
display:block;
+
 
-
text-decoration:none;
+
-
color:#000;
+
-
font-weight:bold;
+
-
        text-align:center;
+
-
        border:1px solid #900;
+
-
}
+
-
#menulist a:hover{
+
-
background-color:red;
+
-
font-style:italic;
+
-
font-size:20px;
+
-
width:auto;
+
-
}
+
   
   
#WHU1 {
#WHU1 {
-
background-color: #963;
+
         position:relative;
-
         top:0;
+
height: 220px;
-
height: 140px;
+
width: 1000px;
-
width: 975px;
+
        top:-26px;
}
}
 +
 +
/*我自己的css内容*/
 +
.firstHeading  
.firstHeading  
{ display:none; }
{ display:none; }
Line 115: Line 198:
}
}
-
#footer-box
 
-
{top:1200px;
 
-
z-index:20;}
 
.left-menu {
.left-menu {
Line 133: Line 213:
#menubar li a {
#menubar li a {
color:#8C8984;
color:#8C8984;
-
        background-color:transparent;
+
        background-color:transparent
}
}
Line 139: Line 219:
color:transparent;
color:transparent;
         background-color:transparent;
         background-color:transparent;
 +
        border:none;
}
}
-
#content
 
-
{
 
-
background=transparent;
 
-
}
 
.left-menu {
.left-menu {
Line 158: Line 235:
}
}
-
#menubar{
 
-
color: #transparent;
 
-
}
 
#menubar.right-menu {
#menubar.right-menu {
Line 173: Line 247:
#content
#content
{
{
-
background:transparent;
+
background-color:transparent;
-
border:hidden;
+
height:auto;
 +
border:none;
 +
}
 +
#content1
 +
{
 +
position:absolute;
 +
background-image:url(/wiki/images/c/c0/Whu-backpeice.jpg);
 +
background-repeat:repeat;
 +
z-index:1;
 +
width:1000px;
 +
margin-left:5px;
 +
top:204px;
}
}
#p-logo
#p-logo
Line 181: Line 266:
}
}
#menubar {
#menubar {
-
background-color:f5f6f7;
+
        color:transparent;
font-size:85%;
font-size:85%;
line-height:1em;
line-height:1em;
Line 190: Line 275:
z-index:5;
z-index:5;
height:20px;
height:20px;
-
overflow:hidden
+
overflow:hidden;
 +
        border:none;
 +
}
 +
#footer-box
 +
{
 +
display:none;
}
}
#top-section {
#top-section {
Line 197: Line 287:
}
}
</style>
</style>
 +
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
 +
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
 +
<script type="text/javascript" src="http://gettopup.com/releases/latest/top_up-min.js"></script>
 +
<script type="text/javascript">
 +
 +
var mouseover_tid = [];
 +
var mouseout_tid = [];
 +
jQuery(document).ready(function(){
 +
jQuery('#menulist > li').each(function(index){
 +
jQuery(this).hover(
 +
 +
function(){
 +
var _self = this;
 +
clearTimeout(mouseout_tid[index]);
 +
mouseover_tid[index] = setTimeout(function() {
 +
jQuery(_self).css({"background":"#BA353E"}).find('ul:eq(0)').slideDown(260);
 +
}, 50);
 +
},
 +
 +
function(){
 +
var _self = this;
 +
clearTimeout(mouseover_tid[index]);
 +
mouseout_tid[index] = setTimeout(function() {
 +
jQuery(_self).css({"background":"transparent"}).find('ul:eq(0)').slideUp(90);
 +
}, 50);
 +
}
 +
 +
);
 +
});
 +
$("#menus ul li ul a li").hover(function(){
 +
    $(this).css({"background-color":"#BA353E"});
 +
},function(){
 +
$(this).css({"background-color":"transparent"});
 +
})
 +
});
 +
$(function() {
 +
$( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
 +
$( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
 +
});
 +
 +
</script>
 +
</head>
 +
<body  background="/wiki/images/4/4e/WHU-Background.jpg">
 +
<div id="content">
 +
<div class="WHUlogo" id="WHU1">
 +
<a href="https://2011.igem.org/Team:WHU-China"><img src="/wiki/images/d/de/Whu-Head.png" height="220" width="1000"></a>
 +
<a href="https://igem.org/Main_Page" title="igem.org"><img src="/wiki/images/9/90/Whu-igem.png" height="80" width="100" style="position:absolute;top:30px;right:50px;"></a>
 +
</div>
 +
<div id="menus">
 +
<ul id="menulist">
 +
  <li class="mainlevel"> <a href="/Team:WHU-China">Home</li></a>
 +
  <li class="mainlevel"><a href="/Team:WHU-China/Team"> Team</a>
 +
        <ul>
 +
            <a  href="/Team:WHU-China/Team/History"><li>History</li></a>
 +
            <a href="/Team:WHU-China/Team/Gallary"><li >Gallery</li></a>
 +
            <a href="/Team:WHU-China/Team/Collaboration"><li>Collaboration</li></a>
 +
            <a  href="/Team:WHU-China/Team/WhuUniversity"><li>Our University</li></a>
 +
        </ul>
 +
    </li>   
 +
    <li class="mainlevel"><a href="/Team:WHU-China/Project">Project</a>
 +
        <ul>
 +
            <a href="/Team:WHU-China/Project/Overview"><li>Overview</li></a>
 +
          <a href="/Team:WHU-China/Project/Design"> <li >Design</li></a>
 +
            <a href="/Team:WHU-China/Project/Modeling"><li>Modeling</li> </a>
 +
            <a href="/Team:WHU-China/Project/Results"><li>Results</li></a>
 +
           
 +
        </ul> 
 +
    </li>
 +
    <li class="mainlevel" style="width:80px;"><a href="/Team:WHU-China/Parts">Parts</a>
 +
        <ul> 
 +
         
 +
    <a href="/Team:WHU-China/Parts/Submitted" ><li >Submitted</li></a>
 +
            <a href="/Team:WHU-China/Parts/Data"><li>Data</li></a>
 +
         
 +
        </ul>
 +
    </li>
 +
   
 +
    <li  class="mainlevel" style="width:95px"><a href="/Team:WHU-China/Notebook">Notebook</a>
 +
        <ul>
 +
          <a href="/Team:WHU-China/Notebook/Daytoday"> <li >Progress</li>  </a>
 +
            <a href="/Team:WHU-China/Notebook/Protocols"><li >Protocols</li></a>
 +
         
 +
        </ul>
 +
    </li>
 +
    <li style="width:95px" class="mainlevel"><a href="/Team:WHU-China/Safety">Safety</a>
 +
    </li>
 +
    <li style="width:144px;" class="mainlevel"><a href="/Team:WHU-China/Humanpractice">Human Practice</a>
 +
    </li>
 +
    <li style="width:118px;" class="mainlevel"><a href="/Team:WHU-China/Standard">Standard</a>
 +
    </li>
 +
 +
</ul>
 +
 +
</div>
 +
 +
<div id="countdown"><div id="title">
 +
Count Down</div>
 +
<div class="back">
 +
<p class="static" id="pday"> <span class="dyna" id="sday"></span> days</p>
 +
<p class="static" id="phour"><span class="dyna" id="shour"></span> hours</p>
 +
<p class="static" id="pmin"> <span class="dyna" id="smin"></span> minutes</p>
 +
<p class="static" id="psec"> <span class="dyna" id="ssec"></span> seconds</p>
 +
</div>
 +
</div>
 +
<script type="text/javascript">
 +
// to get the count time
 +
var now = new Date();
 +
function createtime(){
 +
var grt= new Date("11/5/2011 17:00:00");
 +
now.setTime(now.getTime()+250);
 +
days = (grt - now) / 1000 / 60 / 60 / 24;
 +
dnum = Math.floor(days);
 +
hours = (grt - now) / 1000 / 60 / 60 - (24 * dnum);
 +
hnum = Math.floor(hours);
 +
 +
minutes = (grt - now) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
 +
mnum = Math.floor(minutes);
 +
 +
seconds = (grt - now) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
 +
snum = Math.round(seconds);
 +
 +
 +
if(days>0)
 +
{
 +
    document.getElementById("sday").innerHTML = String(dnum);
 +
    document.getElementById("shour").innerHTML = hnum;
 +
    document.getElementById("smin").innerHTML = mnum;
 +
    document.getElementById("ssec").innerHTML = snum;
 +
}
 +
else
 +
{
 +
    document.getElementById("title").innerHTML = "iGEM 2011 Final";
 +
    document.getElementById("pday").style.display = "none";
 +
    document.getElementById("phour").innerHTML = "WHU Bioers";
 +
    document.getElementById("pmin").innerText = "Are the";
 +
    document.getElementById("psec").innerHTML = "BEST!";
 +
}
 +
}
 +
 +
var getd;
 +
if(getd==null)
 +
{
 +
    getd = setInterval("createtime()",250);
 +
}
 +
 +
 +
 +
 +
$(function()
 +
{
 +
$("#accordion").accordion({
 +
event: "click hoverintent"
 +
});
 +
});
 +
 +
var cfg = ($.hoverintent = {
 +
sensitivity: 1,
 +
interval: 150
 +
});
 +
 +
$.event.special.hoverintent = {
 +
setup: function() {
 +
$( this ).bind( "mouseover", jQuery.event.special.hoverintent.handler );
 +
},
 +
teardown: function() {
 +
$( this ).unbind( "mouseover", jQuery.event.special.hoverintent.handler );
 +
},
 +
handler: function( event ) {
 +
event.type = "hoverintent";
 +
var self = this,
 +
args = arguments,
 +
target = $( event.target ),
 +
cX, cY, pX, pY;
 +
 +
function track( event ) {
 +
cX = event.pageX;
 +
cY = event.pageY;
 +
};
 +
pX = event.pageX;
 +
pY = event.pageY;
 +
function clear() {
 +
target
 +
.unbind( "mousemove", track )
 +
.unbind( "mouseout", arguments.callee );
 +
clearTimeout( timeout );
 +
}
 +
function handler() {
 +
if ( ( Math.abs( pX - cX ) + Math.abs( pY - cY ) ) < cfg.sensitivity ) {
 +
clear();
 +
jQuery.event.handle.apply( self, args );
 +
} else {
 +
pX = cX;
 +
pY = cY;
 +
timeout = setTimeout( handler, cfg.interval );
 +
}
 +
}
 +
var timeout = setTimeout( handler, cfg.interval );
 +
target.mousemove( track ).mouseout( clear );
 +
return true;
 +
}
 +
};
 +
 +
 +
 +
 +
 +
 +
 +
</script>
 +
 +
</div>
 +
 +
 +
 +
</div>
 +
 +
 +
 +
<div id="visit">
 +
<h3>Visitor</h3>
 +
<div id="clustrmaps-widget" style="position:absolute;top:5px;left:5px;"></div><script type="text/javascript">var _clustrmaps = {'url' : 'https://2011.igem.org/Team:WHU-China', 'user' : 934877, 'server' : '4', 'id' : 'clustrmaps-widget', 'version' : 1, 'date' : '2011-09-24', 'lang' : 'zh', 'corners' : 'square' };(function (){ var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = 'http://www4.clustrmaps.com/counter/map.js'; var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x);})();</script><noscript><a href="http://www4.clustrmaps.com/user/782e43dd"><img src="http://www4.clustrmaps.com/stats/maps-no_clusters/2011.igem.org-Team-WHU-China-thumb.jpg" alt="Locations of visitors to this page" width="230" height="160" /></a></noscript>
 +
 +
 +
</div>
 +
</div>
 +
</body>
</html>
</html>

Latest revision as of 10:46, 28 October 2011

Count Down

days

hours

minutes

seconds

Visitor

Retrieved from "http://2011.igem.org/Template:WHUcss"