File:Shome9.jpg
From 2014.igem.org
(Difference between revisions)
Line 1: | Line 1: | ||
- | < | + | <HTML> |
- | < | + | <HEAD> |
- | <style type="text/css"> | + | <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 ...) */ | ||
- | |||
- | |||
- | |||
- | |||
+ | #top{position:absolute;top:2px;left:0px;width:100%;height:68px;background-color:black;z-index:1000;} | ||
+ | .menubar{position:absolute;top:0px;left:10%;width:80%;height:68px;font-family:微软雅黑;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:25px;margin-left:102px;} | ||
+ | .menubar ul > li{float:left;width:120px;line-height:20px;cursor:pointer; } | ||
+ | .menubar ul > li > ul{margin-left:0px;display:none;height:200px;width:120px;margin-top:28px;} | ||
+ | .menubar ul > li:hover > ul{display:block;} | ||
+ | .menubar ul > li > ul > li{margin-left:-70px;margin-top:2px;width:160px;line-height:40px;background-color:white;color:black;} | ||
+ | |||
+ | .slides{position:absolute;top:70px;left:0px;width:100%;height:auto;overflow:hidden;background-color:transparent;padding:0;margin:0;z-index:500;} | ||
+ | .slide-pic{margin-top:0px;width:100%;height:auto;overflow:hidden;padding:0;} | ||
+ | .slide-pic img{width:100%;height:auto;} | ||
+ | .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:615px;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:837px;background-color:#00c67d;} | ||
+ | </style> | ||
+ | </HEAD> | ||
- | + | <BODY> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | <div id="top"> | |
- | + | <div class="menubar"> | |
- | + | <ul> | |
- | + | <li style="width:100px;">Home</li> | |
- | + | <li style="width:100px;">Team | |
- | </ | + | <ul style="height:120px;"> |
+ | <li>Members</li> | ||
+ | <li>Notebook</li> | ||
+ | <li>Attributions</li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li style="width:110px;">Project | ||
+ | <ul > | ||
+ | <li>Overview</li> | ||
+ | <li>Background</li> | ||
+ | <li>Design</li> | ||
+ | <li>Results</li> | ||
+ | <li>Future work</li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li style="width:110px;">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 style="width:150px;text-align:center;margin-left:15px;">Human practice | ||
+ | <ul style="height:160px;margin-left:-10px;"> | ||
+ | <li >Survey</li> | ||
+ | <li>Visit and interview</li> | ||
+ | <li>Practical analysis</li> | ||
+ | <li >Team communication</li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li style="text-align:;width:110px;">Safety</li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
- | + | <div class="slides"> | |
- | < | + | <ul class="slide-pic"> |
- | </ | + | <li class="cur"><img alt="" src="picture/show1.jpg" /></li> |
- | + | <li><img alt="" src="picture/show2.jpg" /></li> | |
- | <script> | + | <li><img alt="" src="picture/show3.jpg" /></li> |
- | $( | + | <li><img alt="" src="picture/show4.jPG" /></li> |
- | + | </ul> | |
+ | <ul class="slide-li"> | ||
+ | <li><a href="#">●</a></li> | ||
+ | <li><a href="#">●</a></li> | ||
+ | <li><a href="#">●</a></li> | ||
+ | <li><a href="#">●</a></li> | ||
+ | </ul> | ||
+ | </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> | </script> | ||
- | |||
- | |||
- | + | <div id="subject"> | |
- | <div id=" | + | <div class="sub sub1"> |
- | < | + | <img src="hp/sub1.jpg"> |
- | + | <div class="cover co1"> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | <img | + | |
- | < | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
</div> | </div> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
</div> | </div> | ||
- | + | <div class="sub sub2"> | |
- | <div | + | <img src="hp/sub1.jpg"> |
- | <img | + | <div class="cover co2"> |
- | < | + | |
- | + | ||
- | + | ||
</div> | </div> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
</div> | </div> | ||
- | + | <div class="sub sub3"> | |
- | <div class=" | + | <img src="hp/sub1.jpg"> |
+ | <div class="cover co3"> | ||
</div> | </div> | ||
- | |||
- | |||
</div> | </div> | ||
- | + | <div class="sub sub4"> | |
- | <div class=" | + | <img src="hp/sub1.jpg"> |
+ | <div class="cover co4"> | ||
</div> | </div> | ||
- | |||
- | |||
</div> | </div> | ||
- | </div | + | </div> |
- | + | <script type="text/javascript"> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | <script | + | |
- | + | ||
- | + | ||
- | + | ||
$(document).ready(function(){ | $(document).ready(function(){ | ||
- | $(". | + | $(".cover").mouseover(function(){ |
- | + | $(this).stop().animate({"marginTop":"0px"},300); | |
- | + | }); | |
- | $( | + | $(".cover").mouseout(function(){ |
- | $(". | + | $(this).stop().animate({"marginTop":"166px"},300); |
- | + | ||
}); | }); | ||
}); | }); | ||
- | |||
- | |||
</script> | </script> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | <div | + | <div id="footer"> |
</div> | </div> | ||
- | + | ||
- | </ | + | </BODY> |
- | </ | + | </HTML> |
Revision as of 08:00, 6 October 2014
File history
Click on a date/time to view the file as it appeared at that time.
Date/Time | Thumbnail | Dimensions | User | Comment | |
---|---|---|---|---|---|
current | 07:51, 6 October 2014 | 2,732×1,100 (1.53 MB) | Xuan303 (Talk | contribs) |
File links
There are no pages that link to this file.