|
|
Line 1: |
Line 1: |
| + | <!-- *** What falls between these lines is the Alert Box! You can remove it from your pages once you have read and understood the alert *** --> |
| + | |
| <html> | | <html> |
- | <!--main style--> | + | <div id="box" style="width: 700px; margin-left: 137px; padding: 5px; border: 3px solid #000; background-color: #fe2b33;"> |
- | <style type="text/css">
| + | <div id="template" style="text-align: center; font-weight: bold; font-size: large; color: #f6f6f6; padding: 5px;"> |
- | *{margin:0;padding:0;font-family:"微软雅黑","Arial";}
| + | This is a template page. READ THESE INSTRUCTIONS. |
- | body{width: auto;height: auto;margin: 0 auto;font-size:12px;font-family:Arial, Helvetica, sans-serif;}
| + | |
- | .bodystyle{background:url(../images/pic006-3.jpg) top repeat-x;background-color:#e1e6e9;}
| + | |
- | 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:310px 0 0 -480px; position:absolute;background-color:#0FC;}
| + | |
- | .logo-section{background-color:#30C;height:140px;width:960px;position:relative;float:left; left:50%; margin:360px 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:440px 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:650px 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:860px 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 {display:none;}
| + | |
- | #p-logo,#footer-box {display:none;}
| + | |
- | .firstHeading {display:none;}
| + | |
- | #top {display:none;}
| + | |
- | | + | |
- | | + | |
- | </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:5px 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> |
- | | + | <div id="instructions" style="text-align: center; font-weight: normal; font-size: small; color: #f6f6f6; padding: 5px;"> |
- | <!--picture banner--> | + | You are provided with this team page template with which to start the iGEM season. You may choose to personalize it to fit your team but keep the same "look." Or you may choose to take your team wiki to a different level and design your own wiki. You can find some examples <a href="https://2009.igem.org/Help:Template/Examples">HERE</a>. |
- | <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 id="warning" style="text-align: center; font-weight: bold; font-size: small; color: #f6f6f6; padding: 5px;"> |
- | | + | You <strong>MUST</strong> have all of the pages listed in the menu below with the names specified. PLEASE keep all of your pages within your teams namespace. |
| </div> | | </div> |
- | <div class="note2">
| |
- |
| |
| </div> | | </div> |
| + | </html> |
| | | |
- | <div id="footer"> | + | <!-- *** End of the alert box *** --> |
- | <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>
| |
| | | |
| | | |