Team:Tianjin
From 2013.igem.org
(Difference between revisions)
Line 1: | Line 1: | ||
- | |||
- | |||
<html> | <html> | ||
- | |||
- | |||
- | |||
</div> | </div> | ||
- | |||
- | |||
</div> | </div> | ||
- | < | + | <!--main style--> |
- | + | <style type="text/css"> | |
+ | *{margin:0;padding:0;font-family:"微软雅黑","Arial";} | ||
+ | body{position:absolute; top:0px; width:100%; height:1480px;background-color:#fff;} | ||
+ | p {margin:0.5em 0 !important;text-decoration:none;font-family:Arial, Helvetica, sans-serif;font-size:12px;} | ||
+ | .content-section{width:960px;height:50px;margin-top:5px;left:50%; margin:320px 0 0 -480px; position:absolute;background-color:#0FC;} | ||
+ | .logo-section{background-color:#30C;height:140px;width:960px;position:relative;float:left; left:50%; margin:380px 0 0 -480px; position:absolute;} | ||
+ | .note{width:960px;height:200px;float:left;margin-top:10px;position:relative;background-color:#e1e6e9;padding:0;left:50%; margin:460px 0 0 -480px; position:absolute;} | ||
+ | .note1{width:960px;height:200px;float:left;margin-top:10px;position:relative;background-color:#e1e6e9;padding:0;left:50%; margin:670px 0 0 -480px; position:absolute;} | ||
+ | .note2{width:960px;height:200px;float:left;margin-top:10px;position:relative;background-color:#e1e6e9;padding:0; | ||
+ | left:50%; margin:880px 0 0 -480px; position:absolute;} | ||
+ | #footer{margin:0 auto;width:960px;min-height:73px;text-align:center;color:#666;float:left;left:50%; margin:1160px 0 0 -480px; position:absolute;} | ||
+ | |||
+ | <!--hidden section--> | ||
+ | .hidden,.firstHeading {display:none;} | ||
+ | #p-logo,#footer-box,#top,#search-controls {display:none;} | ||
+ | #top-section{height:0px;border:none;width:980px;margin:0 auto;padding:0 0 0 0;background-color:transparent;overflow:hide;} | ||
+ | </style> | ||
+ | |||
+ | <!--content section--> | ||
+ | <style type="text/css"> | ||
+ | #sddm | ||
+ | { padding-left:10px; | ||
+ | z-index: 30; | ||
+ | width: 960px; | ||
+ | height:65px; | ||
+ | position:relative; | ||
+ | float:left; | ||
+ | background-color:#FFF; | ||
+ | margin-top:5px; | ||
+ | left:50%; margin:15px 0 0 -480px; position:absolute;} | ||
+ | #sddm li | ||
+ | { margin: 0; | ||
+ | list-style: none; | ||
+ | float: left; | ||
+ | font: bold 14px arial; | ||
+ | height:25px; | ||
+ | background-color:#FFF;} | ||
+ | #sddm li a | ||
+ | { display: block; | ||
+ | margin:0; | ||
+ | padding: 20px 0px 20px 0px; | ||
+ | width: 95px; | ||
+ | height:25px; | ||
+ | background: #FFF; | ||
+ | color: #000; | ||
+ | text-align: center; | ||
+ | text-decoration: none; | ||
+ | border-top:#ECECEC 5px solid;} | ||
+ | #sddm li a:hover | ||
+ | { background:#FCFCFC; | ||
+ | color:#279EC9; | ||
+ | border-top:#279EC9 5px solid;} | ||
+ | #sddm div | ||
+ | { position: absolute; | ||
+ | width:95px; | ||
+ | z-index:999; | ||
+ | visibility: hidden; | ||
+ | margin: 0; | ||
+ | padding: 0;} | ||
+ | #sddm div a | ||
+ | { position: relative; | ||
+ | display: block; | ||
+ | margin: 0; | ||
+ | padding: 5px 10px; | ||
+ | width: auto; | ||
+ | white-space: nowrap; | ||
+ | text-align:center; | ||
+ | text-decoration: none; | ||
+ | color: #000; | ||
+ | font: 12px arial} | ||
+ | #sddm div a:hover | ||
+ | { background:#FAFAFA; | ||
+ | color: #279EC9;} | ||
+ | </style> | ||
+ | <div class="cont1"> | ||
+ | <ul id="sddm"> | ||
+ | |||
+ | <li style="margin-left:200px;"><a href="example11-1.html" onmouseover="mopen('m1')" onmouseout="mclosetime()">Home</a> | ||
+ | </li> | ||
+ | <li><a href="example12-1.html" onmouseover="mopen('m2')" onmouseout="mclosetime()">Project</a> | ||
+ | </li> | ||
+ | <li><a href="#" onmouseover="mopen('m3')" onmouseout="mclosetime()">Safty</a> | ||
+ | </li> | ||
+ | <li><a href="#" onmouseover="mopen('m4')" onmouseout="mclosetime()">Modeling</a> | ||
+ | </li> | ||
+ | <li><a href="#" onmouseover="mopen('m5')" onmouseout="mclosetime()">Protocol</a> | ||
+ | </li> | ||
+ | <li><a href="#" onmouseover="mopen('m6')" onmouseout="mclosetime()">Society</a> | ||
+ | </li> | ||
+ | <!--<li><a href="#" onmouseover="mopen('m7')" onmouseout="mclosetime()">Data</a> | ||
+ | </li> | ||
+ | <li><a href="#" onmouseover="mopen('m8')" onmouseout="mclosetime()">Notebook</a> | ||
+ | </li>--> | ||
+ | <li><a href="#" onmouseover="mopen('m9')" onmouseout="mclosetime()">Team</a> | ||
+ | </li> | ||
+ | <li><a href="#" onmouseover="mopen('m10')" onmouseout="mclosetime()">Attributions</a> | ||
+ | </li> | ||
+ | </ul> | ||
</div> | </div> | ||
+ | |||
+ | <!--picture banner--> | ||
+ | <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script> | ||
+ | <style type="text/css"> | ||
+ | img { border: 0px; } | ||
+ | #banner { margin: 75px auto 0px auto; padding: 0px; width: 100%; height: 360px; float:left;} | ||
+ | .slides { margin: 0px auto; width: 100%; height: 360px; overflow: hidden; position: relative; } | ||
+ | .slide-pic { margin: 0px; padding: 0px; width: 100%; overflow: hidden; list-style: none; } | ||
+ | .slide-pic img { width: 100%; height: 360px; } | ||
+ | .slide-pic li { display: none; } | ||
+ | .slide-pic li.cur { display: block; } | ||
+ | .slide-li { margin: 0px; padding: 0px; left: 0px; bottom: 0px; position: absolute; } | ||
+ | .slide-li li { margin: 0px; padding: 0px; width: 30px; height: 15px; float: left; overflow: hidden; list-style: none; } | ||
+ | .slide-li a { width: 30px; height: 15px; color: #000; font-size: 12px; display: block; text-align:center;text-decoration:none;} | ||
+ | .slide-li a:hover { color: #FFF; text-decoration: none; } | ||
+ | .op li { background: #999999; filter: alpha(opacity=60); opacity: 0.6; } | ||
+ | .op li.cur { background: #666666; } | ||
+ | .slide-txt span { display: none; } | ||
+ | </style> | ||
+ | <script type="text/javascript"> | ||
+ | jQuery(function ($) { | ||
+ | if ($(".slide-pic").length > 0) { | ||
+ | var defaultOpts = { interval: 5000, fadeInTime: 300, fadeOutTime: 200 }; | ||
+ | var _titles = $("ul.slide-txt li"); | ||
+ | var _titles_bg = $("ul.op li"); | ||
+ | var _bodies = $("ul.slide-pic li"); | ||
+ | var _count = _titles.length; | ||
+ | var _current = 0; | ||
+ | var _intervalID = null; | ||
+ | var stop = function () { window.clearInterval(_intervalID); }; | ||
+ | var slide = function (opts) { | ||
+ | if (opts) { | ||
+ | _current = opts.current || 0; | ||
+ | } else { | ||
+ | _current = (_current >= (_count - 1)) ? 0 : (++_current); | ||
+ | }; | ||
+ | _bodies.filter(":visible").fadeOut(defaultOpts.fadeOutTime, function () { | ||
+ | _bodies.eq(_current).fadeIn(defaultOpts.fadeInTime); | ||
+ | _bodies.removeClass("cur").eq(_current).addClass("cur"); | ||
+ | }); | ||
+ | _titles.removeClass("cur").eq(_current).addClass("cur"); | ||
+ | _titles_bg.removeClass("cur").eq(_current).addClass("cur"); | ||
+ | }; | ||
+ | var go = function () { | ||
+ | stop(); | ||
+ | _intervalID = window.setInterval(function () { slide(); }, defaultOpts.interval); | ||
+ | }; | ||
+ | var itemMouseOver = function (target, items) { | ||
+ | stop(); | ||
+ | var i = $.inArray(target, items); | ||
+ | slide({ current: i }); | ||
+ | }; | ||
+ | _titles.hover(function () { if ($(this).attr('class') != 'cur') { itemMouseOver(this, _titles); } else { stop(); } }, go); | ||
+ | _bodies.hover(stop, go); | ||
+ | go(); | ||
+ | } | ||
+ | }); | ||
+ | </script> | ||
+ | <!-- START --> | ||
+ | <div id="banner"> | ||
+ | <div class="slides"> | ||
+ | <ul class="slide-pic"> | ||
+ | <li class="cur"><a href="#" target="_blank"> | ||
+ | <img alt="" src="images/pic0001.jpg" /></a></li> | ||
+ | <li><a href="#" target="_blank"> | ||
+ | <img alt="" src="images/pic0001.jpg" /></a></li> | ||
+ | <li><a href="#" target="_blank"> | ||
+ | <img alt="" src="images/pic0001.jpg" /></a></li> | ||
+ | <li><a href="#" target="_blank"> | ||
+ | <img alt="" src="images/pic0001.jpg" /></a></li> | ||
+ | <li><a href="#" target="_blank"> | ||
+ | <img alt="" src="images/pic0001.jpg" /></a></li> | ||
+ | </ul> | ||
+ | <ul class="slide-li op"> | ||
+ | <li class="cur"></li> | ||
+ | <li></li> | ||
+ | <li></li> | ||
+ | <li></li> | ||
+ | <li></li> | ||
+ | </ul> | ||
+ | <ul class="slide-li slide-txt"> | ||
+ | <li class="cur"><a href="#">1</a></li> | ||
+ | <li><a href="#">2</a></li> | ||
+ | <li><a href="#">3</a></li> | ||
+ | <li><a href="#">4</a></li> | ||
+ | <li><a href="#">5</a></li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!-- END OF THE BANNER --> | ||
+ | |||
+ | <div class="note"> | ||
+ | |||
</div> | </div> | ||
- | < | + | <div class="note1"> |
- | < | + | </div> |
+ | <div class="note2"> | ||
+ | </div> | ||
+ | <div id="footer"> | ||
+ | <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> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | + | ||
- | + | ||
- | + | <!--top button section--> | |
- | + | <div style="display: block" id="goTopBtn"> | |
- | + | <a href="#top"><img border=0 src="images/lanren_top.jpg"></a> | |
- | + | </div> | |
- | + | <style type="text/css"> | |
- | + | #goTopBtn { | |
- | + | POSITION: fixed; | |
- | + | TEXT-ALIGN: center; | |
- | + | LINE-HEIGHT: 30px; | |
+ | WIDTH: 30px; | ||
+ | BOTTOM: 35px; | ||
+ | HEIGHT: 33px; | ||
+ | FONT-SIZE: 12px; | ||
+ | CURSOR: pointer; | ||
+ | RIGHT: 0px; | ||
+ | _position: absolute; | ||
+ | _right: auto; | ||
+ | } | ||
+ | </style> | ||
+ | </html> |
Revision as of 05:29, 27 August 2013