|
|
(30 intermediate revisions not shown) |
Line 1: |
Line 1: |
| + | {{Template:Team:SCUT-China/Home/Mainhead}} |
| <HTML> | | <HTML> |
- | <HEAD>
| + | <HEAD> |
- | <TITLE> China-Home </TITLE>
| + | <script src="jQuery.js"></script> |
- | <META name="Generator" content="EditPlus">
| + | <style type="text/css"> |
- | <META name="Author" content="">
| + | |
- | <META name="Keywords" content="">
| + | |
- | <META name="Description" content="">
| + | |
- | <script src="jQuery.js"></script>
| + | |
- | <style type="text/css">
| + | |
| | | |
- | /* hiding the top section*/
| |
- | body{position:absolute; top:0px; width:100%; height:auto;font-family:微软雅黑;background:transparent;}
| |
- | #top-section{
| |
- | height:0px;
| |
- | border:none;
| |
- | width:980px;
| |
- | margin-left:200px;
| |
- | margin:0 auto;
| |
- | padding:0 0 0 0;
| |
- | background-color:transparent;
| |
- | overflow:hide;
| |
- | }
| |
- | #p-logo{display:none;}
| |
- | #search-controls{display:none;}
| |
- | #top{display:none;}
| |
- | .firstHeading{display:none;}
| |
- | /* end of hiding the top section*/
| |
| | | |
- | /* global setting*/
| |
- | #globalWrapper{position:absolute; top:0px;left:0px; width:100%; padding:0 0 0 0;margin:0 0 0 0;height:100%;font-family: calibri, Arial, Helvetica, sans-serif;}
| |
- | #content{
| |
- | background-color:transparent;
| |
- | border:none;
| |
- | width:100%;
| |
- | height:auto;
| |
- | marign:0 auto;
| |
- | padding:0 0 0 0;
| |
- |
| |
- | }
| |
- | #bodyContent{
| |
- | background-color:transparent;
| |
- | border:none;
| |
- |
| |
- | }
| |
- | siteSub{
| |
- | display:none;
| |
- | border:none;
| |
- | }
| |
- | contentSub{
| |
- | display:none;
| |
- | }
| |
- | /* end of global setting*/
| |
- |
| |
- | /*hiding the footer-box*/
| |
- | #footer-box{display:none;}
| |
- | #catlinks{display:none;}
| |
- | /*end of hiding the footer book*/
| |
- |
| |
- | /* menu (page, edit ...) */
| |
- | #menubar {
| |
- | background-color:transparent;
| |
- | position: relative;
| |
- | float:left;
| |
- | white-space: nowrap;
| |
- | top:-6px;
| |
- | width:980px;
| |
- | z-index: 5000;
| |
- | font-family: sans-serif;
| |
- | font-size: 95%;
| |
- | line-height: 1em;
| |
- | z-index:99;
| |
- |
| |
- | }
| |
- |
| |
- |
| |
- | .left-menu, .left-menu a {
| |
- | text-align: left;
| |
- | color:#999999;
| |
- | text-transform: lowercase;
| |
- | }
| |
- |
| |
- | .left-menu:hover {
| |
- | color: #D00000;
| |
- | background-color: transparent;
| |
- | }
| |
- |
| |
- | .right-menu{width:400px; float:right}
| |
- | .right-menu, .right-menu a {
| |
- | right: 0px;
| |
- | text-align: right;
| |
- | color: #999999;
| |
- | }
| |
- | #menubar ul {
| |
- | color: #999999;
| |
- | list-style: none;
| |
- | }
| |
- | #menubar li {
| |
- | display: inline;
| |
- | position: relative;
| |
- | cursor: pointer;
| |
- | padding-left: 0px;
| |
- | padding-right: 0px;
| |
- | }
| |
- | .left-menu li a {
| |
- | padding: 0px 10px 0px 0px;
| |
- | }
| |
- | .left-menu .selected {
| |
- | # color: #999999;
| |
- | }
| |
- | #.left-menu .selected:hover {
| |
- | # color: #999999;
| |
- | #}
| |
- |
| |
- | .left-menu:hover a {
| |
- | color: #999999;;
| |
- | }
| |
- |
| |
- | .left-menu li a:hover {
| |
- | color: #D00000;
| |
- | text-decoration: underline;
| |
- | }
| |
- |
| |
- |
| |
- | .right-menu li {
| |
- | # background-color: transparent;
| |
- | }
| |
- | .right-menu li a {
| |
- | padding: 0px 15px 0px 0px;
| |
- | color: #999999;;
| |
- | background-color: transparent;
| |
- | }
| |
- | .right-menu li a:hover {
| |
- | color: #D00000;
| |
- | text-decoration: underline;
| |
- | }
| |
- | /* end menu (edit, page ...) */
| |
- |
| |
- |
| |
- | #header{position:absolute;top:0px;left:0px;width:100%;height:100px;z-index:1000;text-align:center;border:1px solid black;}
| |
- | #header img{width:100%;height:auto;}
| |
- | #top2{position:absolute;top:100px;left:0px;width:100%;height:48px;z-index:1000;}
| |
- | #top2 img{position:absolute;left:-1px;width:100%;height:48px;}
| |
- | .menubar{position:absolute;top:0px;width:100%;width:100%;height:48px;font-size:20px;font-family:Calibri;text-align:center;z-index:1000;color:white;}
| |
- | .menubar a{text-decoration:none;opacity:1;color:white;}
| |
- | .menubar a:hover{text-decoration:underline;}
| |
- | .menubar ul{list-style:none;margin-top:0px;}
| |
- | .menubar ul > li{float:left;width:150px;cursor:pointer;line-height:48px;height:48px;}
| |
- | .menubar ul > li > ul{margin-left:0px;display:none;height:200px;width:120px;}
| |
- | .menubar ul > li:hover > ul{display:block;}
| |
- | .menubar ul > li > ul > li{margin-left:0px;width:160px;line-height:40px;background-color:white;color:black;}
| |
- | .menubar ul > li > ul > li:hover{opacity:0.8;}
| |
| | | |
- | .slides{position:absolute;top:2px;left:0px;width:100%;height:auto;overflow:hidden;background-color:transparent;z-index:500;}
| + | </style> |
- | .slide-pic{margin-top:0px;margin-left:0px;width:100%;height:auto;overflow:hidden;padding:0;}
| + | </HEAD> |
- | .slide-pic img{width:100%;height:auto;margin-left:0px;margin-top:0px;}
| + | |
- | .slide-pic li{display:none;}
| + | |
- | .slide-pic li.cur{display:block;}
| + | |
- | .slide-li li{display:inline;list-style:none;}
| + | |
- | .slide-li a{text-decoration:none;color:#000;float:right;margin-top:-15px;display:none;}
| + | |
- | .slide-li a:hover{color:#ccc;}
| + | |
- | | + | |
- | | + | |
- | #subject{position:absolute;top:550px;left:0px;width:100%;height:220px;overflow:hidden;}
| + | |
- | .sub{width:333px;height:220px;float:left;margin-left:3px;}
| + | |
- | .sub img{position:absolute;width:333px;height:auto;z-index:500;}
| + | |
- | .sub1{}
| + | |
- | .sub2{}
| + | |
- | .sub3{}
| + | |
- | .cover{position:absolute;margin-top:166px;width:333px;height:220px;background-color:#DCF1F7;z-index:1000;}
| + | |
- | .co1{}
| + | |
- | | + | |
- | #footer{position:absolute;width:100%;height:100px;left:0px;top:770px;}
| + | |
- | #footer img{width:100%;height:auto;}
| + | |
- | </style>
| + | |
- | </HEAD>
| + | |
- | | + | |
- | <BODY>
| + | |
- | <div id="header">
| + | |
- | <img src="https://static.igem.org/mediawiki/2014/1/1b/Scut%281%29.png">
| + | |
- | </div>
| + | |
- | <div id="top2">
| + | |
- | <img src="https://static.igem.org/mediawiki/2014/e/e5/Menubar.png">
| + | |
- | <div class="menubar">
| + | |
- | <ul>
| + | |
- | <li style="margin-left:109px;">Home</li>
| + | |
- | <li>Team
| + | |
- | <ul style="height:120px;">
| + | |
- | <li>Members</li>
| + | |
- | <li>Notebook</li>
| + | |
- | <li>Attributions</li>
| + | |
- | </ul>
| + | |
- | </li>
| + | |
- | <li>Project
| + | |
- | <ul >
| + | |
- | <li>Overview</li>
| + | |
- | <li>Background</li>
| + | |
- | <li>Design</li>
| + | |
- | <li>Results</li>
| + | |
- | <li>Future work</li>
| + | |
- | </ul>
| + | |
- | </li>
| + | |
- | <li>Model
| + | |
- | <ul style="height:80px;">
| + | |
- | <li>Parts</li>
| + | |
- | <li>Juding</li>
| + | |
- | </ul>
| + | |
- | </li>
| + | |
- | <li>Data Page
| + | |
- | <ul style="height:80px;">
| + | |
- | <li>Overview</li>
| + | |
- | <li>Biology</li>
| + | |
- | </ul>
| + | |
- | </li>
| + | |
- | <li>Human practice
| + | |
- | <ul>
| + | |
- | <li >Survey</li>
| + | |
- | <li>Visit and interview</li>
| + | |
- | <li>Practical analysis</li>
| + | |
- | <li >Team communication</li>
| + | |
- | </ul>
| + | |
- | </li>
| + | |
- | <li>Safety</li>
| + | |
- | </ul>
| + | |
- | </div>
| + | |
- | </div>
| + | |
| | | |
| + | <BODY> |
| + | |
| <div class="slides"> | | <div class="slides"> |
| <ul class="slide-pic"> | | <ul class="slide-pic"> |
- | <li class="cur"><img alt="" src="https://static.igem.org/mediawiki/2014/b/b0/Shome9.jpg" /></li> | + | <li class="cur"><img alt="" src="https://static.igem.org/mediawiki/2014/3/38/Shome6.jpg" /></li> |
| <li><img alt="" src="https://static.igem.org/mediawiki/2014/6/6e/Shome8.jpg" /></li> | | <li><img alt="" src="https://static.igem.org/mediawiki/2014/6/6e/Shome8.jpg" /></li> |
| <li><img alt="" src="https://static.igem.org/mediawiki/2014/c/ce/Shome7.jpg" /></li> | | <li><img alt="" src="https://static.igem.org/mediawiki/2014/c/ce/Shome7.jpg" /></li> |
Line 241: |
Line 28: |
| </ul> | | </ul> |
| </div> | | </div> |
- | <script type="text/javascript">
| |
- | $(function ($) {
| |
- | if ($(".slide-pic").length > 0) {
| |
- | var defaultOpts = { interval: 2000, fadeInTime: 300, fadeOutTime: 200 };
| |
- | var _titles = $("ul.slide-li 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>
| |
| | | |
- | | + | <div style="position:absolute;top:600px;left:0;width:100%;"> |
- | <div id="subject"> | + | <img src="https://static.igem.org/mediawiki/2014/9/9a/Scut-china_2014_home-train.png" style="width:1366px;height:137px;"/> |
- | <div class="sub sub1" style="margin-left:0px;">
| + | |
- | <img src="#"> | + | |
- | <div class="cover co1">
| + | |
- | </div>
| + | |
- | </div>
| + | |
- | <div class="sub sub2">
| + | |
- | <img src="#">
| + | |
- | <div class="cover co2">
| + | |
- | </div>
| + | |
- | </div>
| + | |
- | <div class="sub sub3">
| + | |
- | <img src="#">
| + | |
- | <div class="cover co3">
| + | |
- | </div>
| + | |
- | </div>
| + | |
- | <div class="sub sub4">
| + | |
- | <img src="#">
| + | |
- | <div class="cover co4">
| + | |
- | </div>
| + | |
- | </div>
| + | |
| </div> | | </div> |
- | <script type="text/javascript">
| |
- | $(document).ready(function(){
| |
- | $(".cover").mouseover(function(){
| |
- | $(this).stop().animate({"marginTop":"0px"},300);
| |
- | });
| |
- | $(".cover").mouseout(function(){
| |
- | $(this).stop().animate({"marginTop":"166px"},300);
| |
- | });
| |
- | });
| |
- | </script>
| |
| | | |
| | | |
| | | |
| <div id="footer"> | | <div id="footer"> |
- | <img src="https://static.igem.org/mediawiki/2014/6/63/Bottom.jpg"> | + | <img src="https://static.igem.org/mediawiki/2014/0/0e/Scut-china_2014_bottom.jpg"> |
| </div> | | </div> |
| | | |
| </BODY> | | </BODY> |
| </HTML> | | </HTML> |